refactor: rename visible to isVisible (#425)

breaking change

Author: eddyerburgh

docs/en/SUMMARY.md

@@ -47,7 +47,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
-    * [visible](api/wrapper/visible.md)
+    * [isVisible](api/wrapper/isVisible.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -62,7 +62,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)
+    * [isVisible](api/wrapper-array/isVisible.md)
   * [components](api/components/README.md)
     * [TransitionStub](api/components/TransitionStub.md)
     * [TransitionGroupStub](api/components/TransitionGroupStub.md)

docs/en/api/wrapper-array/visible.md renamed to docs/en/api/wrapper-array/isVisible.md

@@ -16,7 +16,7 @@ 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)
+expect(wrapper.isVisible()).toBe(true)
+expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false)
+expect(wrapper.findAll('.is-visible').isVisible()).toBe(true)
 ```

docs/en/api/wrapper/visible.md renamed to docs/en/api/wrapper/isVisible.md

@@ -1,4 +1,4 @@
-# visible()
+# isVisible()
 
 Assert `Wrapper` is visible.
 
@@ -16,6 +16,6 @@ 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.isVisible()).toBe(true)
+expect(wrapper.find('.is-not-visible').isVisible()).toBe(false)
 ```

docs/ja/SUMMARY.md

@@ -47,7 +47,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
-    * [visible](api/wrapper/visible.md)
+    * [isVisible](api/wrapper/isVisible.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -61,7 +61,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)
+    * [isVisible](api/wrapper-array/isVisible.md)
   * [コンポーネント](api/components/README.md)
     * [TransitionStub](api/components/TransitionStub.md)
     * [TransitionGroupStub](api/components/TransitionGroupStub.md)

docs/ja/api/wrapper-array/visible.md renamed to docs/ja/api/wrapper-array/isVisible.md

@@ -1,4 +1,4 @@
-# visible()
+# isVisible()
 
 `WrapperArray` 内のすべての `Wrapper` が表示されているかアサートします。
 
@@ -16,7 +16,7 @@ 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)
+expect(wrapper.isVisible()).toBe(true)
+expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false)
+expect(wrapper.findAll('.is-visible').isVisible()).toBe(true)
 ```

docs/ja/api/wrapper/visible.md renamed to docs/ja/api/wrapper/isVisible.md

@@ -1,4 +1,4 @@
-# visible()
+# isVisible()
 
 `Wrapper` が表示されているかアサートします。
 
@@ -16,6 +16,6 @@ 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.isVisible()).toBe(true)
+expect(wrapper.find('.is-not-visible').isVisible()).toBe(false)
 ```

src/wrappers/wrapper.js

