featureRequest: add isVisible to VueWrapper (#628)

* add isVisible to VueWrapper * format and lint * fix test code * add two node child test case * chore: white space and refactor Co-authored-by: Lachlan Miller <[email protected]>
vuejs · Jun 12, 2021 · 52b3777 · 52b3777
1 parent d64698c
commit 52b3777
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 0 deletions.
diff --git a/src/vueWrapper.ts b/src/vueWrapper.ts
@@ -230,6 +230,11 @@ export class VueWrapper<T extends ComponentPublicInstance>
     return Array.from(results).map((element) => new DOMWrapper(element))
   }
 
+  isVisible(): boolean {
+    const domWrapper = new DOMWrapper(this.element)
+    return domWrapper.isVisible()
+  }
+
   setData(data: Record<string, any>): Promise<void> {
     mergeDeep(this.componentVM.$data, data)
     return nextTick()

diff --git a/tests/isVisible.spec.ts b/tests/isVisible.spec.ts
@@ -124,4 +124,103 @@ describe('isVisible', () => {
 
     document.head.removeChild(style)
   })
+
+  describe('isVisible with find Component', () => {
+    describe('root component has v-show', () => {
+      const Hidden = defineComponent({
+        template: '<div>hidden</div>'
+      })
+
+      const Show = defineComponent({
+        template: '<div>show</div>'
+      })
+
+      const Root = defineComponent({
+        template: '<div><Hidden v-show="false" /><Show /></div>',
+        components: {
+          Hidden,
+          Show
+        }
+      })
+
+      it('mount: returns false when root has v-show=false', () => {
+        const wrapper = mount(Root)
+        const hidden = wrapper.findComponent(Hidden)
+        const show = wrapper.findComponent(Show)
+        expect(hidden.isVisible()).toBe(false)
+        expect(show.isVisible()).toBe(true)
+      })
+
+      it('shallowMount: returns false when root has v-show=false', () => {
+        const wrapper = mount(Root, {
+          shallow: true
+        })
+        const hidden = wrapper.findComponent(Hidden)
+        const show = wrapper.findComponent(Show)
+        expect(hidden.isVisible()).toBe(false)
+        expect(show.isVisible()).toBe(true)
+      })
+    })
+
+    describe('child component has v-show', () => {
+      const Hidden = defineComponent({
+        template: '<div v-show="false">hidden</div>'
+      })
+
+      const Show = defineComponent({
+        template: '<div>show</div>'
+      })
+
+      const Root = defineComponent({
+        template: '<div><Hidden /><Show /></div>',
+        components: {
+          Hidden,
+          Show
+        }
+      })
+
+      it('mount: returns false when child has v-show=false', () => {
+        const wrapper = mount(Root)
+        const hidden = wrapper.findComponent(Hidden)
+        const show = wrapper.findComponent(Show)
+        expect(hidden.isVisible()).toBe(false)
+        expect(show.isVisible()).toBe(true)
+      })
+
+      it('shallowMount: returns true when child has v-show=false, because of shallow mount', () => {
+        const wrapper = mount(Root, {
+          shallow: true
+        })
+        const hidden = wrapper.findComponent(Hidden)
+        const show = wrapper.findComponent(Show)
+        expect(hidden.isVisible()).toBe(true)
+        expect(show.isVisible()).toBe(true)
+      })
+    })
+
+    describe('child has two nodes', () => {
+      const Foo = defineComponent({
+        template: `<div /><span />`
+      })
+
+      const Root = defineComponent({
+        template: '<Foo v-show="false" />',
+        components: {
+          Foo
+        }
+      })
+
+      it('mount: returns false', () => {
+        const wrapper = mount(Root)
+        expect(wrapper.isVisible()).toBe(false)
+      })
+
+      it('shallowMount: return false', () => {
+        const wrapper = mount(Root, {
+          shallow: true
+        })
+        expect(wrapper.isVisible()).toBe(false)
+      })
+    })
+  })
 })