featureRequest: add isVisible to VueWrapper

[YutamaKotaro]

What I want

I'd like to use isVisible in vueWrapper.
I think findComponent and isVisible interfaces are very useful for test, but actually findComponent returns vueWrapper instance which doesn't have isVisible interface.
Hence, below code doesn't work well...

const Comp = defineComponent({
  template: '<div />'
})
const Root = defineComponent({
  template: '<div><Child v-show=true /></div>',
  component: {
     Comp,
 })

const wrapper = mount(Root)
console.log(wrapper.findComponent(Comp).isVisible()); // isVisible is not a function

What do you think this featureRequest ....???

I'm sorry if I'm against policy of design, but I guess this specification is more useful than current.

[lmiller1990]

What about the use case of a component with two root nodes?

<!-- Foo.vue -->
<template>
  <div />
  <span /
</template>

mount({
  template: `<foo v-show="false" />`
})

What does Vue do in this scenario? It looks like we do not have a test for this one.

[YutamaKotaro]

@lmiller1990
Thanks for your telling me good points.
Arrr.... got it. That's why vueWrapper doesn't enable us to use isVisible...!!
Ummmm....please give me a little time to think about it. If I have no idea, I'll close this pull request.

[lmiller1990]

@YutamaKotaro we can still consider this if we have a good solution. What does Vue 3 do? Does it apply style="display: none" to all the root nodes?

[YutamaKotaro]

@lmiller1990
I'm sorry ... I might have been confused ... 😢

v-show with fragments is very confusing, but I'm getting understanding what I should do thanks to you !!

Does it apply style="display: none" to all the root nodes?

No. Vue3 doesn't apply that style to any node.
Hence, below test cases and result are correct (Test cases and result of my pull request are wrong...😢).

    describe('child has two nodes', () => {
      const Foo = defineComponent({
        template: `<div />
                     <span />`
      })
      const Root = defineComponent({
        template: '<Foo v-show="false" />',
        components: {
          Foo
        }
      })
      it('mount: returns true', () => {
        const wrapper = mount(Root)
        expect(wrapper.isVisible()).toBe(true)
      })
      it('shallowMount: return true', () => {
        const wrapper = mount(Root, {
          shallow: true
        })
        expect(wrapper.isVisible()).toBe(true)
      })
    })

Is my understanding right ??

[lmiller1990]

Great, thanks!