модульное тестирование vuetify компонент v-checkbox

Question

Я хотел протестировать компонент v-checkbox. Вызов, нажав один раз триггер, изменит статус флажка.

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')

Вызов дважды триггерного клика не изменит статус флажка снят. Как реализовать?

  const flag = wrapper.find('.input-group--selection-controls__ripple')[0]
  flag.trigger('click')
  flag.trigger('click')

Answer 1

Для того, чтобы мой тест заработал, мне также пришлось найти определенный элемент ниже, но мне не нужен flushPromises (). Поиск правильного элемента с помощью class = "input-group - selection-controls__ripple" был ключевым моментом при использовании селектора класса ниже. Это позволило событию click обновить привязку, которую я пытался протестировать. Просто найти

<v-checkbox class-"my-checkbox"/>  

неверно, так как событие click не сработало для этого элемента.

it('Does uncheck', async() => {
    // We need to drill down to the .input-group--selection-controls__ripple element so the click works
    const myCheckbox = wrapper.find('.my-checkbox').find('.input-group--selection-controls__ripple');
    myCheckbox.trigger('click');
    expect(wrapper.vm.someField).toEqual(false);
});

Answer 2

Попробуйте это:

const wrapper = shallowMount(Component)
// If data is loaded asynchronously, use flush-promises to wait for the data to load.
await flushPromises()
 // Find the delete button for the first to-do item and trigger a click event on it.
$emit('.input-group--selection-controls__ripple', event.target.checked)

Ознакомьтесь с руководством Vue Test Utils и, в частности, с асинхронным поведением . Кроме того, Отличное введение в тестирование приложений Vue отлично.