Soy un novato de Vuejs.
En vue2, ya verifiqué si el componente se muestra por un disparador específico.
Sin embargo, no puedo verificar si el componente que se muestra arriba desaparece después de otro desencadenante.
Traté de verificar que wrapper.findComponent('...').exists() es false .
Sin embargo, me hice true cuando el componente debería desaparecer.
Al principio, sospecho que otro gatillo no funciona bien,
así que llamé wrapper.html() , y no hay ningún componente que quiera verificar.
Es por eso que el gatillo funciona bien, probablemente.
Mi pregunta es, como dije en el título, cómo verificar la existencia del componente cuando se cambia la bandera.
A continuación se muestra mi código.
código para la prueba.
test('After date pick, picker is closed', async() => { let node = document.createElement('body') const wrapper = mount(App, { localVue, vuetify, attachTo: node }) // modal window does not appear yet. expect(wrapper.findComponent('.v-picker').exists()).toBe(false) // `enable` is set to true. Then, modal window is displayed. // and verification got true const menu = wrapper.getComponent(DateMenu) await menu.setData({ enable: true }) expect(wrapper.findComponent('.v-picker').exists()).toBe(true) // $emit input event cause `enable` set to false const picker = wrapper.getComponent('.v-picker') await picker.vm.$emit('input', '2020-01-01') // html() returns result in which there is no elements related to toggled component console.log(wrapper.html()) expect(menu.vm.$data.enable).toBe(false) // test fail findComponent found a component expect(wrapper.findComponent('.v-picker').exists()).toBe(false) })Como referencia, código fuente (versión corta).
<template> <!-- v-model="enable" controls modal window is displayed or not--> <v-menu v-model="enable"> <template v-slot:activator="{ on, attrs }"> <v-text-field v-model="date" v-bind="attrs" v-on="on" > </v-text-field> </template> <!-- This is displayed and verified existance in test. --> <v-date-picker v-model="date" @input="input"> </v-date-picker> </v-menu> </template> <script> export default { data: () => { return { // enable controls modal window is displayed or not. // true: displayed // false: disappear enable: false, }; }, methods: { input(date) { this.enable = false } } }; </script>Creo que en su prueba, encuentra una actualización aplicada por Vue, que es un comportamiento asíncrono. Entonces, después de cambiar la propiedad reactiva ( enable = false ), debe esperar a que Vue actualice DOM agregando esta línea:
await Vue.nextTick(); expect(wrapper.findComponent('.v-picker').exists()).toBe(false);Vuetify representa sus cuadros de diálogo, menús, selectores (etc.) fuera del contenedor de la aplicación, es por eso que wrapper.html() no lo ayuda.
Creo que la forma correcta es usar la opciónattachTo , para que pueda montar su componente dentro del div con el atributo data-app .
Si eso no funciona para usted, también puede establecer el atributo de data-app en el body :
let node = document.createElement('body'); node.setAttribute("data-app", true);