diff --git a/packages/keycodes/src/test/index.js b/packages/keycodes/src/test/index.js index d795560fcb3a7f..2d7d83249ec574 100644 --- a/packages/keycodes/src/test/index.js +++ b/packages/keycodes/src/test/index.js @@ -6,6 +6,7 @@ import { displayShortcut, rawShortcut, shortcutAriaLabel, + isKeyboardEvent, } from '../'; const isAppleOSFalse = () => false; @@ -230,3 +231,246 @@ describe( 'rawShortcut', () => { } ); } ); } ); + +describe( 'isKeyboardEvent', () => { + afterEach( () => { + while ( document.body.firstChild ) { + document.body.removeChild( document.body.firstChild ); + } + } ); + + function keyPress( target, modifiers = {} ) { + [ 'keydown', 'keypress', 'keyup' ].forEach( ( eventName ) => { + const event = new window.Event( eventName, { bubbles: true } ); + Object.assign( event, modifiers ); + target.dispatchEvent( event ); + } ); + } + + function attachEventListeners( eventHandler ) { + const attachNode = document.createElement( 'div' ); + document.body.appendChild( attachNode ); + + [ 'keydown', 'keypress', 'keyup' ].forEach( ( eventName ) => { + attachNode.addEventListener( eventName, eventHandler ); + } ); + + return attachNode; + } + + describe( 'primary', () => { + it( 'should identify modifier key when Ctrl is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + key: 'Ctrl', + } ); + } ); + + it( 'should identify modifier key when ⌘ is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + key: 'Meta', + } ); + } ); + + it( 'should identify modifier key when Ctrl + M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + key: 'm', + } ); + } ); + + it( 'should identify modifier key when ⌘M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + key: 'm', + } ); + } ); + } ); + + describe( 'primaryShift', () => { + it( 'should identify modifier key when Shift + Ctrl is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + shiftKey: true, + key: 'Ctrl', + } ); + } ); + + it( 'should identify modifier key when ⇧⌘ is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + shiftKey: true, + key: 'Meta', + } ); + } ); + + it( 'should identify modifier key when Shift + Ctrl + M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + shiftKey: true, + key: 'm', + } ); + } ); + + it( 'should identify modifier key when ⇧⌘M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + shiftKey: true, + key: 'm', + } ); + } ); + } ); + + describe( 'secondary', () => { + it( 'should identify modifier key when Shift + Alt + Ctrl is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + shiftKey: true, + altKey: true, + key: 'Ctrl', + } ); + } ); + + it( 'should identify modifier key when ⇧⌥⌘ is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + shiftKey: true, + altKey: true, + key: 'Meta', + } ); + } ); + + it( 'should identify modifier key when Shift + Ctrl + ALt + M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + shiftKey: true, + altKey: true, + key: 'm', + } ); + } ); + + it( 'should identify modifier key when ⇧⌥⌘M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + shiftKey: true, + altKey: true, + key: 'm', + } ); + } ); + } ); + + describe( 'access', () => { + it( 'should identify modifier key when Alt + Ctrl is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + altKey: true, + key: 'Ctrl', + } ); + } ); + + it( 'should identify modifier key when ⌥⌘ is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, undefined, isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + altKey: true, + key: 'Meta', + } ); + } ); + + it( 'should identify modifier key when Ctrl + ALt + M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSFalse ) ).toBe( true ); + } ); + + keyPress( attachNode, { + ctrlKey: true, + altKey: true, + key: 'm', + } ); + } ); + + it( 'should identify modifier key when ⌥⌘M is pressed', () => { + expect.assertions( 3 ); + const attachNode = attachEventListeners( ( event ) => { + expect( isKeyboardEvent.primary( event, 'm', isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + altKey: true, + key: 'm', + } ); + } ); + } ); +} );