Как дождаться завершения модальной анимации при загрузке в тесте Vue jest - PullRequest
Новая
       20

Как дождаться завершения модальной анимации при загрузке в тесте Vue jest

1 голос
/ 30 апреля 2019

Можно ли дождаться окончания модальной анимации в тесте Vue Jest? Моя проблема в том, что когда я нажимаю на кнопку (button.add_modal), div.my-modal должен получить класс «show», но после запуска моей кнопки кажется, что класс не присоединен в моем html (в тесте jest) ), в dev tools в работает нормально. 

    wrapper.find('button.add_modal').trigger('click');
    //This should return true, but I'm getting false.
    expect(wrapper.contains('div#my-modal.show')).toBe(true);

1 Ответ

0 голосов
/ 07 мая 2019

Мы столкнулись с аналогичной проблемой при тестировании компонента, который содержит BootstrapVue модальный .Я нашел кое-что, что сработало, посмотрев на BV модальные модульные тесты .Там вы увидите следующее: 

// take action to open modal and then
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()

... где waitNT и waitRF определены в tests / utils.js : 

export const waitNT = ctx => new Promise(resolve => ctx.$nextTick(resolve))
export const waitRAF = () => new Promise(resolve => requestAnimationFrame(resolve))

Это позволяет обновлениям DOM завершаться и модально «появляться» в вашем тесте.Возможно, вам придется поиграть с количеством звонков.Вы увидите, что они повторяются в тестах BV где-то 1-3 раза после срабатывания модального открытия.

Еще один полезный элемент - заглушка переходов в вашем монтировании-обертке, например: 

wrapper.mount(MyModalComponent, {
  stubs: {
    transition: false
  }
}

Это гарантирует, что переходы будут происходить синхронно, а не асинхронно, как указано в в документации здесь..

...