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(type): support special charaters (like {enter}) #308

Merged
merged 4 commits into from Jun 4, 2020
Merged

feat(type): support special charaters (like {enter}) #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b6c1bd6
feat(type): support special charaters (like {enter})
kentcdodds Jun 4, 2020
20a6751
simplify tests
kentcdodds Jun 4, 2020
7f08cc3
start using the setup util in other tests
kentcdodds Jun 4, 2020
1cf8743
add link
kentcdodds Jun 4, 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
32 changes: 30 additions & 2 deletions README.md
View file
Open in desktop
Expand Up @@ -50,6 +50,7 @@ change the state of the checkbox.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [API](#api)
- [`click(element)`](#clickelement)
Expand Down Expand Up @@ -158,8 +159,8 @@ import userEvent from '@testing-library/user-event'
test('type', async () => {
render(<textarea />)

await userEvent.type(screen.getByRole('textbox'), 'Hello, World!')
expect(screen.getByRole('textbox')).toHaveAttribute('value', 'Hello, World!')
await userEvent.type(screen.getByRole('textbox'), 'Hello,{enter}World!')
expect(screen.getByRole('textbox')).toHaveValue('Hello,\nWorld!')
})
```

Expand All @@ -170,6 +171,32 @@ one character at the time. `false` is the default value.
are typed. By default it's 0. You can use this option if your component has a
different behavior for fast or slow users.

#### Special characters

The following special character strings are supported:

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

> **A note about modifiers:** Modifier keys (`{shift}`, `{ctrl}`, `{alt}`,
> `{meta}`) will activate their corresponding event modifiers for the duration
> of type command or until they are closed (via `{/shift}`, `{/ctrl}`, etc.).
Copy link
Collaborator

Choose a reason for hiding this comment

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

I do like the extra control we get here by adding {/shift} (compared to cypress), but worry that maybe it's a bit too verbose for most use cases.

Perhaps you could release modifier keys at the end of the type statement if no closing modifiers are provided? That could be the best of both worlds. I don't think there's any use case for keeping these keys held down at the end of a type statement (since you don't get the event modifiers after it's done).


<!-- space out these notes -->

> We take the same
> [stance as Cypress](https://docs.cypress.io/api/commands/type.html#Modifiers)
> in that we do not simulate the behavior that happens with modifier key
> combinations as different operating systems function differently in this
> regard.

### `upload(element, file, [{ clickInit, changeInit }])`

Uploads file to an `<input>`. For uploading multiple files use `<input>` with
Expand Down Expand Up @@ -411,6 +438,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