fix: use correct event interface (#977)

Author: eddyerburgh

package.json

@@ -47,7 +47,7 @@
     "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-vue-libs": "^2.1.0",
     "flow-bin": "^0.66.0",
-    "jsdom": "^11.5.1",
+    "jsdom": "^12.0.0",
     "jsdom-global": "^3.0.2",
     "karma": "^1.7.0",
     "karma-mocha": "^1.3.0",

packages/test-utils/package.json

@@ -37,6 +37,7 @@
     "vue-template-compiler": "^2.x"
   },
   "dependencies": {
+    "dom-event-types": "^1.0.0",
     "lodash": "^4.17.4"
   }
 }

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

@@ -0,0 +1,59 @@
+import eventTypes from 'dom-event-types'
+
+const defaultEventType = {
+  eventInterface: 'Event',
+  cancelable: true,
+  bubbles: true
+}
+
+const modifiers = {
+  enter: 13,
+  tab: 9,
+  delete: 46,
+  esc: 27,
+  space: 32,
+  up: 38,
+  down: 40,
+  left: 37,
+  right: 39,
+  end: 35,
+  home: 36,
+  backspace: 8,
+  insert: 45,
+  pageup: 33,
+  pagedown: 34
+}
+
+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]
+    })
+  }
+
+  // Fallback for IE10,11 - https://stackoverflow.com/questions/26596123
+  const eventObject = document.createEvent('Event')
+
+  eventObject.initEvent(eventType, bubbles, cancelable)
+  Object.keys(options || {}).forEach(key => {
+    eventObject[key] = options[key]
+  })
+  eventObject.keyCode = modifiers[modifier]
+
+  return eventObject
+}

packages/test-utils/src/wrapper.js

@@ -15,6 +15,7 @@ import createWrapper from './create-wrapper'
 import { orderWatchers } from './order-watchers'
 import { recursivelySetData } from './recursively-set-data'
 import { matches } from './matches'
+import createDOMEvent from './create-dom-event'
 
 export default class Wrapper implements BaseWrapper {
   +vnode: VNode | null;
@@ -823,52 +824,9 @@ export default class Wrapper implements BaseWrapper {
       return
     }
 
-    const modifiers = {
-      enter: 13,
-      tab: 9,
-      delete: 46,
-      esc: 27,
-      space: 32,
-      up: 38,
-      down: 40,
-      left: 37,
-      right: 39,
-      end: 35,
-      home: 36,
-      backspace: 8,
-      insert: 45,
-      pageup: 33,
-      pagedown: 34
-    }
-
-    const event = type.split('.')
-
-    let eventObject
-
-    // Fallback for IE10,11 - https://stackoverflow.com/questions/26596123
-    if (typeof window.Event === 'function') {
-      eventObject = new window.Event(event[0], {
-        bubbles: true,
-        cancelable: true
-      })
-    } else {
-      eventObject = document.createEvent('Event')
-      eventObject.initEvent(event[0], true, true)
-    }
-
-    if (options) {
-      Object.keys(options).forEach(key => {
-        // $FlowIgnore
-        eventObject[key] = options[key]
-      })
-    }
-
-    if (event.length === 2) {
-      // $FlowIgnore
-      eventObject.keyCode = modifiers[event[1]]
-    }
+    const event = createDOMEvent(type, options)
+    this.element.dispatchEvent(event)
 
-    this.element.dispatchEvent(eventObject)
     if (this.vnode) {
       orderWatchers(this.vm || this.vnode.context.$root)
     }

test/specs/wrapper/trigger.spec.js

@@ -2,7 +2,8 @@ import ComponentWithEvents from '~resources/components/component-with-events.vue
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 import {
   describeWithShallowAndMount,
-  scopedSlotsSupported
+  scopedSlotsSupported,
+  isRunningPhantomJS
 } from '~resources/utils'
 import Vue from 'vue'
 import { itDoNotRunIf } from 'conditional-specs'
@@ -92,7 +93,9 @@ describeWithShallowAndMount('trigger', mountingMethod => {
       propsData: { clickHandler }
     })
     const button = wrapper.find('.left-click')
-    button.trigger('mousedown')
+    button.trigger('mousedown', {
+      button: 1
+    })
     button.trigger('mousedown', {
       button: 0
     })
@@ -180,4 +183,35 @@ describeWithShallowAndMount('trigger', mountingMethod => {
         .with.property('message', message)
     })
   })
+
+  itDoNotRunIf(
+    isRunningPhantomJS,
+    'trigger should create events with correct interface', () => {
+      let lastEvent
+      const TestComponent = {
+        template: `
+        <div @click="updateLastEvent" />
+      `,
+        methods: {
+          updateLastEvent (event) {
+            lastEvent = event
+          }
+        }
+      }
+
+      const wrapper = mountingMethod(TestComponent)
+
+      wrapper.trigger('click')
+      expect(lastEvent).to.be.an.instanceof(window.MouseEvent)
+    })
+
+  it('falls back to supported event if not supported by browser', () => {
+    const TestComponent = {
+      template: '<div />'
+    }
+
+    const wrapper = mountingMethod(TestComponent)
+
+    wrapper.trigger('gamepadconnected')
+  })
 })