Unit Test Vuetify v-select @change событие? - PullRequest
Новая
       86

Unit Test Vuetify v-select @change событие?

0 голосов
/ 02 апреля 2020

Невозможно написать тест, который проверяет событие Vuetify v-select @change. Обработчик события select_change не вызывается внутри теста.

Демо. vue

    <div>
        <v-select @change="select_change" :items="[1,2,3]" v-model="value"></v-select>
    </div>

    export default {
        data() {
            return {
                value: 1,
            }
        },
        methods: {
            select_change() {
                console.log('inside select_change')
            }
        }
    }

Демо. vue. test. js

    it('v-select@change', () => {
        wrapper = mount(Demo, {
            vuetify: new Vuetify
        })
        wrapper.setMethods({
            select_change: jest.fn(),
        })
        wrapper.find('.v-select').trigger('change', /* {value: 2} */)
        expect(wrapper.vm.select_change).toBeCalled()
    })

тестовый вывод

Ошибка: ожидаемо (jest.fn ()). toBeCalled ()

Ожидаемое количество звонков:> = 1 Полученное количество звонков: 0

1 Ответ

0 голосов
/ 03 апреля 2020

Возможно, это не тот ответ, который вам нужен, но не ваша работа для проверки события <v-select> компонента *1003*. Это событие уже протестировано командой Vuetify среди юнит-тестов для этого компонента. Кстати, люди довольно часто хотят писать тесты, подобные описанному вами.

Однако ваша задача - убедиться, что ваш компонент (тот, который обертывает v-select) определяет соответствующий интерфейс / контракт и соблюдает его. Некоторые примеры вещей, которые вы могли бы разумно протестировать:

  1. Имеет ли список элементов, назначенных на v-select, ровно три элемента: 1, 2 и 3?
  2. Компонент имеет метод с именем select_change() и возвращает ли эта функция ожидаемые значения с заданным вводом? (Кстати, ваш select_change() метод в настоящее время не возвращает любых значений, поэтому его сложно протестировать)

Ваши тесты могут выглядеть примерно так: 

import { createLocalVue, mount } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Demo from '@/components/Demo'

Vue.use(Vuetify)
const vuetify = new Vuetify()
const localVue = createLocalVue()

describe('A Demo component', () => {
  it('has a `v-select` with 3 items: [1, 2, 3]', () => {
    const wrapper = mount(Demo, { localVue, vuetify })
    const items = wrapper.find('.v-select').props('items')
    expect(items.length).toBe(3)
    expect(items).toStrictEqual([1, 2, 3])
  })

  it('has item 1 selected by default', () => {
    const wrapper = mount(Demo, { localVue, vuetify })
    expect(wrapper.find('.v-select').props('value')).toBe(1)
  })
})

Каким бы заманчивым ни было желание протестировать базовую функциональность компонента v-select, вы должны верить, что команда Vuetify выполнила свою работу. : -)

...