feat: support arrowup and arrowdown events (#511)

testing-library · Dec 3, 2020 · ecea19c · ecea19c
1 parent e9dd0a6
commit ecea19c
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git 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]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

diff --git 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('<input />')
+
+  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('<input />')
+
+  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
@@ -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}