refactor: extract find logic to find module

Author: eddyerburgh

src/lib/find-vnodes-by-ref.js

@@ -0,0 +1,82 @@
+// @flow
+
+import {
+  REF_SELECTOR
+} from './consts'
+import {
+  throwError
+} from './util'
+
+function findAllVNodes (vnode: VNode, nodes: Array<VNode> = []): Array<VNode> {
+  nodes.push(vnode)
+
+  if (Array.isArray(vnode.children)) {
+    vnode.children.forEach((childVNode) => {
+      findAllVNodes(childVNode, nodes)
+    })
+  }
+
+  if (vnode.child) {
+    findAllVNodes(vnode.child._vnode, nodes)
+  }
+
+  return nodes
+}
+
+function removeDuplicateNodes (vNodes: Array<VNode>): Array<VNode> {
+  const uniqueNodes = []
+  vNodes.forEach((vNode) => {
+    const exists = uniqueNodes.some(node => vNode.elm === node.elm)
+    if (!exists) {
+      uniqueNodes.push(vNode)
+    }
+  })
+  return uniqueNodes
+}
+
+function nodeMatchesRef (node: VNode, refName: string): boolean {
+  return node.data && node.data.ref === refName
+}
+
+function findVNodesByRef (vNode: VNode, refName: string): Array<VNode> {
+  const nodes = findAllVNodes(vNode)
+  const refFilteredNodes = nodes.filter(node => nodeMatchesRef(node, refName))
+  // Only return refs defined on top-level VNode to provide the same
+  // behavior as selecting via vm.$ref.{someRefName}
+  const mainVNodeFilteredNodes = refFilteredNodes.filter(node => (
+    !!vNode.context.$refs[node.data.ref]
+  ))
+  return removeDuplicateNodes(mainVNodeFilteredNodes)
+}
+
+function nodeMatchesSelector (node: VNode, selector: string): boolean {
+  return node.elm && node.elm.getAttribute && node.elm.matches(selector)
+}
+
+function findVNodesBySelector (
+  vNode: VNode,
+  selector: string
+): Array<VNode> {
+  const nodes = findAllVNodes(vNode)
+  const filteredNodes = nodes.filter(node => (
+    nodeMatchesSelector(node, selector)
+  ))
+  return removeDuplicateNodes(filteredNodes)
+}
+
+export default function findVnodes (
+  vnode: VNode,
+  vm: Component | null,
+  selectorType: ?string,
+  selector: Object | string
+): Array<VNode> {
+  if (selectorType === REF_SELECTOR) {
+    if (!vm) {
+      throwError('$ref selectors can only be used on Vue component wrappers')
+    }
+    // $FlowIgnore
+    return findVNodesByRef(vnode, selector.ref)
+  }
+  // $FlowIgnore
+  return findVNodesBySelector(vnode, selector)
+}

src/lib/find-vnodes-by-selector.js

@@ -3,7 +3,10 @@ import {
   COMPONENT_SELECTOR
 } from './consts'
 
