feat(visible): Add visible() and parent() methods on Wrapper (#327)

Author: Toilal

flow/wrapper.flow.js

@@ -13,6 +13,8 @@ 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,
+    parent(): Wrapper,
     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

@@ -110,6 +110,14 @@ export default class Wrapper implements BaseWrapper {
     return this._emittedByOrder
   }
 
+  parent (): Wrapper | ErrorWrapper {
+    const parentVNode = this.vnode.parent
+    if (parentVNode) {
+      return createWrapper(parentVNode, this.update, this.options)
+    }
+    return new ErrorWrapper('No parent found')
+  }
+
   /**
    * Utility to check wrapper exists. Returns true as Wrapper always exists
    */
@@ -120,6 +128,24 @@ 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()) {
+      return false
+    }
+
+    let parent = this
+    while (parent.exists()) {
+      if (parent.element.style.visibility === 'hidden' || parent.element.style.display === 'none') {
+        return false
+      }
+      parent = parent.parent
+    }
+    return true
+  }
+
   /**
    * Checks if wrapper has an attribute with matching value
    */

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

@@ -0,0 +1,12 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import { mount } from '~vue-test-utils'
+import { functionalSFCsSupported } from '~resources/test-utils'
+
+describe('parent', () => {
+  it('returns parent element', () => {
+    const compiled = compileToFunctions('<div class="parent"><div class="child"></div></div>')
+    const wrapper = mount(compiled)
+    const child = wrapper.find('.child')
+    expect(child.parent().classes()).to.include('parent')
+  })
+})

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
@@ -73,6 +74,8 @@ interface Wrapper<V extends Vue> extends BaseWrapper {
   readonly element: HTMLElement
   readonly options: WrapperOptions
 
+  parent (): Wrapper<Vue> | null
+
   find<R extends Vue> (selector: VueClass<R>): Wrapper<R>
   find<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
   find (selector: FunctionalComponentOptions): Wrapper<Vue>