Support arrowup and arrowdown events

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]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

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('<input />')
+  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('<input />')
+  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,
+    }),
+  )
+})

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}