fix: event capturing in beforeCreate lifecycle hook (#243)

* Fix event capture by installing captor via mixin

The event capture was not working when events were emitted in methods
during the component creation, like in the lifecycle hook beforeCreate.
This fix installs the captor using a mixin before the beforeCreate event
gets emitted.

The captor is available to the wrapper, when the wrapper accesses
the vue component.

Two tests were written, in emitted.spec, and emittedByOrder,
respectively.

* Adjust emitted tests to pass tested Vue versions

* Use component field for event capturing

Instead of using an external object, this.__emitted and
this.__emittedByOrder is now used to capture events. This allows the
wrapper to access the event logger of the component.

The installed event logger is never removed and therefore will exist
even after the wrapper was created.

Author: wtho

src/lib/create-instance.js

@@ -5,6 +5,7 @@ import addMocks from './add-mocks'
 import addAttrs from './add-attrs'
 import addListeners from './add-listeners'
 import addProvide from './add-provide'
+import { addEventLogger } from './log-events'
 import { stubComponents } from './stub-components'
 import { throwError } from './util'
 import { compileTemplate } from './compile-template'
@@ -45,6 +46,8 @@ export default function createConstructor (
     compileTemplate(component)
   }
 
+  addEventLogger(vue)
+
   const Constructor = vue.extend(component)
 
   const instanceOptions = { ...options }

src/lib/log-events.js

@@ -1,8 +1,20 @@
-export function logEvents (vm, emitted, emittedByOrder) {
+// @flow
+
+export function logEvents (vm: Component, emitted: Object, emittedByOrder: Array<any>) {
   const emit = vm.$emit
   vm.$emit = (name, ...args) => {
     (emitted[name] || (emitted[name] = [])).push(args)
     emittedByOrder.push({ name, args })
     return emit.call(vm, name, ...args)
   }
 }
+
+export function addEventLogger (vue: Component) {
+  vue.mixin({
+    beforeCreate: function () {
+      this.__emitted = Object.create(null)
+      this.__emittedByOrder = []
+      logEvents(this, this.__emitted, this.__emittedByOrder)
+    }
+  })
+}

src/wrappers/vue-wrapper.js

@@ -1,7 +1,6 @@
 // @flow
 
 import Wrapper from './wrapper'
-import { logEvents } from '../lib/log-events'
 
 function update () {
   this._update(this._render())
@@ -24,9 +23,7 @@ export default class VueWrapper extends Wrapper implements BaseWrapper {
     }))
     this.vm = vm
     this.isVueComponent = true
-    this._emitted = Object.create(null)
-    this._emittedByOrder = []
-
-    logEvents(vm, this._emitted, this._emittedByOrder)
+    this._emitted = vm.__emitted
+    this._emittedByOrder = vm.__emittedByOrder
   }
 }

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

@@ -1,4 +1,5 @@
 import mount from '~src/mount'
+import createLocalVue from '~src/create-local-vue'
 
 describe('emitted', () => {
   it('captures emitted events with a different api', () => {
@@ -54,4 +55,39 @@ describe('emitted', () => {
     const fn = () => wrapper.find('p').emitted()
     expect(fn).to.throw().with.property('message', message)
   })
+
+  it('captures all events thrown after beforeCreate lifecycle hook', () => {
+    const wrapper = mount({
+      beforeCreate () {
+        this.$emit('foo')
+      },
+      mounted () {
+        this.$emit('bar', 1, 2)
+      }
+    })
+
+    expect(wrapper.emitted().foo).to.eql([[]])
+    expect(wrapper.emitted().bar).to.eql([[1, 2]])
+  })
+
+  it('captures only events from its component without side effects on localVue', () => {
+    const localVue = createLocalVue()
+
+    const wrapper1 = mount({
+      beforeCreate () {
+        this.$emit('foo')
+      }
+    }, { localVue })
+
+    const wrapper2 = mount({
+      mounted () {
+        this.$emit('bar')
+      }
+    }, { localVue })
+
+    expect(wrapper1.emitted().foo).to.eql([[]])
+    expect(wrapper1.emitted().bar).to.eql(undefined)
+    expect(wrapper2.emitted().foo).to.eql(undefined)
+    expect(wrapper2.emitted().bar).to.eql([[]])
+  })
 })

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

@@ -1,4 +1,5 @@
 import mount from '~src/mount'
+import Vue from 'vue'
 
 describe('emittedByOrder', () => {
   it('captures emitted events in order', () => {
@@ -9,11 +10,24 @@ describe('emittedByOrder', () => {
     wrapper.vm.$emit('foo')
     wrapper.vm.$emit('bar', 1, 2, 3)
     wrapper.vm.$emit('foo', 2, 3, 4)
-    expect(wrapper.emittedByOrder()).to.eql([
-      { name: 'foo', args: [] },
-      { name: 'bar', args: [1, 2, 3] },
-      { name: 'foo', args: [2, 3, 4] }
-    ])
+
+    if (Vue.version === '2.0.8') {
+      expect(wrapper.emittedByOrder()).to.eql([
+        { name: 'hook:beforeCreate', args: [] },
+        { name: 'hook:created', args: [] },
+        { name: 'hook:beforeMount', args: [] },
+        { name: 'hook:mounted', args: [] },
+        { name: 'foo', args: [] },
+        { name: 'bar', args: [1, 2, 3] },
+        { name: 'foo', args: [2, 3, 4] }
+      ])
+    } else {
+      expect(wrapper.emittedByOrder()).to.eql([
+        { name: 'foo', args: [] },
+        { name: 'bar', args: [1, 2, 3] },
+        { name: 'foo', args: [2, 3, 4] }
+      ])
+    }
   })
 
   it('throws error when called on non VueWrapper', () => {
@@ -25,4 +39,37 @@ describe('emittedByOrder', () => {
     const fn = () => wrapper.find('p').emittedByOrder()
     expect(fn).to.throw().with.property('message', message)
   })
+
+  it('captures in lifecycle hooks emitted events in order', () => {
+    const wrapper = mount({
+      render: h => h('div'),
+      beforeCreate: function () {
+        this.$emit('foo')
+      },
+      created: function () {
+        this.$emit('bar', 1, 2, 3)
+      },
+      mounted: function () {
+        this.$emit('foo', 2, 3, 4)
+      }
+    })
+
+    if (Vue.version === '2.0.8') {
+      expect(wrapper.emittedByOrder()).to.eql([
+        { name: 'foo', args: [] },
+        { name: 'hook:beforeCreate', args: [] },
+        { name: 'bar', args: [1, 2, 3] },
+        { name: 'hook:created', args: [] },
+        { name: 'hook:beforeMount', args: [] },
+        { name: 'foo', args: [2, 3, 4] },
+        { name: 'hook:mounted', args: [] }
+      ])
+    } else {
+      expect(wrapper.emittedByOrder()).to.eql([
+        { name: 'foo', args: [] },
+        { name: 'bar', args: [1, 2, 3] },
+        { name: 'foo', args: [2, 3, 4] }
+      ])
+    }
+  })
 })