-function findAllVueComponentsFromVm (vm: Component, components: Array<Component> = []): Array<Component> {
+function findAllVueComponentsFromVm (
+  vm: Component,
+  components: Array<Component> = []
+): Array<Component> {
   components.push(vm)
   vm.$children.forEach((child) => {
     findAllVueComponentsFromVm(child, components)
@@ -12,7 +15,10 @@ function findAllVueComponentsFromVm (vm: Component, components: Array<Component>
   return components
 }
 
-function findAllVueComponentsFromVnode (vnode: Component, components: Array<Component> = []): Array<Component> {
+function findAllVueComponentsFromVnode (
+  vnode: Component,
+  components: Array<Component> = []
+): Array<Component> {
   if (vnode.child) {
     components.push(vnode.child)
   }
@@ -26,8 +32,10 @@ function findAllVueComponentsFromVnode (vnode: Component, components: Array<Comp
 }
 
 export function vmCtorMatchesName (vm: Component, name: string): boolean {
-  return (vm.$vnode && vm.$vnode.componentOptions && vm.$vnode.componentOptions.Ctor.options.name === name) ||
-        (vm._vnode && vm._vnode.functionalOptions && vm._vnode.functionalOptions.name === name) ||
+  return (vm.$vnode && vm.$vnode.componentOptions &&
+    vm.$vnode.componentOptions.Ctor.options.name === name) ||
+    (vm._vnode && vm._vnode.functionalOptions &&
+      vm._vnode.functionalOptions.name === name) ||
         vm.$options && vm.$options.name === name
 }
 
@@ -36,8 +44,14 @@ export function vmCtorMatchesSelector (component: Component, Ctor: Object) {
   return Ctors.some(c => Ctor[c] === component.__proto__.constructor)
 }
 
-export default function findVueComponents (root: Component, selectorType: string, selector: Object): Array<Component> {
-  const components = root._isVue ? findAllVueComponentsFromVm(root) : findAllVueComponentsFromVnode(root)
+export default function findVueComponents (
+  root: Component,
+  selectorType: ?string,
+  selector: Object
+): Array<Component> {
+  const components = root._isVue
+    ? findAllVueComponentsFromVm(root)
+    : findAllVueComponentsFromVnode(root)
   return components.filter((component) => {
     if (!component.$vnode && !component.$options.extends) {
       return false

src/lib/find-vnodes.js

@@ -0,0 +1,27 @@
+// @flow
+
+import findVnodes from './find-vnodes'
+import findVueComponents from './find-vue-components'
+import {
+  COMPONENT_SELECTOR,
+  NAME_SELECTOR
+} from './consts'
+import Vue from 'vue'
+
+export default function find (
+  vm: Component | null,
+  vnode: VNode,
+  selectorType: ?string,
+  selector: Selector
+): Array<VNode | Component> {
+  if (selectorType === COMPONENT_SELECTOR || selectorType === NAME_SELECTOR) {
+    const root = vm || vnode
+    return findVueComponents(root, selectorType, selector)
+  }
+
+  if (vm && vm.$refs && selector.ref in vm.$refs && vm.$refs[selector.ref] instanceof Vue) {
+    return [vm.$refs[selector.ref]]
+  }
+
+  return findVnodes(vnode, vm, selectorType, selector)
+}

src/lib/find-vue-components.js

@@ -5,16 +5,17 @@ import getSelectorTypeOrThrow from '../lib/get-selector-type'
 import {
   REF_SELECTOR,
   COMPONENT_SELECTOR,
-  NAME_SELECTOR,
-  DOM_SELECTOR
+  NAME_SELECTOR
 } from '../lib/consts'
-import findVueComponents, { vmCtorMatchesName, vmCtorMatchesSelector } from '../lib/find-vue-components'
-import findVNodesBySelector from '../lib/find-vnodes-by-selector'
-import findVNodesByRef from '../lib/find-vnodes-by-ref'
+import {
+  vmCtorMatchesName,
+  vmCtorMatchesSelector
+} from '../lib/find-vue-components'
 import VueWrapper from './vue-wrapper'
 import WrapperArray from './wrapper-array'
 import ErrorWrapper from './error-wrapper'
 import { throwError, warn } from '../lib/util'
+import findAll from '../lib/find'
 
 export default class Wrapper implements BaseWrapper {
   vnode: VNode;
@@ -78,25 +79,9 @@ export default class Wrapper implements BaseWrapper {
    */
   contains (selector: Selector) {
     const selectorType = getSelectorTypeOrThrow(selector, 'contains')
-
-    if (selectorType === NAME_SELECTOR || selectorType === COMPONENT_SELECTOR) {
-      const vm = this.vm || this.vnode.context.$root
-      return findVueComponents(vm, selector, selector).length > 0 || this.is(selector)
-    }
-
-    if (selectorType === REF_SELECTOR) {
-      if (!this.vm) {
-        throwError('$ref selectors can only be used on Vue component wrappers')
-      }
-      const nodes = findVNodesByRef(this.vnode, selector.ref)
-      return nodes.length > 0
-    }
-
-    if (selectorType === DOM_SELECTOR && this.element instanceof HTMLElement) {
-      return this.element.querySelectorAll(selector).length > 0 || this.is(selector)
-    }
-
-    return false
+    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    const is = selectorType === REF_SELECTOR ? false : this.is(selector)
+    return nodes.length > 0 || is
   }
 
   /**
@@ -234,73 +219,29 @@ export default class Wrapper implements BaseWrapper {
    */
   find (selector: Selector): Wrapper | ErrorWrapper | VueWrapper {
     const selectorType = getSelectorTypeOrThrow(selector, 'find')
-
-    if (selectorType === COMPONENT_SELECTOR ||
-      selectorType === NAME_SELECTOR) {
-      const root = this.vm || this.vnode
-      // $FlowIgnore warning about selectorType being undefined
-      const components = findVueComponents(root, selectorType, selector)
-      if (components.length === 0) {
-        return new ErrorWrapper('Component')
-      }
-      return new VueWrapper(components[0], this.options)
-    }
-
-    if (selectorType === REF_SELECTOR) {
-      if (!this.vm) {
-        throwError('$ref selectors can only be used on Vue component wrappers')
-      }
-      if (this.vm && this.vm.$refs && selector.ref in this.vm.$refs && this.vm.$refs[selector.ref] instanceof Vue) {
-        return new VueWrapper(this.vm.$refs[selector.ref], this.options)
-      }
-      const nodes = findVNodesByRef(this.vnode, selector.ref)
-      if (nodes.length === 0) {
+    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    if (nodes.length === 0) {
+      if (selector.ref) {
         return new ErrorWrapper(`ref="${selector.ref}"`)
       }
-      return new Wrapper(nodes[0], this.update, this.options)
+      return new ErrorWrapper(typeof selector === 'string' ? selector : 'Component')
     }
-
-    const nodes = findVNodesBySelector(this.vnode, selector)
-
-    if (nodes.length === 0) {
-      return new ErrorWrapper(selector)
-    }
-    return new Wrapper(nodes[0], this.update, this.options)
+    return nodes[0] instanceof Vue
+    ? new VueWrapper(nodes[0], this.options)
+    : new Wrapper(nodes[0], this.update, this.options)
   }
 
   /**
    * Finds node in tree of the current wrapper that matches the provided selector.
    */
   findAll (selector: Selector): WrapperArray {
     const selectorType = getSelectorTypeOrThrow(selector, 'findAll')
+    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    const wrappers = nodes[0] && nodes[0] instanceof Vue
+    ? nodes.map(node => new VueWrapper(node, this.options))
+    : nodes.map(node => new Wrapper(node, this.update, this.options))
 
-    if (selectorType === COMPONENT_SELECTOR ||
-      selectorType === NAME_SELECTOR) {
-      const root = this.vm || this.vnode
-      // $FlowIgnore warning about selectorType being undefined
-      const components = findVueComponents(root, selectorType, selector)
-      return new WrapperArray(components.map(component => new VueWrapper(component, this.options)))
-    }
-
-    if (selectorType === REF_SELECTOR) {
-      if (!this.vm) {
-        throwError('$ref selectors can only be used on Vue component wrappers')
-      }
-      if (this.vm && this.vm.$refs && selector.ref in this.vm.$refs && this.vm.$refs[selector.ref] instanceof Vue) {
-        return new WrapperArray([new VueWrapper(this.vm.$refs[selector.ref], this.options)])
-      }
-      const nodes = findVNodesByRef(this.vnode, selector.ref)
-      return new WrapperArray(nodes.map(node => new Wrapper(node, this.update, this.options)))
-    }
-
-    function nodeMatchesSelector (node, selector) {
-      return node.elm && node.elm.getAttribute && node.elm.matches(selector)
-    }
-
-    const nodes = findVNodesBySelector(this.vnode, selector)
-    const matchingNodes = nodes.filter(node => nodeMatchesSelector(node, selector))
-
-    return new WrapperArray(matchingNodes.map(node => new Wrapper(node, this.update, this.options)))
+    return new WrapperArray(wrappers)
   }
 
   /**