@@ -133,6 +133,8 @@ export default class Wrapper implements BaseWrapper {
    * Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style.
    */
   visible (): boolean {
+    warn('visible has been deprecated and will be removed in version 1, use isVisible instead')
+
     let element = this.element
 
     if (!element) {
@@ -328,6 +330,26 @@ export default class Wrapper implements BaseWrapper {
     return this.vnode.children === undefined || this.vnode.children.length === 0
   }
 
+  /**
+   * Checks if node is visible
+   */
+  isVisible (): 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 is a vue instance
    */

test/specs/wrapper/visible.spec.js renamed to test/specs/wrapper/isVisible.spec.js

@@ -3,26 +3,26 @@ import ComponentWithVShow from '~resources/components/component-with-v-show.vue'
 import ComponentWithVIf from '~resources/components/component-with-v-if.vue'
 import { describeWithShallowAndMount } from '~resources/test-utils'
 
-describeWithShallowAndMount('visible', (mountingMethod) => {
+describeWithShallowAndMount('isVisible', (mountingMethod) => {
   it('returns true if element has no inline style', () => {
     const compiled = compileToFunctions('<div><div><span class="visible"></span></div></div>')
     const wrapper = mountingMethod(compiled)
     const element = wrapper.find('.visible')
-    expect(element.visible()).to.equal(true)
+    expect(element.isVisible()).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 = mountingMethod(compiled)
     const element = wrapper.find('.visible')
-    expect(element.visible()).to.equal(false)
+    expect(element.isVisible()).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 = mountingMethod(compiled)
     const element = wrapper.find('.visible')
-    expect(element.visible()).to.equal(false)
+    expect(element.isVisible()).to.equal(false)
   })
 
   it('returns true if element has v-show true', () => {
@@ -31,10 +31,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(false)
+    expect(notReadyElement.isVisible()).to.equal(false)
 
     const readyElement = wrapper.find('.parent.ready')
-    expect(readyElement.visible()).to.equal(true)
+    expect(readyElement.isVisible()).to.equal(true)
   })
 
   it('returns false if element has v-show true', () => {
@@ -43,10 +43,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(false)
+    expect(notReadyElement.isVisible()).to.equal(false)
 
     const readyElement = wrapper.find('.parent.ready')
-    expect(readyElement.visible()).to.equal(true)
+    expect(readyElement.isVisible()).to.equal(true)
   })
 
   it('returns true if parent element has v-show true', () => {
@@ -55,10 +55,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(false)
+    expect(notReadyElement.isVisible()).to.equal(false)
 
     const readyChildElement = wrapper.find('.child.ready')
-    expect(readyChildElement.visible()).to.equal(true)
+    expect(readyChildElement.isVisible()).to.equal(true)
   })
 
   it('returns false if parent element has v-show false', () => {
@@ -67,10 +67,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(false)
+    expect(notReadyElement.isVisible()).to.equal(false)
 
     const readyChildElement = wrapper.find('.child.ready')
-    expect(readyChildElement.visible()).to.equal(true)
+    expect(readyChildElement.isVisible()).to.equal(true)
   })
 
   it('returns false if root element has v-show false and parent has v-show true', () => {
@@ -80,10 +80,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(false)
+    expect(notReadyElement.isVisible()).to.equal(false)
 
     const readyChildElement = wrapper.find('.child.ready')
-    expect(readyChildElement.visible()).to.equal(false)
+    expect(readyChildElement.isVisible()).to.equal(false)
   })
 
   it('returns false if root element has v-show true and parent has v-show false', () => {
@@ -93,10 +93,10 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const notReadyElement = wrapper.find('.not-ready')
-    expect(notReadyElement.visible()).to.equal(true)
+    expect(notReadyElement.isVisible()).to.equal(true)
 
     const readyChildElement = wrapper.find('.child.ready')
-    expect(readyChildElement.visible()).to.equal(false)
+    expect(readyChildElement.isVisible()).to.equal(false)
   })
 
   it('returns true if all elements are visible', () => {
@@ -106,7 +106,7 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const readyChildElement = wrapper.find('.ready')
-    expect(readyChildElement.visible()).to.equal(true)
+    expect(readyChildElement.isVisible()).to.equal(true)
   })
 
   it('returns false if one element is not visible', () => {
@@ -116,22 +116,22 @@ describeWithShallowAndMount('visible', (mountingMethod) => {
     wrapper.update()
 
     const readyChildElement = wrapper.find('.ready, .not-ready')
-    expect(readyChildElement.visible()).to.equal(false)
+    expect(readyChildElement.isVisible()).to.equal(false)
   })
 
   it('fails if one element is absent', () => {
     const wrapper = mountingMethod(ComponentWithVIf)
     wrapper.vm.$set(wrapper.vm, 'ready', false)
     wrapper.update()
 
-    const fn = () => wrapper.find('.child.ready').visible()
+    const fn = () => wrapper.find('.child.ready').isVisible()
     expect(fn).to.throw()
   })
 
   it('returns true if one element is present', () => {
     const wrapper = mountingMethod(ComponentWithVIf)
     wrapper.vm.$set(wrapper.vm, 'ready', true)
     wrapper.update()
-    expect(wrapper.find('.child.ready').visible()).to.equal(true)
+    expect(wrapper.find('.child.ready').isVisible()).to.equal(true)
   })
 })