fix: add support for DOM nodes outside of VDOM

fixes #361

Author: eddyerburgh

src/lib/find-dom-nodes.js

@@ -0,0 +1,17 @@
+// @flow
+
+export default function findVnodes (
+  element: Element | null,
+  selector: string
+): Array<VNode> {
+  const nodes = []
+  if (!element || !element.querySelectorAll || !element.matches) {
+    return nodes
+  }
+
+  if (element.matches(selector)) {
+    nodes.push(element)
+  }
+  // $FlowIgnore
+  return nodes.concat([].slice.call(element.querySelectorAll(selector)))
+}

src/lib/find.js

@@ -2,26 +2,47 @@
 
 import findVnodes from './find-vnodes'
 import findVueComponents from './find-vue-components'
+import findDOMNodes from './find-dom-nodes'
 import {
   COMPONENT_SELECTOR,
-  NAME_SELECTOR
+  NAME_SELECTOR,
+  DOM_SELECTOR
 } from './consts'
 import Vue from 'vue'
+import getSelectorTypeOrThrow from './get-selector-type'
+import { throwError } from './util'
 
 export default function find (
   vm: Component | null,
-  vnode: VNode,
-  selectorType: ?string,
+  vnode: VNode | null,
+  element: Element,
   selector: Selector
 ): Array<VNode | Component> {
+  const selectorType = getSelectorTypeOrThrow(selector, 'find')
+
+  if (!vnode && !vm && selectorType !== DOM_SELECTOR) {
+    throwError('cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?')
+  }
+
   if (selectorType === COMPONENT_SELECTOR || selectorType === NAME_SELECTOR) {
     const root = vm || vnode
+    if (!root) {
+      return []
+    }
     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)
+  if (vnode) {
+    const nodes = findVnodes(vnode, vm, selectorType, selector)
+    if (selectorType !== DOM_SELECTOR) {
+      return nodes
+    }
+    return nodes.length > 0 ? nodes : findDOMNodes(element, selector)
+  }
+
+  return findDOMNodes(element, selector)
 }

src/wrappers/wrapper.js

