Тестирование события наведения мыши в vue-test-utils - PullRequest
Новая
       47

Тестирование события наведения мыши в vue-test-utils

0 голосов
/ 18 мая 2018

Я пытаюсь выполнить модульный тест для событий @mouseover и @mouseleave, которые отображают действия v-card в зависимости от наведения мыши.Я использую vue-test-utils в моем приложении vuejs2 webpack.Вот что я нашел в Интернете: пример клика мышью .Заранее спасибо всем, кто помогает

Вот мой код фактический HTML-код шаблона: 

  <v-card class="menuCard pa-1 elevation-2 f-basis-0 my-2" 
@mouseover="isBlockAct = true" @mouseleave="isBlockAct = (!checked? 
false:true)">
 <v-checkbox v-model="checked" id="checkbox" class="diCheckbox ma-0" hide- 
details></v-checkbox>
  <v-card-actions class="myUpHere pa-0">
  <v-layout row :class="{'isAct': isBlockAct, 'isNotAct': !isBlockAct}">
 </v-card>

Вот что я попробовал в моем коде spec.js: 

  describe("Over event", () => {
     it("shows the icons if the card is over or not", () => {
      const wrapper = mount(MenuRepasRecetteCard, {
        propsData: {}
      });
      wrapper.find(".menuCard").trigger("mouseover");
      expect(wrapper.find(".isAct").text()).contain("remove_red_eye");
    });

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

К сожалению, я не могу комментировать ответ Ларса.В документах говорится, что nextTick не нужен .:

Vue Test Utils запускает событие синхронно.Следовательно, Vue.nextTick не требуется.

-Источник: https://vue -test-utils.vuejs.org / guides / dom-events.html # важный

0 голосов
/ 20 июня 2018

вам нужно дождаться, пока событие будет обработано vue.

describe("Over event", (done) => {
    it("shows the icons if the card is over or not", () => {
        const wrapper = mount(MenuRepasRecetteCard, {
            propsData: {}
        });
        wrapper.find(".menuCard").trigger("mouseover");
        wrapper.vm.$nextTick( () => {
            expect(wrapper.find(".isAct").text()).contain("remove_red_eye");
            done();
        });
    });
});
...