Тестирование Vue компонента, который имеет vue2-datepicker - PullRequest
0 голосов
/ 13 января 2020

У меня есть Vue.js2 компонент (MyComponent), который отображает vue2-datepicker компонент. Я пытаюсь написать тестовые примеры для компонента MyComponent. В частности, я пытаюсь проверить метод change.

Это MyComponent

<template>
     <div id="component">
         <date-picker
             v-model="selectedDate"
             type="date"
             :clearable="false"
             valueType="format"
             :format="momentDateFormat"
             @change="updateParent"
             lang="en"
          >
        </date-picker>
     </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import DatePicker from 'vue2-datepicker';

  @Component({
      components: {
        DatePicker,
      }
   })

  export default class MyComponent extends Vue {
        momentDateFormat:string = "YYYYMMDD"
        selectedDate: string = "2020/01/23"

        updateParent(): void {
           console.log("update parent is called");
           this.$emit('input', this.selectedDate);
        }
  }

Как видно из приведенного выше кода компонента, при изменении даты следует вызвать updateParent().

Это что я пробовал

import { shallowMount, createLocalVue } from "@vue/test-utils"
import DatePicker from 'vue2-datepicker'
import MyComponent from "./MyComponent.vue"

const createWrapper = () => {

        return shallowMount(MyComponent, {
              stubs: {
                 DatePicker
               }
}

describe("test MyComponent", () => {

      beforeEach(() => {
            wrapper = createWrapper();
            jest.spyOn('wrapper.vm', 'updateParent');
      })

      it("component mounts without errors", () => {
        expect(wrapper.isVueInstance).toBeTruthy()
      })

      it("component should trigger updateParent when datepicker is changed", () => {
           const datePickerComponent = wrapper.find('date-picker-stub');
           datePickerComponent.setProps({ value : "2020/01/23" });
           datePickerComponent.trigger('change');
           console.log(wrapper.emitted()); // here it displays {} 
      });

 });

Когда я запускаю тест, wrapper.emitted() показывает {}. Это означает, что updateParent() не сработало.

Итак, мой вопрос, как я могу проверить MyComponent для события change (метод updateParent () должен вызываться, когда любой событие изменения происходит в <date-picker>).

Любые указатели на то, как я могу добиться этого, очень приветствуются.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...