fix: use getter for element

fixes #62

Author: eddyerburgh

src/wrappers/vue-wrapper.js

@@ -16,7 +16,11 @@ export default class VueWrapper extends Wrapper implements BaseWrapper {
       get: () => vm._vnode,
       set: () => {}
     }))
-
+    // $FlowIgnore
+    Object.defineProperty(this, 'element', ({
+      get: () => vm.$el,
+      set: () => {}
+    }))
     this.vm = vm
     this.isVueComponent = true
     this._emitted = Object.create(null)

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

@@ -10,6 +10,22 @@ describe('setData', () => {
     expect(wrapper.findAll('.child.ready').length).to.equal(1)
   })
 
+  it('keeps element in sync with vnode', () => {
+    const Component = {
+      template: '<div class="some-class" v-if="show">A custom component!</div>',
+      data () {
+        return {
+          show: false
+        }
+      }
+    }
+    const wrapper = mount(Component)
+    wrapper.setData({ show: true })
+    wrapper.update()
+    expect(wrapper.element).to.equal(wrapper.vm.$el)
+    expect(wrapper.hasClass('some-class')).to.be.true
+  })
+
   it('throws an error if node is not a Vue instance', () => {
     const message = 'wrapper.setData() can only be called on a Vue instance'
     const compiled = compileToFunctions('<div><p></p></div>')

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

@@ -10,11 +10,11 @@ describe('text', () => {
     expect(wrapper.text()).to.equal(text)
   })
 
-  it('throws error if wrapper does not contain elememnt', () => {
-    const compiled = compileToFunctions(`<div />`)
-    const wrapper = mount(compiled)
-    wrapper.element = null
-    const fn = () => wrapper.text()
+  it('throws error if wrapper does not contain element', () => {
+    const wrapper = mount({ 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'
     expect(fn).to.throw().with.property('message', message)
   })

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

@@ -74,10 +74,11 @@ describe('trigger', () => {
     expect(info.calledWith(true)).to.equal(true)
   })
 
-  it('throws error if wrapper does not contain eleemnt', () => {
-    const wrapper = mount({ render: () => {} })
-    wrapper.element = null
-    const fn = () => wrapper.trigger('click')
+  it('throws error if wrapper does not contain element', () => {
+    const wrapper = mount({ render: (h) => h('div') })
+    const div = wrapper.find('div')
+    div.element = null
+    const fn = () => div.trigger('click')
     const message = '[vue-test-utils]: cannot call wrapper.trigger() on a wrapper without an element'
     expect(fn).to.throw().with.property('message', message)
   })