fix: add custom data to events (#1076)

Author: eddyerburgh

packages/test-utils/src/create-dom-event.js

@@ -24,36 +24,62 @@ const modifiers = {
   pagedown: 34
 }
 
+function createEvent (
+  type,
+  modifier,
+  { eventInterface, bubbles, cancelable },
+  options
+) {
+  const SupportedEventInterface =
+    typeof window[eventInterface] === 'function'
+      ? window[eventInterface]
+      : window.Event
+
+  const event = new SupportedEventInterface(type, {
+    // event properties can only be added when the event is instantiated
+    // custom properties must be added after the event has been instantiated
+    ...options,
+    bubbles,
+    cancelable,
+    keyCode: modifiers[modifier]
+  })
+
+  return event
+}
+
+function createOldEvent (
+  type,
+  modifier,
+  { eventInterface, bubbles, cancelable }
+) {
+  const event = document.createEvent('Event')
+  event.initEvent(type, bubbles, cancelable)
+  event.keyCode = modifiers[modifier]
+  return event
+}
+
 export default function createDOMEvent (type, options) {
   const [eventType, modifier] = type.split('.')
-  const {
-    eventInterface,
-    bubbles,
-    cancelable
-  } = eventTypes[eventType] || defaultEventType
-
-  if (typeof window.Event === 'function') {
-    const SupportedEventInterface =
-     typeof window[eventInterface] === 'function'
-       ? window[eventInterface]
-       : window.Event
-
-    return new SupportedEventInterface(eventType, {
-      bubbles,
-      cancelable,
-      ...options,
-      keyCode: modifiers[modifier]
-    })
-  }
+  const meta = eventTypes[eventType] || defaultEventType
 
   // Fallback for IE10,11 - https://stackoverflow.com/questions/26596123
-  const eventObject = document.createEvent('Event')
+  const event = typeof window.Event === 'function'
+    ? createEvent(eventType, modifier, meta, options)
+    : createOldEvent(eventType, modifier, meta)
 
-  eventObject.initEvent(eventType, bubbles, cancelable)
+  const eventPrototype = Object.getPrototypeOf(event)
   Object.keys(options || {}).forEach(key => {
-    eventObject[key] = options[key]
+    const propertyDescriptor =
+      Object.getOwnPropertyDescriptor(eventPrototype, key)
+
+    const canSetProperty = !(
+      propertyDescriptor &&
+      propertyDescriptor.setter === undefined
+    )
+    if (canSetProperty) {
+      event[key] = options[key]
+    }
   })
-  eventObject.keyCode = modifiers[modifier]
 
-  return eventObject
+  return event
 }

test/specs/wrapper/trigger.spec.js

@@ -102,6 +102,26 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     expect(clickHandler.calledOnce).to.equal(true)
   })
 
+  it('adds custom data to events', () => {
+    const stub = sinon.stub()
+    const TestComponent = {
+      template: '<div @update="callStub" />',
+      methods: {
+        callStub (event) {
+          stub(event.customData)
+        }
+      }
+    }
+
+    const wrapper = mountingMethod(TestComponent)
+
+    wrapper.trigger('update', {
+      customData: 123
+    })
+
+    expect(stub).calledWith(123)
+  })
+
   it('does not fire on disabled elements', () => {
     const clickHandler = sinon.stub()
     const TestComponent = {