feat: add filter method to WrapperArray (#388)

Author: eddyerburgh

docs/en/SUMMARY.md

@@ -53,6 +53,7 @@
     * [contains](api/wrapper-array/contains.md)
     * [exists](api/wrapper/exists.md)
     * [destroy](api/wrapper-array/destroy.md)
+    * [filter](api/wrapper-array/filter.md)
     * [is](api/wrapper-array/is.md)
     * [isEmpty](api/wrapper-array/isEmpty.md)
     * [isVueInstance](api/wrapper-array/isVueInstance.md)

docs/en/api/wrapper-array/filter.md

@@ -0,0 +1,23 @@
+# filter(predicate)
+
+Filter `WrapperArray` with a predicate function on `Wrapper` objects.
+
+Behavior of this method is similar to [Array.prototype.filter](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter)
+
+- **Arguments:**
+  - `{function} predicate`
+
+- **Returns:** `{WrapperArray}`
+
+A new `WrapperArray` instance containing `Wrapper` instances that returns true for the predicate function.
+
+- **Example:**
+
+```js
+import { shallow } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = shallow(Foo)
+const filteredDivArray = wrapper.findAll('div', (w) => !w.hasClass('filtered'))
+```

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,
+    filter(predicate: Function): WrapperArray | void,
     visible(): boolean | void,
     hasAttribute(attribute: string, value: string): boolean | void,
     hasClass(className: string): boolean | void,

src/wrappers/error-wrapper.js

@@ -36,6 +36,10 @@ export default class ErrorWrapper implements BaseWrapper {
     return false
   }
 
+  filter (): void {
+    throwError(`find did not return ${this.selector}, cannot call filter() on empty Wrapper`)
+  }
+
   visible (): void {
     throwError(`find did not return ${this.selector}, cannot call visible() 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())
   }
 
+  filter (predicate: Function): WrapperArray {
+    return new WrapperArray(this.wrappers.filter(predicate))
+  }
+
   visible (): boolean {
     this.throwErrorIfWrappersIsEmpty('visible')
 

src/wrappers/wrapper.js

@@ -125,6 +125,10 @@ export default class Wrapper implements BaseWrapper {
     return true
   }
 
+  filter () {
+    throwError('filter() must be called on a WrapperArray')
+  }
+
   /**
    * Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style.
    */

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

@@ -0,0 +1,12 @@
+import { compileToFunctions } from 'vue-template-compiler'
+import { mount } from '~vue-test-utils'
+
+describe('filter', () => {
+  it('throws an error', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+    const message = '[vue-test-utils]: filter() must be called on a WrapperArray'
+    const fn = () => wrapper.filter()
+    expect(fn).to.throw().with.property('message', message)
+  })
+})

test/unit/specs/wrappers/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', 'html', 'text', 'is', 'isEmpty', 'isVueInstance',
+    'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'filter', 'html', 'text', 'is', 'isEmpty', 'isVueInstance',
     'name', 'props', 'setComputed', 'setMethods', 'setData', 'setProps', 'trigger', 'update', 'destroy']
   methods.forEach((method) => {
     it(`${method} throws error when called`, () => {

test/unit/specs/wrappers/wrapper-array.spec.js

@@ -14,7 +14,7 @@ describe('WrapperArray', () => {
     return wrapperArray
   }
 
-  it('returns class with length equal to lenght of wrappers passed in constructor', () => {
+  it('returns class with length equal to length of wrappers passed in constructor', () => {
     const wrapperArray = getWrapperArray()
     expect(wrapperArray.length).to.equal(3)
   })
@@ -24,6 +24,13 @@ describe('WrapperArray', () => {
     expect(wrapperArray.at(0).text()).to.equal('1')
   })
 
+  it('returns filtered wrapper when filter is called', () => {
+    const wrapperArray = getWrapperArray()
+    expect(wrapperArray.filter(w => {
+      return w.text() !== '2'
+    }).length).to.equal(2)
+  })
+
   const methods = ['at', 'attributes', 'classes', 'contains', 'emitted', 'emittedByOrder', 'hasAttribute',
     'hasClass', 'hasProp', 'hasStyle', 'find', 'findAll', 'html', 'text', 'is', 'isEmpty', 'isVueInstance',
     'name', 'props', 'setComputed', 'setMethods', 'setData', 'setProps', 'trigger', 'update', 'destroy']

types/index.d.ts

@@ -99,6 +99,7 @@ interface WrapperArray<V extends Vue> extends BaseWrapper {
   readonly wrappers: Array<Wrapper<V>>
 
   at (index: number): Wrapper<V>
+  filter (predicate: Function): WrapperArray<Vue>
 }
 
 interface WrapperOptions {

types/test/wrapper.ts

@@ -67,3 +67,4 @@ str = wrapper.name()
  */
 let num: number = array.length
 found = array.at(1)
+array = array.filter((a: any) => a === true)