add ref search to is/contains

Author: matt-oconnell

flow/wrapper.flow.js

@@ -3,7 +3,13 @@
 import type Wrapper from '~src/Wrapper'
 import type WrapperArray from '~src/WrapperArray'
 
-declare type Selector = string | Component
+// declare type FindOptions = {
+//     ref: string,
+// }
+
+// declare type Selector = string | Component | FindOptions
+// Component is not getting imported
+declare type Selector = any
 
 declare interface BaseWrapper { // eslint-disable-line no-undef
     at(index: number): Wrapper | void,
@@ -15,8 +21,8 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
     hasClass(className: string): boolean | void,
     hasProp(prop: string, value: string): boolean | void,
     hasStyle(style: string, value: string): boolean | void,
-    find(selector: Selector | FindOptions): Wrapper | void,
-    findAll(selector: Selector | FindOptions): WrapperArray | void,
+    find(selector: Selector): Wrapper | void,
+    findAll(selector: Selector): WrapperArray | void,
     html(): string | void,
     is(selector: Selector): boolean | void,
     isEmpty(): boolean | void,
@@ -36,7 +42,3 @@ declare type WrapperOptions = { // eslint-disable-line no-undef
     attachedToDocument: boolean,
     error?: string
 }
-
-declare type FindOptions = { // eslint-disable-line no-undef
-    ref: string,
-}

src/lib/get-selector-type.js

@@ -0,0 +1,32 @@
+// @flow
+
+import { isDomSelector, isVueComponent, isFindOption } from './validators.js'
+import { throwError } from '../lib/util'
+
+export const selectorTypes = {
+  DOM_SELECTOR: 'DOM_SELECTOR',
+  VUE_COMPONENT: 'VUE_COMPONENT',
+  OPTIONS_OBJECT: 'OPTIONS_OBJECT'
+}
+
+function getSelectorType (selector: Selector): string | void {
+  if (isDomSelector(selector)) {
+    return selectorTypes.DOM_SELECTOR
+  }
+
+  if (isVueComponent(selector)) {
+    return selectorTypes.VUE_COMPONENT
+  }
+
+  if (isFindOption(selector)) {
+    return selectorTypes.OPTIONS_OBJECT
+  }
+}
+
+export default function getSelectorTypeOrThrow (selector: Selector, methodName: string): string | void {
+  const selectorType = getSelectorType(selector)
+  if (!selectorType) {
+    throwError(`wrapper.${methodName}() must be passed a valid CSS selector, Vue constructor, or valid find option object`)
+  }
+  return selectorType
+}

src/lib/validators.js

@@ -43,10 +43,14 @@ export function isValidSelector (selector: any): boolean {
     return true
   }
 
-  return isVueComponent(selector)
+  if (isVueComponent(selector)) {
+    return true
+  }
+
+  return isFindOption(selector)
 }
 
