feat: add modifiers to trigger function

root · root · commit 34adf55de628 · 2020-04-17T18:58:03.000+02:00
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@vue/compiler-sfc": "^3.0.0-alpha.13",
     "babel-jest": "^25.2.3",
     "babel-preset-jest": "^25.2.1",
+    "dom-event-types": "^1.0.0",
     "flush-promises": "^1.0.2",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
diff --git a/src/create-dom-event.ts b/src/create-dom-event.ts
@@ -0,0 +1,96 @@
+import eventTypes from 'dom-event-types'
+
+const keyCodesByKeyName = {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  insert: 45,
+  delete: 46
+}
+
+function getEventProperties(eventParams) {
+  const { modifier, meta, options } = eventParams
+  const keyCode = keyCodesByKeyName[modifier] || options.key || options.keyCode || options.code
+
+  return {
+    ...options, // What the user passed in as the second argument to #trigger
+    bubbles: meta.bubbles,
+    meta: meta.cancelable,
+    // Any derived options should go here
+    key: keyCode,
+    keyCode,
+    code: keyCode
+  }
+}
+
+function createEvent(eventParams) {
+  const { eventType, meta } = eventParams
+  const metaEventInterface = window[meta.eventInterface]
+
+  const SupportedEventInterface =
+    typeof metaEventInterface === 'function'
+      ? metaEventInterface
+      : window.Event
+
+  const eventProperties = getEventProperties(eventParams)
+
+  const event = new SupportedEventInterface(
+    eventType,
+    // event properties can only be added when the event is instantiated
+    // custom properties must be added after the event has been instantiated
+    eventProperties
+  )
+
+  return event
+}
+
+function createEventForOldBrowsers(eventParams) {
+  const { eventType, modifier, meta } = eventParams
+  const { bubbles, cancelable } = meta
+
+  const event = document.createEvent('Event')
+  event.initEvent(eventType, bubbles, cancelable)
+  event['keyCode'] = keyCodesByKeyName[modifier]
+  return event
+}
+
+export default function createDOMEvent(eventString: String, options: Object = {}) {
+  const [eventType, modifier] = eventString.split('.')
+  const meta = eventTypes[eventType]
+    || { eventInterface: 'Event', cancelable: true, bubbles: true }
+
+  const eventParams = { eventType, modifier, meta, options }
+
+  const event = 
+    typeof window.Event === 'function'
+      ? createEvent(eventParams)
+      : createEventForOldBrowsers(eventParams) // Fallback for IE10,11 - https://stackoverflow.com/questions/26596123
+
+  const eventPrototype = Object.getPrototypeOf(event)
+
+  Object.keys(options).forEach(key => {
+    const propertyDescriptor = Object.getOwnPropertyDescriptor(
+      eventPrototype,
+      key
+    )
+
+    const canSetProperty = !(
+      propertyDescriptor && propertyDescriptor.set === undefined
+    )
+    if (canSetProperty) {
+     event[key] = options[key]
+    }
+  })
+
+  return event
+}
diff --git a/src/dom-wrapper.ts b/src/dom-wrapper.ts
@@ -3,6 +3,8 @@ import { nextTick } from 'vue'
 import { WrapperAPI } from './types'
 import { ErrorWrapper } from './error-wrapper'
 
+import createDOMEvent from './create-dom-event'
+
 export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
   element: ElementType
 
@@ -134,12 +136,10 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
     return new DOMWrapper(parentElement).trigger('change')
   }
 
