Allow keyboardMap option to include keyCodes to support testing third party code still using keyCode

[ewylie25]

Problem description

We updated to user-event v14 and discovered we could no longer use user-event's keyboard or type for many keyboard events since a third party dependency (Microsoft's Fluent UI react) is reliant on keyCode in determining how to handle keyboard events in some of their components.

I've opened a ticket in the fluent ui repo but this means we can only test with fireEvent until/if they update their code base.

Suggested solution

Allow keyCodes to be set/passed in the key mappings passed in the keyboardMap option at setup. This way we can conditionally set keyCodes if we need them and aren't stuck using fireEvent for legacy code.

I tried to see if this was already possible but noticed the keyboardKey interface didn't include a keyCode property and passing any didn't work for me.

Additional context

No response

[ph-fritsche]

You can work around by patching the respective key events in the test suites for legacy code.
I think this is preferable to reintroducing support for deprecated features, the use of which we want to discourage.

const keyCodes = {
  Tab: 9,
}
function patchKeyEvent(e) {
  Object.defineProperty(e, 'keyCode', {
    get: () => keyCodes[e.code] ?? 0,
  })
}
document.addEventListener('keydown', patchKeyEvent, {capture: true})

[outoftime]

Here’s a rough-and-ready map, generated from the this table on freecodecamp:

const keyCodes = {
    Backspace: 8,
    Tab: 9,
    Enter: 13,
    ShiftLeft: 16,
    ShiftRight: 16,
    ControlLeft: 17,
    ControlRight: 17,
    AltLeft: 18,
    AltRight: 18,
    Pause: 19,
    CapsLock: 20,
    Escape: 27,
    Space: 32,
    PageUp: 33,
    PageDown: 34,
    End: 35,
    Home: 36,
    ArrowLeft: 37,
    ArrowUp: 38,
    ArrowRight: 39,
    ArrowDown: 40,
    PrintScreen: 44,
    Insert: 45,
    Delete: 46,
    Digit0: 48,
    Digit1: 49,
    Digit2: 50,
    Digit3: 51,
    Digit4: 52,
    Digit5: 53,
    Digit6: 54,
    Digit7: 55,
    Digit8: 56,
    Digit9: 57,
    KeyA: 65,
    KeyB: 66,
    KeyC: 67,
    KeyD: 68,
    KeyE: 69,
    KeyF: 70,
    KeyG: 71,
    KeyH: 72,
    KeyI: 73,
    KeyJ: 74,
    KeyK: 75,
    KeyL: 76,
    KeyM: 77,
    KeyN: 78,
    KeyO: 79,
    KeyP: 80,
    KeyQ: 81,
    KeyR: 82,
    KeyS: 83,
    KeyT: 84,
    KeyU: 85,
    KeyV: 86,
    KeyW: 87,
    KeyX: 88,
    KeyY: 89,
    KeyZ: 90,
    MetaLeft: 91,
    MetaRight: 92,
    ContextMenu: 93,
    Numpad0: 96,
    Numpad1: 97,
    Numpad2: 98,
    Numpad3: 99,
    Numpad4: 100,
    Numpad5: 101,
    Numpad6: 102,
    Numpad7: 103,
    Numpad8: 104,
    Numpad9: 105,
    NumpadMultiply: 106,
    NumpadAdd: 107,
    NumpadSubtract: 109,
    NumpadDecimal: 110,
    NumpadDivide: 111,
    F1: 112,
    F2: 113,
    F3: 114,
    F4: 115,
    F5: 116,
    F6: 117,
    F7: 118,
    F8: 119,
    F9: 120,
    F10: 121,
    F11: 122,
    F12: 123,
    NumLock: 144,
    ScrollLock: 145,
    '': 173,
    Semicolon: 186,
    Equal: 187,
    Comma: 188,
    Minus: 189,
    Period: 190,
    Slash: 191,
    Backquote: 192,
    BracketLeft: 219,
    Backslash: 220,
    BracketRight: 221,
    Quote: 222,
};