Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support arrowup and arrowdown events #511

Merged
merged 5 commits into from
Dec 3, 2020
Merged

Support arrowup and arrowdown events #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19fdddb
added support for arrowup and arrowdown
corymharper Dec 2, 2020
6ec938e
added tests for arrowup and arrowdown
corymharper Dec 2, 2020
6785442
added documentation
corymharper Dec 2, 2020
33a498c
refactored tests to use event snapshot
corymharper Dec 3, 2020
8e123a2
resolved merge conflicts
corymharper Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
52 changes: 52 additions & 0 deletions src/__tests__/type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
`)
})
40 changes: 40 additions & 0 deletions src/type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ const modifierCallbackMap = {
const specialCharCallbackMap = {
'{arrowleft}': navigationKey('ArrowLeft'),
'{arrowright}': navigationKey('ArrowRight'),
'{arrowdown}': handleArrowDown,
'{arrowup}': handleArrowUp,
'{enter}': handleEnter,
'{esc}': handleEsc,
'{del}': handleDel,
Expand Down Expand Up @@ -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}