diff --git a/packages/keycodes/src/test/index.js b/packages/keycodes/src/test/index.js index 2d7d83249ec574..87fdb10ac81165 100644 --- a/packages/keycodes/src/test/index.js +++ b/packages/keycodes/src/test/index.js @@ -7,6 +7,7 @@ import { rawShortcut, shortcutAriaLabel, isKeyboardEvent, + isKeyboardModifierEvent, } from '../'; const isAppleOSFalse = () => false; @@ -474,3 +475,246 @@ describe( 'isKeyboardEvent', () => { } ); } ); } ); + +describe( 'isKeyboardModifierEvent', () => { + 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, 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( isKeyboardModifierEvent.primary( event, isAppleOSTrue ) ).toBe( true ); + } ); + + keyPress( attachNode, { + metaKey: true, + altKey: true, + key: 'm', + } ); + } ); + } ); +} );