samedi 8 février 2020

Let a (mocked) transition finish asap inside v-menu in a vuetify unit test

v-menu uses a transition internally to show the given Element when the activator is triggered. We simply want to test if the menu element is shown after the activator hit it.

In our setup we have a component test using Vue Test Utils and do:

const wrapper = createWrapper(...)
expect(wrapper.contains('.my-class')).toBe(false) // the Element is not there in the beginning

clickTheTriggerElement(wrapper) // trigger v-menu to show
await wrapper.vm.$nextTick()

expect(wrapper.find('.my-class').isVisible()).toBe(true) // fails

This fails because the transition used by v-menu is not finished yet. (It would after a setTimeout(...), thou but this is less acceptable).

Vue Test Utils describes this as a common issue and provides a solution that seems to work for plain vue.js Transitions. (They use a mock for Transition to render immediately.) Unfortunately this doesn't seem to work with internal transitions of vuetify.

How would you handle that?

Aucun commentaire:

Enregistrer un commentaire