From ecea19c2b4b07967067dc501f9e2876c040719d7 Mon Sep 17 00:00:00 2001
From: Cory Harper <42228018+corymharper@users.noreply.github.com>
Date: Thu, 3 Dec 2020 12:53:06 -0600
Subject: [PATCH] feat: support arrowup and arrowdown events (#511)
---
README.md | 5 ++++-
src/__tests__/type.js | 52 +++++++++++++++++++++++++++++++++++++++++++
src/type.js | 40 +++++++++++++++++++++++++++++++++
3 files changed, 96 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 48538d52..ed27b08d 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
@@ -637,6 +639,7 @@ Thanks goes to these people ([emoji key][emojis]):
+
This project follows the [all-contributors][all-contributors] specification.
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
index d1f8be56..70a55d4b 100644
--- a/src/__tests__/type.js
+++ b/src/__tests__/type.js
@@ -1393,3 +1393,55 @@ test('can type two digits in the hours section, bigger than 24 and less than 30,
expect(element.value).toBe('23:52')
})
+
+test('{arrowdown} fires keyup/keydown events', () => {
+ const {element, getEventSnapshot} = setup('')
+
+ userEvent.type(element, '{arrowdown}')
+
+ 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, getEventSnapshot} = setup('')
+
+ userEvent.type(element, '{arrowup}')
+
+ 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)
+ `)
+})
diff --git a/src/type.js b/src/type.js
index 47089207..4a41055c 100644
--- a/src/type.js
+++ b/src/type.js
@@ -90,6 +90,8 @@ const modifierCallbackMap = {
const specialCharCallbackMap = {
'{arrowleft}': navigationKey('ArrowLeft'),
'{arrowright}': navigationKey('ArrowRight'),
+ '{arrowdown}': handleArrowDown,
+ '{arrowup}': handleArrowUp,
'{enter}': handleEnter,
'{esc}': handleEsc,
'{del}': handleDel,
@@ -733,4 +735,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}