feat(visible): Add visible() method on Wrapper (vuejs#327)

Author: Toilal

flow/wrapper.flow.js

@@ -13,6 +13,7 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     emitted(event?: string): { [name: string]: Array<Array<any>> } | Array<Array<any>> | void,
     emittedByOrder(): Array<{ name: string; args: Array<any> }> | void,
     exists(): boolean,
+    visible(): boolean,
     hasAttribute(attribute: string, value: string): boolean | void,
     hasClass(className: string): boolean | void,
     hasProp(prop: string, value: string): boolean | void,

package.json

@@ -10,7 +10,7 @@
   ],
   "scripts": {
     "build": "node build/build.js",
-    "build:test": "NODE_ENV=test node build/build.js",
+    "build:test": "cross-env NODE_ENV=test node build/build.js",
     "coverage": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit",
     "docs": "cd docs && gitbook install && gitbook serve",
     "docs:deploy": "build/update-docs.sh",

src/wrappers/error-wrapper.js

@@ -36,6 +36,10 @@ export default class ErrorWrapper implements BaseWrapper {
     return false
   }
 
+  visible (): boolean {
+    return false
+  }
+
   hasAttribute (): void {
     throwError(`find did not return ${this.selector}, cannot call hasAttribute() on empty Wrapper`)
   }

src/wrappers/wrapper-array.js

@@ -42,6 +42,10 @@ export default class WrapperArray implements BaseWrapper {
     return this.length > 0 && this.wrappers.every(wrapper => wrapper.exists())
   }
 
+  visible (): boolean {
+    return this.length > 0 && this.wrappers.every(wrapper => wrapper.visible())
+  }
+
   emitted (): void {
     this.throwErrorIfWrappersIsEmpty('emitted')
 

src/wrappers/wrapper.js

@@ -120,6 +120,30 @@ export default class Wrapper implements BaseWrapper {
     return true
   }
 
+  /**
+   * Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style.
+   */
+  visible (): boolean {
+    if (!this.exists()) {
+      console.log('NOT EXISTS')
+      return false
+    }
+
+    let element: Element = this.element
+    while (element) {
+      if (element.style && (element.style.visibility === 'hidden' || element.style.display === 'none')) {
+        return false
+      }
+      if (!element.parentElement) {
+        break
+      }
+      element = element.parentElement
+    }
+    console.log('no parent')
+    console.log(element)
+    return true
+  }
+
   /**
    * Checks if wrapper has an attribute with matching value
    */

test/resources/components/component-with-v-show.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-show="rootReady">
+    <div v-show="!ready" class="not-ready">not-ready</div>
+
+    <div v-show="ready" class="parent ready">
+      <div class="child ready">ready</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'component-with-show',
+    data: () => ({
+      ready: false,
+      rootReady: true
+    })
+  }
+</script>

test/unit/specs/mount/Wrapper/visible.spec.js

@@ -0,0 +1,101 @@
+import {compileToFunctions} from 'vue-template-compiler'
+import {mount} from '~vue-test-utils'
+import {functionalSFCsSupported} from '~resources/test-utils'
+import ComponentWithVShow from '~resources/components/component-with-v-show.vue'
+
+describe('visible', () => {
+  it('returns true if element has no inline style', () => {
+    const compiled = compileToFunctions('<div><div><span class="visible"></span></div></div>')
+    const wrapper = mount(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.visible()).to.equal(true)
+  })
+
+  it('returns false if element has inline style display: none', () => {
+    const compiled = compileToFunctions('<div><div><span style="display: none;" class="visible"></span></div></div>')
+    const wrapper = mount(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.visible()).to.equal(false)
+  })
+
+  it('returns false if element has inline style visibility: hidden', () => {
+    const compiled = compileToFunctions('<div><div><span style="visibility: hidden;" class="visible"></span></div></div>')
+    const wrapper = mount(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.visible()).to.equal(false)
+  })
+
+  it('returns true if element has v-show true', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    let readyElement = wrapper.find('.parent.ready')
+    expect(readyElement.visible()).to.equal(true)
+  })
+
+  it('returns false if element has v-show true', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    let readyElement = wrapper.find('.parent.ready')
+    expect(readyElement.visible()).to.equal(true)
+  })
+
+  it('returns true if parent element has v-show true', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    let readyChildElement = wrapper.find('.child.ready')
+    expect(readyChildElement.visible()).to.equal(true)
+  })
+
+  it('returns false if parent element has v-show false', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    let readyChildElement = wrapper.find('.child.ready')
+    expect(readyChildElement.visible()).to.equal(true)
+  })
+
+  it('returns false if root element has v-show false and parent has v-show true', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.vm.$set(wrapper.vm, 'rootReady', false)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    let readyChildElement = wrapper.find('.child.ready')
+    expect(readyChildElement.visible()).to.equal(false)
+  })
+
+  it('returns false if root element has v-show true and parent has v-show false', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', false)
+    wrapper.vm.$set(wrapper.vm, 'rootReady', true)
+    wrapper.update()
+
+    let notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(true)
+
+    let readyChildElement = wrapper.find('.child.ready')
+    expect(readyChildElement.visible()).to.equal(false)
+  })
+})

types/index.d.ts

@@ -45,6 +45,7 @@ type RefSelector = {
 interface BaseWrapper {
   contains (selector: Selector): boolean
   exists (): boolean
+  visible (): boolean
 
   attributes(): { [name: string]: string } | void
   classes(): Array<string> | void