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

Author: Toilal

Diff for: 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
  */

Diff for: 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)

Diff for: 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)

Diff for: 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)
+```

Diff for: 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)
+```

Diff for: 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,

Diff for: 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",

Diff for: 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`)
   }

Diff for: 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')
 

Diff for: 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
    */

Diff for: 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>

Diff for: test/unit/specs/mount/Wrapper/visible.spec.js

@@ -0,0 +1,137 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import { mount } from '~vue-test-utils'
+import ComponentWithVShow from '~resources/components/component-with-v-show.vue'
+import ComponentWithVIf from '~resources/components/component-with-v-if.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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    const 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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    const 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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    const 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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    const 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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(false)
+
+    const 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()
+
+    const notReadyElement = wrapper.find('.not-ready')
+    expect(notReadyElement.visible()).to.equal(true)
+
+    const readyChildElement = wrapper.find('.child.ready')
+    expect(readyChildElement.visible()).to.equal(false)
+  })
+
+  it('returns true if all elements are visible', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.vm.$set(wrapper.vm, 'rootReady', true)
+    wrapper.update()
+
+    const readyChildElement = wrapper.find('.ready')
+    expect(readyChildElement.visible()).to.equal(true)
+  })
+
+  it('returns false if one element is not visible', () => {
+    const wrapper = mount(ComponentWithVShow)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.vm.$set(wrapper.vm, 'rootReady', true)
+    wrapper.update()
+
+    const readyChildElement = wrapper.find('.ready, .not-ready')
+    expect(readyChildElement.visible()).to.equal(false)
+  })
+
+  it('fails if one element is absent', () => {
+    const wrapper = mount(ComponentWithVIf)
+    wrapper.vm.$set(wrapper.vm, 'ready', false)
+    wrapper.update()
+
+    const fn = () => wrapper.find('.child.ready').visible()
+    expect(fn).to.throw()
+  })
+
+  it('returns true if one element is present', () => {
+    const wrapper = mount(ComponentWithVIf)
+    wrapper.vm.$set(wrapper.vm, 'ready', true)
+    wrapper.update()
+    expect(wrapper.find('.child.ready').visible()).to.equal(true)
+  })
+})

Diff for: 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