feat: set wrapper.vm if the element binds Vue instance (#724)

Author: 38elements

packages/test-utils/src/create-wrapper.js

@@ -7,7 +7,11 @@ import VueWrapper from './vue-wrapper'
 export default function createWrapper (
   node: VNode | Component,
   options: WrapperOptions
-) {
+): VueWrapper | Wrapper {
+  const componentInstance = node.componentInstance || node.child
+  if (componentInstance) {
+    return new VueWrapper(componentInstance, options)
+  }
   return node instanceof Vue
     ? new VueWrapper(node, options)
     : new Wrapper(node, options)

packages/test-utils/src/wrapper.js

@@ -323,6 +323,11 @@ export default class Wrapper implements BaseWrapper {
         typeof selector === 'string' ? selector : 'Component'
       )
     }
+    // Using CSS Selector, returns a VueWrapper instance if the root element
+    // binds a Vue instance.
+    if (nodes[0].elm === this.element) {
+      return this
+    }
     return createWrapper(nodes[0], this.options)
   }
 
@@ -333,7 +338,13 @@ export default class Wrapper implements BaseWrapper {
   findAll (selector: Selector): WrapperArray {
     getSelectorTypeOrThrow(selector, 'findAll')
     const nodes = findAll(this.vm, this.vnode, this.element, selector)
-    const wrappers = nodes.map(node => createWrapper(node, this.options))
+    const wrappers = nodes.map(node => {
+      // Using CSS Selector, returns a VueWrapper instance if the root element
+      // binds a Vue instance.
+      return node.elm === this.element
+        ? this
+        : createWrapper(node, this.options)
+    })
     return new WrapperArray(wrappers)
   }
 

test/specs/wrapper/find.spec.js

@@ -20,12 +20,14 @@ describeWithShallowAndMount('find', mountingMethod => {
     const compiled = compileToFunctions('<div><p></p><p></p></div>')
     const wrapper = mountingMethod(compiled)
     expect(wrapper.find('p').vnode).to.be.an('object')
+    expect(wrapper.find('p').vm).to.equal(undefined)
   })
 
   it('returns Wrapper matching class selector passed', () => {
     const compiled = compileToFunctions('<div><div class="foo" /></div>')
     const wrapper = mountingMethod(compiled)
     expect(wrapper.find('.foo').vnode).to.be.an('object')
+    expect(wrapper.find('.foo').vm).to.equal(undefined)
   })
 
   it('returns Wrapper matching class selector passed if nested in a transition', () => {
@@ -395,4 +397,20 @@ describeWithShallowAndMount('find', mountingMethod => {
         .with.property('message', message)
     })
   })
+
+  itDoNotRunIf(
+    mountingMethod.name === 'shallowMount',
+    'returns a VueWrapper instance by CSS selector if the element binds a Vue instance', () => {
+      const childComponent = {
+        name: 'bar',
+        template: '<p/>'
+      }
+      const wrapper = mountingMethod({
+        name: 'foo',
+        template: '<div><child-component /></div>',
+        components: { childComponent }
+      })
+      expect(wrapper.find('div').vm.$options.name).to.equal('foo')
+      expect(wrapper.find('p').vm.$options.name).to.equal('bar')
+    })
 })

test/specs/wrapper/findAll.spec.js

@@ -323,4 +323,22 @@ describeWithShallowAndMount('findAll', mountingMethod => {
         .with.property('message', message)
     })
   })
+
+  itDoNotRunIf(
+    mountingMethod.name === 'shallowMount',
+    'returns a WrapperArray which includes VueWrapper if the elements binds a Vue instance', () => {
+      const childComponent = {
+        name: 'bar',
+        template: '<p class="foo" />'
+      }
+      const wrapper = mountingMethod({
+        name: 'foo',
+        template: '<div class="foo"><p class="foo" /><child-component /></div>',
+        components: { childComponent }
+      })
+      const wrappers = wrapper.findAll('.foo')
+      expect(wrappers.at(0).vm.$options.name).to.equal('foo')
+      expect(wrappers.at(1).vm).to.equal(undefined)
+      expect(wrappers.at(2).vm.$options.name).to.equal('bar')
+    })
 })

test/specs/wrapper/setChecked.spec.js

@@ -84,11 +84,11 @@ describeWithShallowAndMount('setChecked', mountingMethod => {
   })
 
   it('throws error if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: h => h('div') })
-    const div = wrapper.find('div')
-    div.element = null
+    const wrapper = mountingMethod({ template: '<div><p/></div>' })
+    const p = wrapper.find('p')
+    p.element = null
 
-    const fn = () => div.setChecked()
+    const fn = () => p.setChecked()
     const message =
       '[vue-test-utils]: cannot call wrapper.setChecked() on a wrapper without an element'
     expect(fn)

test/specs/wrapper/setSelected.spec.js

@@ -34,11 +34,11 @@ describeWithShallowAndMount('setSelected', mountingMethod => {
   })
 
   it('throws error if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: h => h('div') })
-    const div = wrapper.find('div')
-    div.element = null
+    const wrapper = mountingMethod({ template: '<div><p/></div>' })
+    const p = wrapper.find('p')
+    p.element = null
 
-    const fn = () => div.setSelected()
+    const fn = () => p.setSelected()
     const message =
       '[vue-test-utils]: cannot call wrapper.setSelected() on a wrapper without an element'
     expect(fn)

test/specs/wrapper/setValue.spec.js

@@ -20,12 +20,11 @@ describeWithShallowAndMount('setValue', mountingMethod => {
   })
 
   it('throws error if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: h => h('div') })
-    const div = wrapper.find('div')
-    div.element = null
-    const fn = () => div.setValue('')
-    const message =
-      '[vue-test-utils]: cannot call wrapper.setValue() on a wrapper without an element'
+    const wrapper = mountingMethod({ template: '<div><p/></div>' })
+    const p = wrapper.find('p')
+    p.element = null
+    const fn = () => p.setValue('')
+    const message = '[vue-test-utils]: cannot call wrapper.setValue() on a wrapper without an element'
     expect(fn)
       .to.throw()
       .with.property('message', message)

test/specs/wrapper/text.spec.js

@@ -20,14 +20,13 @@ describeWithShallowAndMount('text', mountingMethod => {
 
     expect(wrapper.text()).to.equal(text)
   })
-  152
+
   it('throws error if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: h => h('div') })
-    const div = wrapper.find('div')
-    div.element = null
-    const fn = () => div.text()
-    const message =
-      '[vue-test-utils]: cannot call wrapper.text() on a wrapper without an element'
+    const wrapper = mountingMethod({ template: '<div><p/></div>' })
+    const p = wrapper.find('p')
+    p.element = null
+    const fn = () => p.text()
+    const message = '[vue-test-utils]: cannot call wrapper.text() on a wrapper without an element'
     expect(fn)
       .to.throw()
       .with.property('message', message)

test/specs/wrapper/trigger.spec.js

@@ -158,10 +158,10 @@ describeWithShallowAndMount('trigger', mountingMethod => {
   })
 
   it('throws error if wrapper does not contain element', () => {
-    const wrapper = mountingMethod({ render: h => h('div') })
-    const div = wrapper.find('div')
-    div.element = null
-    const fn = () => div.trigger('click')
+    const wrapper = mountingMethod({ template: '<div><p/></div>' })
+    const p = wrapper.find('p')
+    p.element = null
+    const fn = () => p.trigger('click')
     const message =
       '[vue-test-utils]: cannot call wrapper.trigger() on a wrapper without an element'
     expect(fn)