feat(filter): Add filter feature on Selector functions and WrapperArray

Author: Toilal

flow/wrapper.flow.js

@@ -4,21 +4,22 @@ import type Wrapper from '~src/Wrapper'
 import type WrapperArray from '~src/WrapperArray'
 
 declare type Selector = any
+declare type WrapperPredicate = (wrapper: Wrapper, index?: number, array?: Array<Wrapper>) => boolean;
 
 declare interface BaseWrapper { // eslint-disable-line no-undef
     at(index: number): Wrapper | void,
     attributes(): { [name: string]: string } | void,
     classes(): Array<string> | void,
-    contains(selector: Selector): boolean | void,
+    contains(selector: Selector, filter?: WrapperPredicate): boolean | void,
     emitted(event?: string): { [name: string]: Array<Array<any>> } | Array<Array<any>> | void,
     emittedByOrder(): Array<{ name: string; args: Array<any> }> | void,
     exists(): boolean,
     hasAttribute(attribute: string, value: string): boolean | void,
     hasClass(className: string): boolean | void,
     hasProp(prop: string, value: string): boolean | void,
     hasStyle(style: string, value: string): boolean | void,
-    find(selector: Selector): Wrapper | void,
-    findAll(selector: Selector): WrapperArray | void,
+    find(selector: Selector, filter?: WrapperPredicate): Wrapper | void,
+    findAll(selector: Selector, filter?: WrapperPredicate): WrapperArray | void,
     html(): string | void,
     is(selector: Selector): boolean | void,
     isEmpty(): 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/wrapper-array.js

@@ -20,6 +20,10 @@ export default class WrapperArray implements BaseWrapper {
     return this.wrappers[index]
   }
 
+  filter (predicate: WrapperPredicate) {
+    return new WrapperArray(this.wrappers.filter(predicate))
+  }
+
   attributes (): void {
     this.throwErrorIfWrappersIsEmpty('attributes')
 

src/wrappers/wrapper.js

@@ -80,11 +80,17 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Checks if wrapper contains provided selector.
    */
-  contains (selector: Selector) {
+  contains (selector: Selector, predicate?: WrapperPredicate) {
     const selectorType = getSelectorTypeOrThrow(selector, 'contains')
     const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    let wrappers = nodes.map(node =>
+      createWrapper(node, this.update, this.options)
+    )
+    if (predicate) {
+      wrappers = wrappers.filter(predicate)
+    }
     const is = selectorType === REF_SELECTOR ? false : this.is(selector)
-    return nodes.length > 0 || is
+    return wrappers.length > 0 || is
   }
 
   /**
@@ -220,27 +226,35 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Finds first node in tree of the current wrapper that matches the provided selector.
    */
-  find (selector: Selector): Wrapper | ErrorWrapper | VueWrapper {
+  find (selector: Selector, predicate?: WrapperPredicate): Wrapper | ErrorWrapper | VueWrapper {
     const selectorType = getSelectorTypeOrThrow(selector, 'find')
-    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
-    if (nodes.length === 0) {
+    let wrappers = findAll(this.vm, this.vnode, selectorType, selector).map(node =>
+      createWrapper(node, this.update, this.options)
+    )
+    if (predicate) {
+      wrappers = wrappers.filter(predicate)
+    }
+    if (wrappers.length === 0) {
       if (selector.ref) {
         return new ErrorWrapper(`ref="${selector.ref}"`)
       }
       return new ErrorWrapper(typeof selector === 'string' ? selector : 'Component')
     }
-    return createWrapper(nodes[0], this.update, this.options)
+    return wrappers[0]
   }
 
   /**
    * Finds node in tree of the current wrapper that matches the provided selector.
    */
-  findAll (selector: Selector): WrapperArray {
+  findAll (selector: Selector, predicate?: WrapperPredicate): WrapperArray {
     const selectorType = getSelectorTypeOrThrow(selector, 'findAll')
     const nodes = findAll(this.vm, this.vnode, selectorType, selector)
-    const wrappers = nodes.map(node =>
+    let wrappers = nodes.map(node =>
       createWrapper(node, this.update, this.options)
     )
+    if (predicate) {
+      wrappers = wrappers.filter(predicate)
+    }
     return new WrapperArray(wrappers)
   }
 

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

@@ -14,6 +14,12 @@ describe('contains', () => {
     expect(wrapper.contains('input')).to.equal(true)
   })
 
+  it('returns false if wrapper contains element filtered by predicate', () => {
+    const compiled = compileToFunctions('<div><input class="filtered" /></div>')
+    const wrapper = mount(compiled)
+    expect(wrapper.contains('input', w => !w.hasClass('filtered'))).to.equal(false)
+  })
+
   it('returns true if wrapper contains Vue component', () => {
     const wrapper = mount(ComponentWithChild)
     expect(wrapper.contains(Component)).to.equal(true)

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

@@ -23,6 +23,12 @@ describe('find', () => {
     expect(wrapper.find('.foo').vnode).to.be.an('object')
   })
 
+  it('returns first Wrapper matching class selector and filter predicate passed', () => {
+    const compiled = compileToFunctions('<div><div class="foo fooFilter">filtered</div><div class="foo">not filtered</div></div>')
+    const wrapper = mount(compiled)
+    expect(wrapper.find('.foo', w => !w.hasClass('fooFilter')).text()).to.be.equals('not filtered')
+  })
+
   it('returns Wrapper matching class selector passed if nested in a transition', () => {
     const compiled = compileToFunctions('<transition><div /></transition>')
     const wrapper = mount(compiled)

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

@@ -25,6 +25,14 @@ describe('findAll', () => {
     expect(fooArr.length).to.equal(1)
   })
 
+  it('returns an array of Wrapper of elements matching class selector passed and filter predicate', () => {
+    const compiled = compileToFunctions('<div><div class="foo fooFiltered">filtered</div><div class="foo">not filtered</div></div>')
+    const wrapper = mount(compiled)
+    const fooArr = wrapper.findAll('.foo', (wrapper) => !wrapper.hasClass('fooFiltered'))
+    expect(fooArr.length).to.equal(1)
+    expect(fooArr.at(0).text()).to.equal('not filtered')
+  })
+
   it('returns an array of Wrapper of elements matching class selector passed if they are nested in a transition', () => {
     const compiled = compileToFunctions('<transition><div /></transition>')
     const wrapper = mount(compiled)

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

@@ -16,6 +16,11 @@ type VueClass<V extends Vue> = (new (...args: any[]) => V) & typeof Vue
  */
 type Selector = string | Component
 
+/**
+ * Utility type for wrapper predicate
+ */
+declare type WrapperPredicate<V extends Vue> = (wrapper: Wrapper<V>, index?: number, array?: Array<Wrapper<V>>) => boolean;
+
 /**
  * Utility type for slots
  */
@@ -43,7 +48,7 @@ type RefSelector = {
  * It has common methods on both Wrapper and WrapperArray
  */
 interface BaseWrapper {
-  contains (selector: Selector): boolean
+  contains (selector: Selector, predicate?: WrapperPredicate<Vue>): boolean
   exists (): boolean
 
   attributes(): { [name: string]: string } | void
@@ -73,17 +78,17 @@ interface Wrapper<V extends Vue> extends BaseWrapper {
   readonly element: HTMLElement
   readonly options: WrapperOptions
 
-  find<R extends Vue> (selector: VueClass<R>): Wrapper<R>
-  find<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
-  find (selector: FunctionalComponentOptions): Wrapper<Vue>
-  find (selector: string): Wrapper<Vue>
-  find (selector: RefSelector): Wrapper<Vue>
+  find<R extends Vue> (selector: VueClass<R>, predicate?: WrapperPredicate<R>): Wrapper<R>
+  find<R extends Vue> (selector: ComponentOptions<R>, predicate?: WrapperPredicate<R>): Wrapper<R>
+  find (selector: FunctionalComponentOptions, predicate?: WrapperPredicate<Vue>): Wrapper<Vue>
+  find (selector: string, predicate?: WrapperPredicate<Vue>): Wrapper<Vue>
+  find (selector: RefSelector, predicate?: WrapperPredicate<Vue>): Wrapper<Vue>
 
-  findAll<R extends Vue> (selector: VueClass<R>): WrapperArray<R>
-  findAll<R extends Vue> (selector: ComponentOptions<R>): WrapperArray<R>
-  findAll (selector: FunctionalComponentOptions): WrapperArray<Vue>
-  findAll (selector: string): WrapperArray<Vue>
-  findAll (selector: RefSelector): WrapperArray<Vue>
+  findAll<R extends Vue> (selector: VueClass<R>, predicate?: WrapperPredicate<R>): WrapperArray<R>
+  findAll<R extends Vue> (selector: ComponentOptions<R>, predicate?: WrapperPredicate<R>): WrapperArray<R>
+  findAll (selector: FunctionalComponentOptions, predicate?: WrapperPredicate<Vue>): WrapperArray<Vue>
+  findAll (selector: string, predicate?: WrapperPredicate<Vue>): WrapperArray<Vue>
+  findAll (selector: RefSelector, predicate?: WrapperPredicate<Vue>): WrapperArray<Vue>
 
   html (): string
   text (): string
@@ -98,6 +103,7 @@ interface WrapperArray<V extends Vue> extends BaseWrapper {
   readonly wrappers: Array<Wrapper<V>>
 
   at (index: number): Wrapper<V>
+  filter (predicate: WrapperPredicate<V>): WrapperArray<V>
 }
 
 interface WrapperOptions {