feat(visible): add visible() method on Wrapper (#327) (#335)

Author: Toilal

docs/en/README.md

@@ -52,6 +52,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
+    * [visible](api/wrapper/visible.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -67,6 +68,7 @@
     * [setProps](api/wrapper-array/setProps.md)
     * [trigger](api/wrapper-array/trigger.md)
     * [update](api/wrapper-array/update.md)
+    * [visible](api/wrapper-array/visible.md)
   * [components](api/components/README.md)
     * [TransitionStub](api/components/TransitionStub.md)
     * [TransitionGroupStub](api/components/TransitionGroupStub.md)

docs/en/SUMMARY.md

@@ -48,6 +48,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
+    * [visible](api/wrapper/visible.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -63,6 +64,7 @@
     * [setProps](api/wrapper-array/setProps.md)
     * [trigger](api/wrapper-array/trigger.md)
     * [update](api/wrapper-array/update.md)
+    * [visible](api/wrapper-array/visible.md)
   * [components](api/components/README.md)
     * [TransitionStub](api/components/TransitionStub.md)
     * [TransitionGroupStub](api/components/TransitionGroupStub.md)

docs/en/api/wrapper-array/visible.md

@@ -0,0 +1,22 @@
+# visible()
+
+Assert every `Wrapper` in `WrapperArray` is visible.
+
+Returns false if at least one ancestor element has `display: none` or `visibility: hidden` style.
+
+This can be used to assert that a component is hidden by `v-show`.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.visible()).toBe(true)
+expect(wrapper.findAll('.is-not-visible').visible()).toBe(false)
+expect(wrapper.findAll('.is-visible').visible()).toBe(true)
+```

docs/en/api/wrapper/visible.md

@@ -0,0 +1,21 @@
+# visible()
+
+Assert `Wrapper` or `WrapperArray` is visible.
+
+Returns false if an ancestor element has `display: none` or `visibility: hidden` style.
+
+This can be used to assert that a component is hidden by `v-show`.
+
+- **Returns:** `{boolean}`
+
+- **Example:**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+expect(wrapper.visible()).toBe(true)
+expect(wrapper.find('.is-not-visible').visible()).toBe(false)
+```

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 | void,
     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 (): void {
+    throwError(`find did not return ${this.selector}, cannot call visible() on empty Wrapper`)
+  }
+
   hasAttribute (): void {
     throwError(`find did not return ${this.selector}, cannot call hasAttribute() on empty Wrapper`)
   }

src/wrappers/wrapper-array.js

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

src/wrappers/wrapper.js

@@ -120,6 +120,26 @@ 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 {
+    let element = this.element
+
+    if (!element) {
+      return false
+    }
+
+    while (element) {
+      if (element.style && (element.style.visibility === 'hidden' || element.style.display === 'none')) {
+        return false
+      }
+      element = element.parentElement
+    }
+
+    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>