fix: use correct event interface (#977)

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')
+ })
 })