fix!: remove deprecated keyboard features (#780)

* fix!: remove `specialChars` * fix!: remove `keyCode` BREAKING CHANGE: Behavior for special key descriptor `{selectall}` has been removed. BREAKING CHANGE: Support for `keyCode` property on keyboard events has been removed.
testing-library · Nov 28, 2021 · 45dc39a · 45dc39a
1 parent 1cda1b1
commit 45dc39a
Show file tree

Hide file tree

Showing 17 changed files with 614 additions and 724 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,3 @@
-import {specialCharMap} from './keyboard'
 import {userEventApis, UserEventApis, setup, UserEvent} from './setup'
 
 const userEvent: UserEventApis & {
@@ -19,5 +18,4 @@ const userEvent: UserEventApis & {
 
 export default userEvent
 
-export {specialCharMap as specialChars}
 export type {keyboardKey} from './keyboard'
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/index.ts b/src/keyboard/index.ts
@@ -4,7 +4,6 @@ import {keyboardImplementation, releaseAllKeys} from './keyboardImplementation'
 import {defaultKeyMap} from './keyMap'
 import {keyboardState, keyboardOptions, keyboardKey} from './types'
 
-export {specialCharMap} from './specialCharMap'
 export type {keyboardOptions, keyboardKey}
 
 export function keyboard(

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/keyboardImplementation.ts b/src/keyboard/keyboardImplementation.ts
@@ -21,44 +21,35 @@ export async function keyboardImplementation(
   const {keyDef, consumedLength, releasePrevious, releaseSelf, repeat} =
     state.repeatKey ?? getNextKeyDef(text, options)
 
-  const replace = applyPlugins(
-    plugins.replaceBehavior,
-    keyDef,
-    getCurrentElement(),
-    options,
-    state,
-  )
-  if (!replace) {
-    const pressed = state.pressed.find(p => p.keyDef === keyDef)
-
-    // Release the key automatically if it was pressed before.
-    // Do not release the key on iterations on `state.repeatKey`.
-    if (pressed && !state.repeatKey) {
-      keyup(
-        keyDef,
-        getCurrentElement,
-        options,
-        state,
-        pressed.unpreventedDefault,
-      )
+  const pressed = state.pressed.find(p => p.keyDef === keyDef)
+
+  // Release the key automatically if it was pressed before.
+  // Do not release the key on iterations on `state.repeatKey`.
+  if (pressed && !state.repeatKey) {
+    keyup(
+      keyDef,
+      getCurrentElement,
+      options,
+      state,
+      pressed.unpreventedDefault,
+    )
+  }
+
+  if (!releasePrevious) {
+    const unpreventedDefault = keydown(
+      keyDef,
+      getCurrentElement,
+      options,
+      state,
+    )
+
+    if (unpreventedDefault && hasKeyPress(keyDef, state)) {
+      keypress(keyDef, getCurrentElement, options, state)
     }
 
-    if (!releasePrevious) {
-      const unpreventedDefault = keydown(
-        keyDef,
-        getCurrentElement,
-        options,
-        state,
-      )
-
-      if (unpreventedDefault && hasKeyPress(keyDef, state)) {
-        keypress(keyDef, getCurrentElement, options, state)
-      }
-
-      // Release the key only on the last iteration on `state.repeatKey`.
-      if (releaseSelf && repeat <= 1) {
-        keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
-      }
+    // Release the key only on the last iteration on `state.repeatKey`.
+    if (releaseSelf && repeat <= 1) {
+      keyup(keyDef, getCurrentElement, options, state, unpreventedDefault)
     }
   }
 

diff --git a/src/keyboard/plugins/index.ts b/src/keyboard/plugins/index.ts
@@ -1,26 +1,10 @@
 import {behaviorPlugin} from '../types'
-import {getValue, isElementType, setSelectionRange} from '../../utils'
 import * as arrowKeys from './arrow'
 import * as controlKeys from './control'
 import * as characterKeys from './character'
 import * as functionalKeys from './functional'
 import * as combination from './combination'
 
-export const replaceBehavior: behaviorPlugin[] = [
-  {
-    matches: (keyDef, element) =>
-      keyDef.key === 'selectall' &&
-      isElementType(element, ['input', 'textarea']),
-    handle: (keyDef, element) => {
-      setSelectionRange(
-        element,
-        0,
-        getValue(element as HTMLInputElement).length,
-      )
-    },
-  },
-]
-
 export const preKeydownBehavior: behaviorPlugin[] = [
   ...functionalKeys.preKeydownBehavior,
 ]

diff --git a/src/keyboard/specialCharMap.ts b/src/keyboard/specialCharMap.ts
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
   `)
 })