How to verify modal window is displayed or not-CodePudding

I'm a newbie of Vuejs.

In vue2, I already have verified whether component is displayed by specific trigger.
However, I cannot verify whether above displayed component is disappeared after another trigger.

I tried to verify wrapper.findComponent('...').exists() is false.
However, I got true when component should be disappeared.

At first, I suspect another trigger does not work well,
so I called wrapper.html(), and there is no component that I want to verify.
That's why, trigger works well, probably.

My question is, as I said at title, How to verify component existance when flag is toggled.

Below is my code.

code for test.

  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)
  })

As reference, source code (short version).

<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>

CodePudding user response：

I think in your test, you encounter an update applied by Vue, which is asynchronous behavior. So after changing the reactive property (enable = false), you should wait for Vue to update DOM by adding this line:

await Vue.nextTick();
expect(wrapper.findComponent('.v-picker').exists()).toBe(false);

CodePudding user response：

Vuetify renders its dialogs, menus, pickers (etc.) outside of the application wrapper, that's why wrapper.html() doesn't help you.

I believe the correct way is to use attachTo option, so you can mount your component inside the div with the data-app attribute.

If that doesn't work for you, you can also set data-app attribute on body:

let node = document.createElement('body');
node.setAttribute("data-app", true);