@@ -20,19 +20,24 @@ import findAll from '../lib/find'
 import createWrapper from './create-wrapper'
 
 export default class Wrapper implements BaseWrapper {
-  vnode: VNode;
+  vnode: VNode | null;
   vm: Component | null;
   _emitted: { [name: string]: Array<Array<any>> };
   _emittedByOrder: Array<{ name: string; args: Array<any> }>;
   isVueComponent: boolean;
-  element: HTMLElement;
+  element: Element;
   update: Function;
   options: WrapperOptions;
   version: number
 
-  constructor (vnode: VNode, update: Function, options: WrapperOptions) {
-    this.vnode = vnode
-    this.element = vnode.elm
+  constructor (node: VNode | Element, update: Function, options: WrapperOptions) {
+    if (node instanceof Element) {
+      this.element = node
+      this.vnode = null
+    } else {
+      this.vnode = node
+      this.element = node.elm
+    }
     this.update = update
     this.options = options
     this.version = Number(`${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`)
@@ -82,7 +87,7 @@ export default class Wrapper implements BaseWrapper {
    */
   contains (selector: Selector) {
     const selectorType = getSelectorTypeOrThrow(selector, 'contains')
-    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    const nodes = findAll(this.vm, this.vnode, this.element, selector)
     const is = selectorType === REF_SELECTOR ? false : this.is(selector)
     return nodes.length > 0 || is
   }
@@ -222,14 +227,15 @@ export default class Wrapper implements BaseWrapper {
     const body = document.querySelector('body')
     const mockElement = document.createElement('div')
 
-    if (!(body instanceof HTMLElement)) {
+    if (!(body instanceof Element)) {
       return false
     }
     const mockNode = body.insertBefore(mockElement, null)
     // $FlowIgnore : Flow thinks style[style] returns a number
     mockElement.style[style] = value
 
-    if (!this.options.attachedToDocument) {
+    if (!this.options.attachedToDocument && (this.vm || this.vnode)) {
+      // $FlowIgnore : Possible null value, will be removed in 1.0.0
       const vm = this.vm || this.vnode.context.$root
       body.insertBefore(vm.$root._vnode.elm, null)
     }
@@ -243,8 +249,7 @@ 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 {
-    const selectorType = getSelectorTypeOrThrow(selector, 'find')
-    const nodes = findAll(this.vm, this.vnode, selectorType, selector)
+    const nodes = findAll(this.vm, this.vnode, this.element, selector)
     if (nodes.length === 0) {
       if (selector.ref) {
         return new ErrorWrapper(`ref="${selector.ref}"`)
@@ -258,8 +263,8 @@ export default class Wrapper implements BaseWrapper {
    * 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)
+    getSelectorTypeOrThrow(selector, 'findAll')
+    const nodes = findAll(this.vm, this.vnode, this.element, selector)
     const wrappers = nodes.map(node =>
       createWrapper(node, this.update, this.options)
     )
@@ -313,6 +318,9 @@ export default class Wrapper implements BaseWrapper {
    * Checks if node is empty
    */
   isEmpty (): boolean {
+    if (!this.vnode) {
+      return this.element.innerHTML === ''
+    }
     return this.vnode.children === undefined || this.vnode.children.length === 0
   }
 
@@ -331,6 +339,10 @@ export default class Wrapper implements BaseWrapper {
       return this.vm.$options.name
     }
 
+    if (!this.vnode) {
+      return this.element.tagName
+    }
+
     return this.vnode.tag
   }
 

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

@@ -111,6 +111,21 @@ describe('contains', () => {
     expect(wrapper.contains({ ref: 'foo' })).to.equal(false)
   })
 
+  it('works correctly with innerHTML', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.contains('svg')).to.equal(true)
+    expect(wrapper.find('svg').contains('svg')).to.equal(true)
+  })
+
   it('throws an error if selector is not a valid selector', () => {
     const wrapper = mount(Component)
     const invalidSelectors = [

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

@@ -163,6 +163,50 @@ describe('find', () => {
     }
   })
 
+  it('works correctly with innerHTML', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find('svg').find('svg').exists()).to.equal(true)
+  })
+
+  it('throws errror when searching for a component on an element Wrapper', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const fn = () => mount(TestComponent).find('svg').find(Component)
+    const message = '[vue-test-utils]: cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
+  it('throws errror when using ref selector on an element Wrapper', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const fn = () => mount(TestComponent).find('svg').find({ ref: 'some-ref' })
+    const message = '[vue-test-utils]: cannot find a Vue instance on a DOM node. The node you are calling find on does not exist in the VDom. Are you adding the node as innerHTML?'
+    expect(fn).to.throw().with.property('message', message)
+  })
+
   it('returns correct number of Vue Wrappers when component has a v-for', () => {
     const items = [{ id: 1 }, { id: 2 }, { id: 3 }]
     const wrapper = mount(ComponentWithVFor, { propsData: { items }})

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

@@ -62,6 +62,20 @@ describe('findAll', () => {
     expect(wrapper.findAll('p').length).to.equal(3)
   })
 
+  it('works correctly with innerHTML', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.findAll('svg').length).to.equal(1)
+  })
+
   it('returns an array of Wrappers of elements matching id selector passed', () => {
     const compiled = compileToFunctions('<div><div id="foo" /></div>')
     const wrapper = mount(compiled)

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

@@ -48,6 +48,20 @@ describe('is', () => {
     expect(wrapper.is(ComponentWithoutName)).to.equal(true)
   })
 
+  it('works correctly with innerHTML', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find('svg').is('svg')).to.equal(true)
+  })
+
   it('returns true if root node matches functional Component', () => {
     if (!functionalSFCsSupported()) {
       return

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

@@ -9,6 +9,37 @@ describe('isEmpty', () => {
     expect(wrapper.isEmpty()).to.equal(true)
   })
 
+  it('returns true if innerHTML is empty', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg />'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find('svg').isEmpty()).to.equal(true)
+  })
+
+  it('returns false if innerHTML is not empty', () => {
+    if (/HeadlessChrome/.test(window.navigator.userAgent)) {
+      return
+    }
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg><p>not empty</p></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find('svg').isEmpty()).to.equal(false)
+  })
+
   it('returns true contains empty slot', () => {
     const compiled = compileToFunctions('<div><slot></slot></div>')
     const wrapper = mount(compiled)

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

@@ -8,10 +8,23 @@ describe('name', () => {
     expect(wrapper.name()).to.equal('component')
   })
 
+  it('returns the name of the tag if there is no vnode', () => {
+    const TestComponent = {
+      render (createElement) {
+        return createElement('div', {
+          domProps: {
+            innerHTML: '<svg></svg>'
+          }
+        })
+      }
+    }
+    const wrapper = mount(TestComponent)
+    expect(wrapper.find('svg').name()).to.equal('svg')
+  })
+
   it('returns the tag name of the element if it is not a Vue component', () => {
     const compiled = compileToFunctions('<div><p /></div>')
     const wrapper = mount(compiled)
     expect(wrapper.find('p').name()).to.equal('p')
   })
 })
-