Fix VTU don't return key property to event when use trigger.('eventNa…

…me.key') (#1808) * Add key to events When trigger 'keydown.tab` - key does not exists. This affect case when in components we use w3c-keys for compare * fix: pass key proprety to event * refactor: remove console.log * fix: test describe
vuejs · Apr 7, 2021 · a61c548 · a61c548
1 parent 245ba2a
commit a61c548
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 9 deletions.
diff --git a/packages/test-utils/src/create-dom-event.js b/packages/test-utils/src/create-dom-event.js
@@ -24,9 +24,35 @@ const modifiers = {
   pagedown: 34
 }
 
+// get from https://github.com/ashubham/w3c-keys/blob/master/index.ts
+const w3cKeys = {
+  enter: 'Enter',
+  tab: 'Tab',
+  delete: 'Delete',
+  esc: 'Esc',
+  escape: 'Escape',
+  space: ' ',
+  up: 'Up',
+  left: 'Left',
+  right: 'Right',
+  down: 'Down',
+  end: 'End',
+  home: 'Home',
+  backspace: 'Backspace',
+  insert: 'Insert',
+  pageup: 'PageUp',
+  pagedown: 'PageDown'
+}
+
+const codeToKeyNameMap = Object.entries(modifiers).reduce(
+  (acc, [key, value]) => Object.assign(acc, { [value]: w3cKeys[key] }),
+  {}
+)
+
 function getOptions(eventParams) {
   const { modifier, meta, options } = eventParams
   const keyCode = modifiers[modifier] || options.keyCode || options.code
+  const key = codeToKeyNameMap[keyCode]
 
   return {
     ...options, // What the user passed in as the second argument to #trigger
@@ -36,7 +62,8 @@ function getOptions(eventParams) {
 
     // Any derived options should go here
     keyCode,
-    code: keyCode
+    code: keyCode,
+    key
   }
 }
 

diff --git a/test/specs/wrapper/trigger.spec.js b/test/specs/wrapper/trigger.spec.js
@@ -43,23 +43,27 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     expect(keydownHandler).toHaveBeenCalled()
   })
 
-  describe('causes keydown handler to fire with the appropriate keyCode when wrapper.trigger("keydown", { keyCode: 65 }) is fired on a Component', async () => {
+  describe('causes keydown handler to fire with the appropriate keyCode when wrapper.trigger("keydown", { keyCode: 46 }) is fired on a Component', async () => {
     const keydownHandler = jest.fn()
     const wrapper = mountingMethod(ComponentWithEvents, {
       propsData: { keydownHandler }
     })
 
-    await wrapper.find('.keydown').trigger('keydown', { keyCode: 65 })
+    await wrapper.find('.keydown').trigger('keydown', { keyCode: 46 })
 
     const keyboardEvent = keydownHandler.mock.calls[0][0]
 
     // Unfortunately, JSDom will give different types than PhantomJS for keyCodes (string vs number), so we have to use parseInt to normalize the types.
     it('contains the keyCode', () => {
-      expect(parseInt(keyboardEvent.keyCode, 10)).toEqual(65)
+      expect(parseInt(keyboardEvent.keyCode, 10)).toEqual(46)
+    })
+
+    it('contains the key', () => {
+      expect(keyboardEvent.key).toEqual('Delete')
     })
 
     itDoNotRunIf(isRunningChrome, 'contains the code', () => {
-      expect(parseInt(keyboardEvent.code, 10)).toEqual(65)
+      expect(parseInt(keyboardEvent.code, 10)).toEqual(46)
     })
   })
 
@@ -73,7 +77,7 @@ describeWithShallowAndMount('trigger', mountingMethod => {
     expect(keydownHandler).toHaveBeenCalled()
   })
 
-  it.skip('convert a registered key name to a key code', async () => {
+  it('convert a registered key name to a key code and key', async () => {
     const modifiers = {
       enter: 13,
       esc: 27,
@@ -91,14 +95,47 @@ describeWithShallowAndMount('trigger', mountingMethod => {
       pageup: 33,
       pagedown: 34
     }
+
+    // get from https://github.com/ashubham/w3c-keys/blob/master/index.ts
+    const w3cKeys = {
+      enter: 'Enter',
+      tab: 'Tab',
+      delete: 'Delete',
+      esc: 'Esc',
+      escape: 'Escape',
+      space: ' ',
+      up: 'Up',
+      left: 'Left',
+      right: 'Right',
+      down: 'Down',
+      end: 'End',
+      home: 'Home',
+      backspace: 'Backspace',
+      insert: 'Insert',
+      pageup: 'PageUp',
+      pagedown: 'PageDown'
+    }
+
+    const codeToKeyNameMap = Object.entries(modifiers).reduce(
+      (acc, [key, value]) => Object.assign(acc, { [value]: w3cKeys[key] }),
+      {}
+    )
+
+    const modifiersArray = Object.entries(modifiers)
+
     const keyupHandler = jest.fn()
     const wrapper = mountingMethod(ComponentWithEvents, {
       propsData: { keyupHandler }
     })
-    for (const keyName in modifiers) {
-      const keyCode = modifiers[keyName]
+
+    for (let index = 0; index < modifiersArray.length; index++) {
+      const [keyName, keyCode] = modifiersArray[index]
       await wrapper.find('.keydown').trigger(`keyup.${keyName}`)
-      expect(keyupHandler.mock.calls[0][0].keyCode).toEqual(keyCode)
+
+      expect(keyupHandler.mock.calls[index][0].keyCode).toEqual(keyCode)
+      expect(keyupHandler.mock.calls[index][0].key).toEqual(
+        codeToKeyNameMap[keyCode]
+      )
     }
   })