fix!: remove keyCode

BREAKING CHANGE: Support for `keyCode` property on keyboard events has been removed.
testing-library · Nov 15, 2021 · 0354e28 · 0354e28
1 parent 3c67ea0
commit 0354e28
Show file tree

Hide file tree

Showing 12 changed files with 587 additions and 605 deletions.
diff --git a/src/keyboard/getEventProps.ts b/src/keyboard/getEventProps.ts
@@ -8,12 +8,6 @@ export function getKeyEventProps(keyDef: keyboardKey, state: keyboardState) {
     ctrlKey: state.modifiers.ctrl,
     metaKey: state.modifiers.meta,
     shiftKey: state.modifiers.shift,
-
-    /** @deprecated use code instead */
-    keyCode:
-      keyDef.keyCode ??
-      // istanbul ignore next
-      (keyDef.key?.length === 1 ? keyDef.key.charCodeAt(0) : undefined),
   }
 }
 

diff --git a/src/keyboard/keyMap.ts b/src/keyboard/keyMap.ts
@@ -19,63 +19,58 @@ export const defaultKeyMap: keyboardKey[] = [
   // alphanumeric block - functional
   {code: 'Space', key: ' '},
 
-  {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT, keyCode: 18},
-  {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT, keyCode: 18},
+  {code: 'AltLeft', key: 'Alt', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'AltRight', key: 'Alt', location: DOM_KEY_LOCATION.RIGHT},
   {
     code: 'ShiftLeft',
     key: 'Shift',
     location: DOM_KEY_LOCATION.LEFT,
-    keyCode: 16,
   },
   {
     code: 'ShiftRight',
     key: 'Shift',
     location: DOM_KEY_LOCATION.RIGHT,
-    keyCode: 16,
   },
   {
     code: 'ControlLeft',
     key: 'Control',
     location: DOM_KEY_LOCATION.LEFT,
-    keyCode: 17,
   },
   {
     code: 'ControlRight',
     key: 'Control',
     location: DOM_KEY_LOCATION.RIGHT,
-    keyCode: 17,
   },
-  {code: 'MetaLeft', key: 'Meta', location: DOM_KEY_LOCATION.LEFT, keyCode: 93},
+  {code: 'MetaLeft', key: 'Meta', location: DOM_KEY_LOCATION.LEFT},
   {
     code: 'MetaRight',
     key: 'Meta',
     location: DOM_KEY_LOCATION.RIGHT,
-    keyCode: 93,
   },
 
-  {code: 'OSLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT, keyCode: 91},
-  {code: 'OSRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT, keyCode: 91},
+  {code: 'OSLeft', key: 'OS', location: DOM_KEY_LOCATION.LEFT},
+  {code: 'OSRight', key: 'OS', location: DOM_KEY_LOCATION.RIGHT},
 
-  {code: 'Tab', key: 'Tab', keyCode: 9},
-  {code: 'CapsLock', key: 'CapsLock', keyCode: 20},
-  {code: 'Backspace', key: 'Backspace', keyCode: 8},
-  {code: 'Enter', key: 'Enter', keyCode: 13},
+  {code: 'Tab', key: 'Tab'},
+  {code: 'CapsLock', key: 'CapsLock'},
+  {code: 'Backspace', key: 'Backspace'},
+  {code: 'Enter', key: 'Enter'},
 
   // function
-  {code: 'Escape', key: 'Escape', keyCode: 27},
+  {code: 'Escape', key: 'Escape'},
 
   // arrows
-  {code: 'ArrowUp', key: 'ArrowUp', keyCode: 38},
-  {code: 'ArrowDown', key: 'ArrowDown', keyCode: 40},
-  {code: 'ArrowLeft', key: 'ArrowLeft', keyCode: 37},
-  {code: 'ArrowRight', key: 'ArrowRight', keyCode: 39},
+  {code: 'ArrowUp', key: 'ArrowUp'},
+  {code: 'ArrowDown', key: 'ArrowDown'},
+  {code: 'ArrowLeft', key: 'ArrowLeft'},
+  {code: 'ArrowRight', key: 'ArrowRight'},
 
   // control pad
-  {code: 'Home', key: 'Home', keyCode: 36},
-  {code: 'End', key: 'End', keyCode: 35},
-  {code: 'Delete', key: 'Delete', keyCode: 46},
-  {code: 'PageUp', key: 'PageUp', keyCode: 33},
-  {code: 'PageDown', key: 'PageDown', keyCode: 34},
+  {code: 'Home', key: 'Home'},
+  {code: 'End', key: 'End'},
+  {code: 'Delete', key: 'Delete'},
+  {code: 'PageUp', key: 'PageUp'},
+  {code: 'PageDown', key: 'PageDown'},
 
   // TODO: add mappings
 ]
diff --git a/src/keyboard/types.ts b/src/keyboard/types.ts
@@ -73,8 +73,6 @@ export interface keyboardKey {
   key?: string
   /** Location on the keyboard for keys with multiple representation */
   location?: DOM_KEY_LOCATION
-  /** keyCode for legacy support */
-  keyCode?: number
   /** Does the character in `key` require/imply AltRight to be pressed? */
   altGr?: boolean
   /** Does the character in `key` require/imply a shiftKey to be pressed? */

diff --git a/tests/_helpers/utils.ts b/tests/_helpers/utils.ts
@@ -126,12 +126,7 @@ function setupListbox() {
 
 const eventLabelGetters = {
   KeyboardEvent(event: KeyboardEvent) {
-    return [
-      event.key,
-      typeof event.keyCode === 'undefined' ? null : `(${event.keyCode})`,
-    ]
-      .join(' ')
-      .trim()
+    return [event.key].join(' ').trim()
   },
   MouseEvent(event: MouseEvent) {
     if (

diff --git a/tests/keyboard/index.ts b/tests/keyboard/index.ts
@@ -11,15 +11,15 @@ it('type without focus', () => {
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: body
 
-    body - keydown: f (102)
-    body - keypress: f (102)
-    body - keyup: f (102)
-    body - keydown: o (111)
-    body - keypress: o (111)
-    body - keyup: o (111)
-    body - keydown: o (111)
-    body - keypress: o (111)
-    body - keyup: o (111)
+    body - keydown: f
+    body - keypress: f
+    body - keyup: f
+    body - keydown: o
+    body - keypress: o
+    body - keyup: o
+    body - keydown: o
+    body - keypress: o
+    body - keyup: o
   `)
 })
 
@@ -35,18 +35,18 @@ it('type with focus', () => {
     Events fired on: body
 
     input[value=""] - focusin
-    input[value=""] - keydown: f (102)
-    input[value=""] - keypress: f (102)
+    input[value=""] - keydown: f
+    input[value=""] - keypress: f
     input[value="f"] - input
-    input[value="f"] - keyup: f (102)
-    input[value="f"] - keydown: o (111)
-    input[value="f"] - keypress: o (111)
+    input[value="f"] - keyup: f
+    input[value="f"] - keydown: o
+    input[value="f"] - keypress: o
     input[value="fo"] - input
-    input[value="fo"] - keyup: o (111)
-    input[value="fo"] - keydown: o (111)
-    input[value="fo"] - keypress: o (111)
+    input[value="fo"] - keyup: o
+    input[value="fo"] - keydown: o
+    input[value="fo"] - keypress: o
     input[value="foo"] - input
-    input[value="foo"] - keyup: o (111)
+    input[value="foo"] - keyup: o
   `)
 })
 
@@ -63,18 +63,18 @@ it('type asynchronous', async () => {
     Events fired on: body
 
     input[value=""] - focusin
-    input[value=""] - keydown: f (102)
-    input[value=""] - keypress: f (102)
+    input[value=""] - keydown: f
+    input[value=""] - keypress: f
     input[value="f"] - input
-    input[value="f"] - keyup: f (102)
-    input[value="f"] - keydown: o (111)
-    input[value="f"] - keypress: o (111)
+    input[value="f"] - keyup: f
+    input[value="f"] - keydown: o
+    input[value="f"] - keypress: o
     input[value="fo"] - input
-    input[value="fo"] - keyup: o (111)
-    input[value="fo"] - keydown: o (111)
-    input[value="fo"] - keypress: o (111)
+    input[value="fo"] - keyup: o
+    input[value="fo"] - keydown: o
+    input[value="fo"] - keypress: o
     input[value="foo"] - input
-    input[value="foo"] - keyup: o (111)
+    input[value="foo"] - keyup: o
   `)
 })
 
@@ -118,7 +118,7 @@ it('continue typing with state', () => {
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    input[value=""] - keydown: Shift (16) {shift}
+    input[value=""] - keydown: Shift {shift}
   `)
   clearEventCalls()
 
@@ -127,10 +127,10 @@ it('continue typing with state', () => {
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value="F"]
 
-    input[value=""] - keydown: F (70) {shift}
-    input[value=""] - keypress: F (70) {shift}
+    input[value=""] - keydown: F {shift}
+    input[value=""] - keypress: F {shift}
     input[value="F"] - input
-    input[value="F"] - keyup: F (70) {shift}
-    input[value="F"] - keyup: Shift (16)
+    input[value="F"] - keyup: F {shift}
+    input[value="F"] - keyup: Shift
   `)
 })
diff --git a/tests/keyboard/keyboardImplementation.ts b/tests/keyboard/keyboardImplementation.ts
@@ -36,10 +36,10 @@ describe('pressing and releasing keys', () => {
     expect(getEventSnapshot()).toMatchInlineSnapshot(`
       Events fired on: input[value=""]
 
-      input[value=""] - keydown: ArrowLeft (37)
-      input[value=""] - keyup: ArrowLeft (37)
-      input[value=""] - keydown: ArrowLeft (37)
-      input[value=""] - keyup: ArrowLeft (37)
+      input[value=""] - keydown: ArrowLeft
+      input[value=""] - keyup: ArrowLeft
+      input[value=""] - keydown: ArrowLeft
+      input[value=""] - keyup: ArrowLeft
     `)
   })
 
@@ -54,8 +54,8 @@ describe('pressing and releasing keys', () => {
     expect(getEventSnapshot()).toMatchInlineSnapshot(`
       Events fired on: input[value="a"]
 
-      input[value=""] - keydown: a (97)
-      input[value=""] - keypress: a (97)
+      input[value=""] - keydown: a
+      input[value=""] - keypress: a
       input[value="a"] - input
     `)
   })
@@ -70,11 +70,11 @@ describe('pressing and releasing keys', () => {
     expect(getEventSnapshot()).toMatchInlineSnapshot(`
       Events fired on: input[value="aa"]
 
-      input[value=""] - keydown: a (97)
-      input[value=""] - keypress: a (97)
+      input[value=""] - keydown: a
+      input[value=""] - keypress: a
       input[value="a"] - input
-      input[value="a"] - keydown: a (97)
-      input[value="a"] - keypress: a (97)
+      input[value="a"] - keydown: a
+      input[value="a"] - keypress: a
       input[value="aa"] - input
     `)
   })
@@ -89,13 +89,13 @@ describe('pressing and releasing keys', () => {
     expect(getEventSnapshot()).toMatchInlineSnapshot(`
       Events fired on: input[value="aa"]
 
-      input[value=""] - keydown: a (97)
-      input[value=""] - keypress: a (97)
+      input[value=""] - keydown: a
+      input[value=""] - keypress: a
       input[value="a"] - input
-      input[value="a"] - keydown: a (97)
-      input[value="a"] - keypress: a (97)
+      input[value="a"] - keydown: a
+      input[value="a"] - keypress: a
       input[value="aa"] - input
-      input[value="aa"] - keyup: a (97)
+      input[value="aa"] - keyup: a
     `)
   })
 
@@ -109,26 +109,26 @@ describe('pressing and releasing keys', () => {
     expect(getEventSnapshot()).toMatchInlineSnapshot(`
       Events fired on: input[value="aabbcc"]
 
-      input[value=""] - keydown: a (97)
-      input[value=""] - keypress: a (97)
+      input[value=""] - keydown: a
+      input[value=""] - keypress: a
       input[value="a"] - input
-      input[value="a"] - keydown: a (97)
-      input[value="a"] - keypress: a (97)
+      input[value="a"] - keydown: a
+      input[value="a"] - keypress: a
       input[value="aa"] - input
-      input[value="aa"] - keydown: b (98)
-      input[value="aa"] - keypress: b (98)
+      input[value="aa"] - keydown: b
+      input[value="aa"] - keypress: b
       input[value="aab"] - input
-      input[value="aab"] - keydown: b (98)
-      input[value="aab"] - keypress: b (98)
+      input[value="aab"] - keydown: b
+      input[value="aab"] - keypress: b
       input[value="aabb"] - input
-      input[value="aabb"] - keyup: b (98)
-      input[value="aabb"] - keydown: c (99)
-      input[value="aabb"] - keypress: c (99)
+      input[value="aabb"] - keyup: b
+      input[value="aabb"] - keydown: c
+      input[value="aabb"] - keypress: c
       input[value="aabbc"] - input
-      input[value="aabbc"] - keydown: c (99)
-      input[value="aabbc"] - keypress: c (99)
+      input[value="aabbc"] - keydown: c
+      input[value="aabbc"] - keypress: c
       input[value="aabbcc"] - input
-      input[value="aabbcc"] - keyup: a (97)
+      input[value="aabbcc"] - keyup: a
     `)
   })
 })