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

Jump to bottom

feat: add capslock to userEvent.type #507

Merged
merged 6 commits into from
Nov 30, 2020
Merged

feat: add capslock to userEvent.type #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0e44292
feat: add capslock to userEvent.type
Sonic12040 Nov 30, 2020
007ce22
docs(type-modifier): Added CapsLock to the modifier key documentation
Sonic12040 Nov 30, 2020
6f1335b
fix: added a switch/case for the CapsLock key, in case there are othe…
Sonic12040 Nov 30, 2020
f56db31
fix: separate the CapsLock modifier from the regular modifier callbac…
Sonic12040 Nov 30, 2020
9cfbb8f
fix: inlined capslock functions
Sonic12040 Nov 30, 2020
f978e9e
Update README.md
kentcdodds Nov 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
37 changes: 19 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,14 @@ import userEvent from '@testing-library/user-event'

// or

const { default: userEvent } = require('@testing-library/user-event')
const {default: userEvent} = require('@testing-library/user-event')
```

## API

Note: All userEvent methods are synchronous with one exception: when `delay`
with `userEvent.type` as described below). We also discourage using
`userEvent` inside `before/after` blocks at all, for important reasons
described in
with `userEvent.type` as described below). We also discourage using `userEvent`
inside `before/after` blocks at all, for important reasons described in
["Avoid Nesting When You're Testing"](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing).

### `click(element, eventInit, options)`
Expand Down Expand Up @@ -189,20 +188,21 @@ to `await`!

The following special character strings are supported:

| Text string | Key | Modifier | Notes |
| -------------- | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{enter}` | Enter | N/A | Will insert a newline character (`<textarea />` only). |
| `{space}` | `' '` | N/A | |
| `{esc}` | Escape | N/A | |
| `{backspace}` | Backspace | N/A | Will delete the previous character (or the characters within the `selectedRange`, see example below). |
| `{del}` | Delete | N/A | Will delete the next character (or the characters within the `selectedRange`, see example below) |
| `{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 | |
| `{shift}` | Shift | `shiftKey` | Does **not** capitalize following characters. |
| `{ctrl}` | Control | `ctrlKey` | |
| `{alt}` | Alt | `altKey` | |
| `{meta}` | OS | `metaKey` | |
| Text string | Key | Modifier | Notes |
| -------------- | ---------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{enter}` | Enter | N/A | Will insert a newline character (`<textarea />` only). |
| `{space}` | `' '` | N/A | |
| `{esc}` | Escape | N/A | |
| `{backspace}` | Backspace | N/A | Will delete the previous character (or the characters within the `selectedRange`, see example below). |
| `{del}` | Delete | N/A | Will delete the next character (or the characters within the `selectedRange`, see example below) |
| `{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 | |
| `{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). |

> **A note about modifiers:** Modifier keys (`{shift}`, `{ctrl}`, `{alt}`,
> `{meta}`) will activate their corresponding event modifiers for the duration
Expand Down Expand Up @@ -609,6 +609,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
33 changes: 33 additions & 0 deletions src/__tests__/type-modifiers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,39 @@ test('{shift}a{/shift}', () => {
`)
})

test('{capslock}a{/capslock}', () => {
const {element, getEventSnapshot} = setup('<input />')

userEvent.type(element, '{capslock}a{/capslock}')

expect(getEventSnapshot()).toMatchInlineSnapshot(`
Events fired on: input[value="a"]

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: CapsLock (20)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this one is tricky. Basically for caps lock, it should keydown and keyup here, but preserve the modifier state. Hmmm...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, do you think a PR will also be needed to fireEvent for the case of CapsLock?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, fireEvent is all about dispatching individual events in complete isolation. It is not concerned about state. This will only need to happen here in user-event. It's possible we won't be able to re-use the existing createModifierCallbackEntries for this one.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scratch that. Updated with a switch/case. I'm not sure if it's initially beneficial to write it that way, but I didn't know if other modifier keys might also require the behavior at some point.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Saw the comment after. I can write a separate function for it if preferred?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sonic12040, could you try removing the custom logic and inlining it for the caps lock. I think that will result in simpler code in this case. I'm worried that this is a hasty abstraction (AHA Programming) and I think the small amount of duplication will be better.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated with a duplicate function that performs the CapsLock behavior.

input[value=""] - keyup: CapsLock (20)
input[value=""] - keydown: a (97)
input[value=""] - keypress: a (97)
input[value="a"] - input
"{CURSOR}" -> "a{CURSOR}"
input[value="a"] - keyup: a (97)
input[value="a"] - keydown: CapsLock (20)
input[value="a"] - keyup: CapsLock (20)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And then this should keydown and keyup and disable the modifier state. I'm afraid this one isn't quite as simple as I thought at first.

`)
})

test('a{enter}', () => {
const {element, getEventSnapshot} = setup('<input />')

Expand Down
41 changes: 41 additions & 0 deletions src/type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,47 @@ const modifierCallbackMap = {
keyCode: 93,
modifierProperty: 'metaKey',
}),
// capslock is inline because of the need to fire both keydown and keyup on use, while preserving the modifier state.
'{capslock}': function capslockOn({currentElement, eventOverrides}) {
const newEventOverrides = {modifierCapsLock: true}

fireEvent.keyDown(currentElement(), {
key: 'CapsLock',
keyCode: 20,
which: 20,
...eventOverrides,
...newEventOverrides,
})
fireEvent.keyUp(currentElement(), {
key: 'CapsLock',
keyCode: 20,
which: 20,
...eventOverrides,
...newEventOverrides,
})

return {eventOverrides: newEventOverrides}
},
'{/capslock}': function capslockOff({currentElement, eventOverrides}) {
const newEventOverrides = {modifierCapsLock: false}

fireEvent.keyDown(currentElement(), {
key: 'CapsLock',
keyCode: 20,
which: 20,
...eventOverrides,
...newEventOverrides,
})
fireEvent.keyUp(currentElement(), {
key: 'CapsLock',
keyCode: 20,
which: 20,
...eventOverrides,
...newEventOverrides,
})

return {eventOverrides: newEventOverrides}
},
}

const specialCharCallbackMap = {
Expand Down