-  async trigger(eventString: string) {
-    const evt = document.createEvent('Event')
-    evt.initEvent(eventString)
-
+  async trigger(eventString: string, options: Object = {}) {
     if (this.element) {
-      this.element.dispatchEvent(evt)
+      const event = createDOMEvent(eventString, options)
+      this.element.dispatchEvent(event)
     }
 
     return nextTick
diff --git a/src/types.ts b/src/types.ts
@@ -10,5 +10,5 @@ export interface WrapperAPI {
   findAll<T extends Element>(selector: string): DOMWrapper<T>[]
   html: () => string
   text: () => string
-  trigger: (eventString: string) => Promise<(fn?: () => void) => Promise<void>>
+  trigger: (eventString: string, options?: Object) => Promise<(fn?: () => void) => Promise<void>>
 }
diff --git a/src/vue-wrapper.ts b/src/vue-wrapper.ts
@@ -105,9 +105,9 @@ export class VueWrapper<T extends ComponentPublicInstance>
     return nextTick()
   }
 
-  trigger(eventString: string) {
+  trigger(eventString: string, options: Object = {}) {
     const rootElementWrapper = new DOMWrapper(this.element)
-    return rootElementWrapper.trigger(eventString)
+    return rootElementWrapper.trigger(eventString, options)
   }
 }
 
diff --git a/tests/trigger.spec.ts b/tests/trigger.spec.ts
@@ -3,44 +3,153 @@ import { defineComponent, h, ref } from 'vue'
 import { mount } from '../src'
 
 describe('trigger', () => {
-  it('works on the root element', async () => {
-    const Component = defineComponent({
-      setup() {
-        return {
-          count: ref(0)
-        }
-      },
 
-      render() {
-        return h('div', { onClick: () => this.count++ }, `Count: ${this.count}`)
-      }
+  describe('on click', () => {
+    it('works on the root element', async () => {
+      const Component = defineComponent({
+        setup() {
+          return {
+            count: ref(0)
+          }
+        },
+  
+        render() {
+          return h('div', { onClick: () => this.count++ }, `Count: ${this.count}`)
+        }
+      })
+  
+      const wrapper = mount(Component)
+      await wrapper.trigger('click')
+  
+      expect(wrapper.text()).toBe('Count: 1')
+    })
+  
+    it('works on a nested element', async () => {
+      const Component = defineComponent({
+        setup() {
+          return {
+            count: ref(0)
+          }
+        },
+  
+        render() {
+          return h('div', {}, [
+            h('p', {}, `Count: ${this.count}`),
+            h('button', { onClick: () => this.count++ })
+          ])
+        }
+      })
+  
+      const wrapper = mount(Component)
+      await wrapper.find('button').trigger('click')
+  
+      expect(wrapper.find('p').text()).toBe('Count: 1')
     })
 
-    const wrapper = mount(Component)
-    await wrapper.trigger('click')
+    it('causes DOM to update after a click handler method that changes components data is called', async () => {
+      const Component = defineComponent({
+        setup() {
+          return {
+            isActive: ref(false)
+          }
+        },
 
-    expect(wrapper.text()).toBe('Count: 1')
+        render() {
+          return h('div', { 
+            onClick: () => this.isActive = !this.isActive,
+            class: { active: this.isActive } 
+          })
+        }
+      })
+      const wrapper = mount(Component, {})
+      
+      expect(wrapper.classes()).not.toContain('active')
+      await wrapper.trigger('click')
+      expect(wrapper.classes()).toContain('active')
+    })
   })
 
-  it('works on a nested element', async () => {
-    const Component = defineComponent({
-      setup() {
-        return {
-          count: ref(0)
-        }
-      },
+  describe('on keydown', () => {
+    it('causes keydown handler to fire when "keydown" is triggered', async () => {
+      const keydownHandler = jest.fn()
+      const Component = {
+        template: '<input @keydown="keydownHandler" />',
+        methods: {
+          keydownHandler
+        },
+      }
+      const wrapper = mount(Component, {})
+      await wrapper.trigger('keydown')
+
+      expect(keydownHandler).toHaveBeenCalledTimes(1)
+    })
+    
+    it('causes keydown handler to fire when "keydown.enter" is triggered', async () => {
+      const keydownHandler = jest.fn()
+      const Component = {
+        template: '<input @keydown.enter="keydownHandler" />',
+        methods: {
+          keydownHandler
+        },
+      }
+      const wrapper = mount(Component, {})
+      await wrapper.trigger('keydown', { key: 'Enter' })
+
+      expect(keydownHandler).toHaveBeenCalledTimes(1)
+    })
 
-      render() {
-        return h('div', {}, [
-          h('p', {}, `Count: ${this.count}`),
-          h('button', { onClick: () => this.count++ })
-        ])
+    it('causes keydown handler to fire with the appropiate keyCode when wrapper.trigger("keydown", { keyCode: 65 }) is fired', async () => {
+      const keydownHandler = jest.fn()
+      const Component = {
+        template: '<input @keydown="keydownHandler" />',
+        methods: {
+          keydownHandler
+        },
       }
+      const wrapper = mount(Component, {})
+      await wrapper.trigger('keydown', { keyCode: 65 })
+
+      expect(keydownHandler).toHaveBeenCalledTimes(1)
+      expect(keydownHandler.mock.calls[0][0]['keyCode']).toBe(65)
     })
 
-    const wrapper = mount(Component)
-    await wrapper.find('button').trigger('click')
+    it('causes keydown handler to fire converting keyName in an apropiate keyCode when wrapper.trigger("keydown.${keyName}") is fired', async () => {
+      let keydownHandler = jest.fn()
+
+      const keyCodesByKeyName = {
+        backspace: 8,
+        tab: 9,
+        enter: 13,
+        esc: 27,
+        space: 32,
+        pageup: 33,
+        pagedown: 34,
+        end: 35,
+        home: 36,
+        left: 37,
+        up: 38,
+        right: 39,
+        down: 40,
+        insert: 45,
+        delete: 46
+      }
 
-    expect(wrapper.find('p').text()).toBe('Count: 1')
+      const Component = {
+        template: '<input @keydown="keydownHandler" />',
+        methods: {
+          keydownHandler
+        },
+      }
+      const wrapper = mount(Component, {})
+
+      for (const keyName in keyCodesByKeyName) {
+        const keyCode = keyCodesByKeyName[keyName]
+        wrapper.trigger(`keydown.${keyName}`)
+
+        const calls = keydownHandler.mock.calls
+        expect(calls[calls.length-1][0].keyCode).toEqual(keyCode)
+      }
+    })
   })
 })
+ 
diff --git a/yarn.lock b/yarn.lock
@@ -2232,6 +2232,11 @@ dir-glob@^2.2.2:
   dependencies:
     path-type "^3.0.0"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@ export interface WrapperAPI {`
`10`	`10`	`findAll<T extends Element>(selector: string): DOMWrapper<T>[]`
`11`	`11`	`html: () => string`
`12`	`12`	`text: () => string`
`13`		`- trigger: (eventString: string) => Promise<(fn?: () => void) => Promise<void>>`
	`13`	`+ trigger: (eventString: string, options?: Object) => Promise<(fn?: () => void) => Promise<void>>`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -105,9 +105,9 @@ export class VueWrapper<T extends ComponentPublicInstance>`
`105`	`105`	`return nextTick()`
`106`	`106`	`}`
`107`	`107`
`108`		`- trigger(eventString: string) {`
	`108`	`+ trigger(eventString: string, options: Object = {}) {`
`109`	`109`	`const rootElementWrapper = new DOMWrapper(this.element)`
`110`		`- return rootElementWrapper.trigger(eventString)`
	`110`	`+ return rootElementWrapper.trigger(eventString, options)`
`111`	`111`	`}`
`112`	`112`	`}`
`113`	`113`