From 19fdddb238b71ffbd84306b3dc7187face3836ed Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Wed, 2 Dec 2020 14:30:18 -0600 Subject: [PATCH 1/4] added support for arrowup and arrowdown --- src/type.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/type.js b/src/type.js index c7c0f58b..d862f571 100644 --- a/src/type.js +++ b/src/type.js @@ -88,6 +88,8 @@ const modifierCallbackMap = { const specialCharCallbackMap = { '{arrowleft}': navigationKey('ArrowLeft'), '{arrowright}': navigationKey('ArrowRight'), + '{arrowdown}': handleArrowDown, + '{arrowup}': handleArrowUp, '{enter}': handleEnter, '{esc}': handleEsc, '{del}': handleDel, @@ -711,4 +713,42 @@ function handleSpaceOnClickable({currentElement, eventOverrides}) { } } +function handleArrowDown({currentElement, eventOverrides}) { + const key = 'ArrowDown' + const keyCode = 40 + + fireEvent.keyDown(currentElement(), { + key, + keyCode, + which: keyCode, + ...eventOverrides, + }) + + fireEvent.keyUp(currentElement(), { + key, + keyCode, + which: keyCode, + ...eventOverrides, + }) +} + +function handleArrowUp({currentElement, eventOverrides}) { + const key = 'ArrowUp' + const keyCode = 38 + + fireEvent.keyDown(currentElement(), { + key, + keyCode, + which: keyCode, + ...eventOverrides, + }) + + fireEvent.keyUp(currentElement(), { + key, + keyCode, + which: keyCode, + ...eventOverrides, + }) +} + export {type} From 6ec938ed59a2ea76bc964491c1816a8324eba255 Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Wed, 2 Dec 2020 14:32:27 -0600 Subject: [PATCH 2/4] added tests for arrowup and arrowdown --- src/__tests__/type.js | 56 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/src/__tests__/type.js b/src/__tests__/type.js index bc8e0191..72bb9177 100644 --- a/src/__tests__/type.js +++ b/src/__tests__/type.js @@ -1066,3 +1066,59 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => { input[value="abc"] - keyup: c (99) `) }) + +test('{arrowdown} fires keyup/keydown events', () => { + const {element} = setup('') + const handleKeyDown = jest.fn() + const handleKeyUp = jest.fn() + + addListeners(element, { + eventHandlers: { + keyDown: handleKeyDown, + keyUp: handleKeyUp, + }, + }) + + userEvent.type(element, '{arrowdown}') + + expect(handleKeyDown).toHaveBeenCalledWith( + expect.objectContaining({ + key: 'ArrowDown', + keyCode: 40, + }), + ) + expect(handleKeyUp).toHaveBeenCalledWith( + expect.objectContaining({ + key: 'ArrowDown', + keyCode: 40, + }), + ) +}) + +test('{arrowup} fires keyup/keydown events', () => { + const {element} = setup('') + const handleKeyDown = jest.fn() + const handleKeyUp = jest.fn() + + addListeners(element, { + eventHandlers: { + keyDown: handleKeyDown, + keyUp: handleKeyUp, + }, + }) + + userEvent.type(element, '{arrowup}') + + expect(handleKeyDown).toHaveBeenCalledWith( + expect.objectContaining({ + key: 'ArrowUp', + keyCode: 38, + }), + ) + expect(handleKeyUp).toHaveBeenCalledWith( + expect.objectContaining({ + key: 'ArrowUp', + keyCode: 38, + }), + ) +}) From 6785442675ace15b74660dc9fde123e1ff51f965 Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Wed, 2 Dec 2020 14:34:16 -0600 Subject: [PATCH 3/4] added documentation --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1d7bbab6..c897d6df 100644 --- a/README.md +++ b/README.md @@ -198,11 +198,13 @@ The following special character strings are supported: | `{selectall}` | N/A | N/A | Selects all the text of the element. Note that this will only work for elements that support selection ranges (so, not `email`, `password`, `number`, among others) | | `{arrowleft}` | ArrowLeft | N/A | | | `{arrowright}` | ArrowRight | N/A | | +| `{arrowup}` | ArrowUp | N/A | | +| `{arrowdown}` | ArrowDown | N/A | | | `{shift}` | Shift | `shiftKey` | Does **not** capitalize following characters. | | `{ctrl}` | Control | `ctrlKey` | | | `{alt}` | Alt | `altKey` | | | `{meta}` | OS | `metaKey` | | -| `{capslock}` | CapsLock | `modifierCapsLock` | Fires both keydown and keyup when used (simulates a user clicking their "Caps Lock" button to enable caps lock). | +| `{capslock}` | CapsLock | `modifierCapsLock` | Fires both keydown and keyup when used (simulates a user clicking their "Caps Lock" button to enable caps lock). | > **A note about modifiers:** Modifier keys (`{shift}`, `{ctrl}`, `{alt}`, > `{meta}`) will activate their corresponding event modifiers for the duration @@ -610,6 +612,7 @@ Thanks goes to these people ([emoji key][emojis]): + This project follows the [all-contributors][all-contributors] specification. From 33a498c2e521ba3151c65e3e318c86328afe952e Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Thu, 3 Dec 2020 11:21:38 -0600 Subject: [PATCH 4/4] refactored tests to use event snapshot --- src/__tests__/type.js | 84 +++++++++++++++++++++---------------------- 1 file changed, 40 insertions(+), 44 deletions(-) diff --git a/src/__tests__/type.js b/src/__tests__/type.js index 72bb9177..f0968962 100644 --- a/src/__tests__/type.js +++ b/src/__tests__/type.js @@ -1068,57 +1068,53 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => { }) test('{arrowdown} fires keyup/keydown events', () => { - const {element} = setup('') - const handleKeyDown = jest.fn() - const handleKeyUp = jest.fn() - - addListeners(element, { - eventHandlers: { - keyDown: handleKeyDown, - keyUp: handleKeyUp, - }, - }) + const {element, getEventSnapshot} = setup('') userEvent.type(element, '{arrowdown}') - expect(handleKeyDown).toHaveBeenCalledWith( - expect.objectContaining({ - key: 'ArrowDown', - keyCode: 40, - }), - ) - expect(handleKeyUp).toHaveBeenCalledWith( - expect.objectContaining({ - key: 'ArrowDown', - keyCode: 40, - }), - ) + expect(getEventSnapshot()).toMatchInlineSnapshot(` + Events fired on: input[value=""] + + input[value=""] - pointerover + input[value=""] - pointerenter + input[value=""] - mouseover: Left (0) + input[value=""] - mouseenter: Left (0) + input[value=""] - pointermove + input[value=""] - mousemove: Left (0) + input[value=""] - pointerdown + input[value=""] - mousedown: Left (0) + input[value=""] - focus + input[value=""] - focusin + input[value=""] - pointerup + input[value=""] - mouseup: Left (0) + input[value=""] - click: Left (0) + input[value=""] - keydown: ArrowDown (40) + input[value=""] - keyup: ArrowDown (40) + `) }) test('{arrowup} fires keyup/keydown events', () => { - const {element} = setup('') - const handleKeyDown = jest.fn() - const handleKeyUp = jest.fn() - - addListeners(element, { - eventHandlers: { - keyDown: handleKeyDown, - keyUp: handleKeyUp, - }, - }) + const {element, getEventSnapshot} = setup('') userEvent.type(element, '{arrowup}') - expect(handleKeyDown).toHaveBeenCalledWith( - expect.objectContaining({ - key: 'ArrowUp', - keyCode: 38, - }), - ) - expect(handleKeyUp).toHaveBeenCalledWith( - expect.objectContaining({ - key: 'ArrowUp', - keyCode: 38, - }), - ) + expect(getEventSnapshot()).toMatchInlineSnapshot(` + Events fired on: input[value=""] + + input[value=""] - pointerover + input[value=""] - pointerenter + input[value=""] - mouseover: Left (0) + input[value=""] - mouseenter: Left (0) + input[value=""] - pointermove + input[value=""] - mousemove: Left (0) + input[value=""] - pointerdown + input[value=""] - mousedown: Left (0) + input[value=""] - focus + input[value=""] - focusin + input[value=""] - pointerup + input[value=""] - mouseup: Left (0) + input[value=""] - click: Left (0) + input[value=""] - keydown: ArrowUp (38) + input[value=""] - keyup: ArrowUp (38) + `) })