-export function isValidFindOption (findOptions: any) {
+export function isFindOption (findOptions: any) {
   if (typeof findOptions !== 'object') {
     return false
   }

src/wrappers/wrapper.js

@@ -1,7 +1,7 @@
 // @flow
 
 import Vue from 'vue'
-import { isValidSelector, isVueComponent, isValidFindOption } from '../lib/validators'
+import getSelectorTypeOrThrow, { selectorTypes } from '../lib/get-selector-type'
 import findVueComponents, { vmCtorMatchesName } from '../lib/find-vue-components'
 import findVNodesBySelector from '../lib/find-vnodes-by-selector'
 import findVNodesByRef from '../lib/find-vnodes-by-ref'
@@ -37,16 +37,19 @@ export default class Wrapper implements BaseWrapper {
    * Checks if wrapper contains provided selector.
    */
   contains (selector: Selector) {
-    if (!isValidSelector(selector)) {
-      throwError('wrapper.contains() must be passed a valid CSS selector or a Vue constructor')
-    }
+    const selectorType = getSelectorTypeOrThrow(selector, 'contains')
 
-    if (typeof selector === 'object') {
+    if (selectorType === selectorTypes.VUE_COMPONENT) {
       const vm = this.vm || this.vnode.context.$root
       return findVueComponents(vm, selector.name).length > 0
     }
 
-    if (typeof selector === 'string' && this.element instanceof HTMLElement) {
+    if (selectorType === selectorTypes.OPTIONS_OBJECT) {
+      const nodes = findVNodesByRef(this.vnode, selector.ref)
+      return nodes.length > 0
+    }
+
+    if (selectorType === selectorTypes.DOM_SELECTOR && this.element instanceof HTMLElement) {
       return this.element.querySelectorAll(selector).length > 0
     }
 
@@ -175,13 +178,10 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Finds first node in tree of the current wrapper that matches the provided selector.
    */
-  find (selector: Selector | FindOptions): Wrapper | ErrorWrapper | VueWrapper {
-    const isValidOptionObject = isValidFindOption(selector)
-    if (!isValidSelector(selector) && !isValidOptionObject) {
-      throwError('wrapper.find() must be passed a valid CSS selector, Vue constructor, or valid find option object')
-    }
+  find (selector: Selector): Wrapper | ErrorWrapper | VueWrapper {
+    const selectorType = getSelectorTypeOrThrow(selector, 'find')
 
-    if (typeof selector === 'object' && isVueComponent(selector)) {
+    if (selectorType === selectorTypes.VUE_COMPONENT) {
       if (!selector.name) {
         throwError('.find() requires component to have a name property')
       }
@@ -193,7 +193,7 @@ export default class Wrapper implements BaseWrapper {
       return new VueWrapper(components[0], this.options)
     }
 
-    if (typeof selector === 'object' && isValidOptionObject) {
+    if (selectorType === selectorTypes.OPTIONS_OBJECT) {
       if (!this.isVueComponent) {
         throwError('$ref selectors can only be used on Vue component wrappers')
       }
@@ -215,12 +215,10 @@ export default class Wrapper implements BaseWrapper {
   /**
    * Finds node in tree of the current wrapper that matches the provided selector.
    */
-  findAll (selector: Selector | FindOptions): WrapperArray {
-    if (!isValidSelector(selector) && !isValidFindOption(selector)) {
-      throwError('wrapper.findAll() must be passed a valid CSS selector, Vue constructor, or valid find option object')
-    }
+  findAll (selector: Selector): WrapperArray {
+    const selectorType = getSelectorTypeOrThrow(selector, 'findAll')
 
-    if (typeof selector === 'object' && isVueComponent(selector)) {
+    if (selectorType === selectorTypes.VUE_COMPONENT) {
       if (!selector.name) {
         throwError('.findAll() requires component to have a name property')
       }
@@ -229,7 +227,7 @@ export default class Wrapper implements BaseWrapper {
       return new WrapperArray(components.map(component => new VueWrapper(component, this.options)))
     }
 
-    if (typeof selector === 'object' && isValidFindOption(selector)) {
+    if (selectorType === selectorTypes.OPTIONS_OBJECT) {
       if (!this.isVueComponent) {
         throwError('$ref selectors can only be used on Vue component wrappers')
       }
@@ -258,20 +256,23 @@ export default class Wrapper implements BaseWrapper {
    * Checks if node matches selector
    */
   is (selector: Selector): boolean {
-    if (!isValidSelector(selector)) {
-      throwError('wrapper.is() must be passed a valid CSS selector or a Vue constructor')
-    }
+    const selectorType = getSelectorTypeOrThrow(selector, 'is')
 
-    if (typeof selector === 'object') {
-      if (!this.isVueComponent) {
-        return false
-      }
+    if (selectorType === selectorTypes.VUE_COMPONENT && this.isVueComponent) {
       if (typeof selector.name !== 'string') {
         throwError('a Component used as a selector must have a name property')
       }
       return vmCtorMatchesName(this.vm, selector.name)
     }
 
+    if (selectorType === selectorTypes.OPTIONS_OBJECT) {
+      throwError('$ref selectors can not be used with wrapper.is()')
+    }
+
+    if (typeof selector === 'object') {
+      return false
+    }
+
     return !!(this.element &&
     this.element.getAttribute &&
     this.element.matches(selector))

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

@@ -15,19 +15,31 @@ describe('contains', () => {
     expect(wrapper.contains(Component)).to.equal(true)
   })
 
+  it('returns true if wrapper contains element specified by ref selector', () => {
+    const compiled = compileToFunctions('<div><input ref="foo" /></div>')
+    const wrapper = mount(compiled)
+    expect(wrapper.contains({ ref: 'foo' })).to.equal(true)
+  })
+
   it('returns false if wrapper does not contain element', () => {
     const compiled = compileToFunctions('<div><input /></div>')
     const wrapper = mount(compiled)
     expect(wrapper.contains('doesntexist')).to.equal(false)
   })
 
+  it('returns false if wrapper does not contain element specified by ref selector', () => {
+    const compiled = compileToFunctions('<div><input ref="bar" /></div>')
+    const wrapper = mount(compiled)
+    expect(wrapper.contains({ ref: 'foo' })).to.equal(false)
+  })
+
   it('throws an error if selector is not a valid selector', () => {
     const wrapper = mount(Component)
     const invalidSelectors = [
-      undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, []
+      undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, { ref: 'foo', nope: true }, []
     ]
     invalidSelectors.forEach((invalidSelector) => {
-      const message = '[vue-test-utils]: wrapper.contains() must be passed a valid CSS selector or a Vue constructor'
+      const message = '[vue-test-utils]: wrapper.contains() must be passed a valid CSS selector, Vue constructor, or valid find option object'
       const fn = () => wrapper.contains(invalidSelector)
       expect(fn).to.throw().with.property('message', message)
     })

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

@@ -63,6 +63,15 @@ describe('is', () => {
     expect(wrapper.is('#p')).to.equal(false)
   })
 
+  it('throws error if ref options object is passed', () => {
+    const compiled = compileToFunctions('<div />')
+    const wrapper = mount(compiled)
+
+    const message = '[vue-test-utils]: $ref selectors can not be used with wrapper.is()'
+    const fn = () => wrapper.is({ ref: 'foo' })
+    expect(fn).to.throw().with.property('message', message)
+  })
+
   it('throws error if component passed to use as identifier does not have a name', () => {
     const compiled = compileToFunctions('<div />')
     const wrapper = mount(compiled)
@@ -76,10 +85,10 @@ describe('is', () => {
     const compiled = compileToFunctions('<div />')
     const wrapper = mount(compiled)
     const invalidSelectors = [
-      undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, []
+      undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, { ref: 'foo', nope: true }, []
     ]
     invalidSelectors.forEach((invalidSelector) => {
-      const message = '[vue-test-utils]: wrapper.is() must be passed a valid CSS selector or a Vue constructor'
+      const message = '[vue-test-utils]: wrapper.is() must be passed a valid CSS selector, Vue constructor, or valid find option object'
       const fn = () => wrapper.is(invalidSelector)
       expect(fn).to.throw().with.property('message', message)
     })

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

@@ -30,7 +30,7 @@ describe('contains', () => {
       undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, []
     ]
     invalidSelectors.forEach((invalidSelector) => {
-      const message = '[vue-test-utils]: wrapper.contains() must be passed a valid CSS selector or a Vue constructor'
+      const message = '[vue-test-utils]: wrapper.contains() must be passed a valid CSS selector, Vue constructor, or valid find option object'
       expect(() => pArr.contains(invalidSelector)).to.throw().with.property('message', message)
     })
   })

test/unit/specs/mount/WrapperArray/is.spec.js

@@ -42,7 +42,7 @@ describe('is', () => {
       undefined, null, NaN, 0, 2, true, false, () => {}, {}, { name: undefined }, []
     ]
     invalidSelectors.forEach((invalidSelector) => {
-      const message = '[vue-test-utils]: wrapper.is() must be passed a valid CSS selector or a Vue constructor'
+      const message = '[vue-test-utils]: wrapper.is() must be passed a valid CSS selector, Vue constructor, or valid find option object'
       const fn = () => wrapper.findAll('div').is(invalidSelector)
       expect(fn).to.throw().with.property('message', message)
     })