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

Author: Toilal

dist/vue-test-utils.js

@@ -419,6 +419,12 @@ WrapperArray.prototype.exists = function exists () {
   return this.length > 0 && this.wrappers.every(function (wrapper) { return wrapper.exists(); })
 };
 
+WrapperArray.prototype.visible = function visible () {
+  this.throwErrorIfWrappersIsEmpty('visible');
+
+  return this.length > 0 && this.wrappers.every(function (wrapper) { return wrapper.visible(); })
+};
+
 WrapperArray.prototype.emitted = function emitted () {
   this.throwErrorIfWrappersIsEmpty('emitted');
 
@@ -590,6 +596,10 @@ ErrorWrapper.prototype.exists = function exists () {
   return false
 };
 
+ErrorWrapper.prototype.visible = function visible () {
+  throwError(("find did not return " + (this.selector) + ", cannot call visible() on empty Wrapper"));
+};
+
 ErrorWrapper.prototype.hasAttribute = function hasAttribute () {
   throwError(("find did not return " + (this.selector) + ", cannot call hasAttribute() on empty Wrapper"));
 };
@@ -874,6 +884,26 @@ Wrapper.prototype.exists = function exists () {
   return true
 };
 
+/**
+ * Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style.
+ */
+Wrapper.prototype.visible = function visible () {
+  var 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
  */

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,23 @@
+# 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)
+expect(wrapper.findAll('div').visible()).toBe(true)
+expect(wrapper.findAll('.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
    */