fix: add isVisible typos and missing tests (#464)

Author: Diego Jara

flow/wrapper.flow.js

@@ -24,6 +24,7 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     html(): string | void,
     is(selector: Selector): boolean | void,
     isEmpty(): boolean | void,
+    isVisible(): boolean | void,
     isVueInstance(): boolean | void,
     name(): string | void,
     props(): { [name: string]: any } | void,

packages/test-utils/src/error-wrapper.js

@@ -81,6 +81,10 @@ export default class ErrorWrapper implements BaseWrapper {
     throwError(`find did not return ${this.selector}, cannot call isEmpty() on empty Wrapper`)
   }
 
+  isVisible (): void {
+    throwError(`find did not return ${this.selector}, cannot call isVisible() on empty Wrapper`)
+  }
+
   isVueInstance (): void {
     throwError(`find did not return ${this.selector}, cannot call isVueInstance() on empty Wrapper`)
   }

packages/test-utils/src/wrapper-array.js

@@ -118,6 +118,12 @@ export default class WrapperArray implements BaseWrapper {
     return this.wrappers.every(wrapper => wrapper.isEmpty())
   }
 
+  isVisible (): boolean {
+    this.throwErrorIfWrappersIsEmpty('isVisible')
+
+    return this.wrappers.every(wrapper => wrapper.isVisible())
+  }
+
   isVueInstance (): boolean {
     this.throwErrorIfWrappersIsEmpty('isVueInstance')
 

test/specs/error-wrapper.spec.js

@@ -3,7 +3,7 @@ import { compileToFunctions } from 'vue-template-compiler'
 
 describe('ErrorWrapper', () => {
   const methods = ['at', 'attributes', 'classes', 'contains', 'emitted', 'emittedByOrder', 'hasAttribute',
-    'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'filter', 'html', 'text', 'is', 'isEmpty', 'isVueInstance',
+    'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'filter', 'html', 'text', 'is', 'isEmpty', 'isVisible', 'isVueInstance',
     'name', 'props', 'setComputed', 'setMethods', 'setData', 'setProps', 'trigger', 'update', 'destroy']
   methods.forEach((method) => {
     it(`${method} throws error when called`, () => {

test/specs/wrapper-array.spec.js

@@ -32,7 +32,7 @@ describe('WrapperArray', () => {
   })
 
   const methods = ['at', 'attributes', 'classes', 'contains', 'emitted', 'emittedByOrder', 'hasAttribute',
-    'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'html', 'text', 'is', 'isEmpty', 'isVueInstance',
+    'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'html', 'text', 'is', 'isEmpty', 'isVisible', 'isVueInstance',
     'name', 'props', 'setComputed', 'setMethods', 'setData', 'setProps', 'trigger', 'update', 'destroy']
   methods.forEach((method) => {
     it(`throws error if ${method} is called when there are no items in wrapper array`, () => {
@@ -46,7 +46,7 @@ describe('WrapperArray', () => {
     })
 
     it(`${method} throws error if called when there are items in wrapper array`, () => {
-      if (['at', 'contains', 'hasAttribute', 'hasClass', 'hasProp', 'hasStyle', 'is', 'isEmpty', 'isVueInstance',
+      if (['at', 'contains', 'hasAttribute', 'hasClass', 'hasProp', 'hasStyle', 'is', 'isEmpty', 'isVisible', 'isVueInstance',
         'setComputed', 'setMethods', 'setData', 'setProps', 'trigger', 'update', 'destroy'].includes(method)) {
         return
       }
@@ -176,6 +176,16 @@ describe('WrapperArray', () => {
     expect(wrapperArray.isEmpty()).to.equal(false)
   })
 
+  it('isVisible returns true if every wrapper.isVisible() returns true', () => {
+    const wrapperArray = getWrapperArray([{ isVisible: () => true }, { isVisible: () => true }])
+    expect(wrapperArray.isVisible()).to.equal(true)
+  })
+
+  it('isVisible returns false if not every wrapper.isVisible() returns true', () => {
+    const wrapperArray = getWrapperArray([{ isVisible: () => true }, { isVisible: () => false }])
+    expect(wrapperArray.isVisible()).to.equal(false)
+  })
+
   it('isVueInstance returns true if every wrapper.isVueInstance() returns true', () => {
     const wrapperArray = getWrapperArray([{ isVueInstance: () => true }, { isVueInstance: () => true }])
     expect(wrapperArray.isVueInstance()).to.equal(true)

test/specs/wrapper-array/isVisible.spec.js

@@ -0,0 +1,32 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import { mount } from '~vue/test-utils'
+
+describe('isVisible', () => {
+  it('returns true if node has no inline style', () => {
+    const compiled = compileToFunctions('<div><p /></div>')
+    const wrapper = mount(compiled)
+
+    expect(wrapper.findAll('p').isVisible()).to.equal(true)
+  })
+
+  it('returns false if node has inline style display: none', () => {
+    const compiled = compileToFunctions('<div><p style="display: none;"><p/></div>')
+    const wrapper = mount(compiled)
+
+    expect(wrapper.findAll('p').isVisible()).to.equal(false)
+  })
+
+  it('returns false if node has visibility: hidden', () => {
+    const compiled = compileToFunctions('<div><p style="visibility: hidden;"><p/></div>')
+    const wrapper = mount(compiled)
+
+    expect(wrapper.findAll('p').isVisible()).to.equal(false)
+  })
+
+  it('throws error if wrapper array contains no items', () => {
+    const compiled = compileToFunctions('<div />')
+    const message = '[vue-test-utils]: isVisible cannot be called on 0 items'
+    const fn = () => mount(compiled).findAll('p').isVisible('p')
+    expect(fn).to.throw().with.property('message', message)
+  })
+})