Skip to content

Commit 9767005

Browse files
authored
Add .keyboard method to user-event page (#850)
1 parent e596b05 commit 9767005

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed

docs/ecosystem-user-event.mdx

+70
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,76 @@ test('types into the input', () => {
204204
})
205205
```
206206
207+
### `keyboard(text, options)`
208+
209+
Simulates the keyboard events described by `text`. This is similar to
210+
`userEvent.type()` but without any clicking or changing the selection range.
211+
212+
> You should use `userEvent.keyboard` if you want to just simulate pressing
213+
> buttons on the keyboard. You should use `userEvent.type` if you just want to
214+
> conveniently insert some text into an input field or textarea.
215+
216+
Keystrokes can be described:
217+
218+
- Per printable character
219+
```js
220+
userEvent.keyboard('foo') // translates to: f, o, o
221+
```
222+
The brackets `{` and `[` are used as special character and can be referenced
223+
by doubling them.
224+
```js
225+
userEvent.keyboard('{{a[[') // translates to: {, a, [
226+
```
227+
- Per
228+
[KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
229+
(only supports alphanumeric values of `key`)
230+
```js
231+
userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
232+
```
233+
This does not keep any key pressed. So `Shift` will be lifted before pressing
234+
`f`.
235+
- Per
236+
[KeyboardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
237+
```js
238+
userEvent.keyboard('[ShiftLeft][KeyF][KeyO][KeyO]') // translates to: Shift, f, o, o
239+
```
240+
- Per legacy `userEvent.type` modifier/specialChar The modifiers like `{shift}`
241+
(note the lowercase) will automatically be kept pressed, just like before. You
242+
can cancel this behavior by adding a `/` to the end of the descriptor.
243+
```js
244+
userEvent.keyboard('{shift}{ctrl/}a{/shift}') // translates to: Shift(down), Control(down+up), a, Shift(up)
245+
```
246+
247+
Keys can be kept pressed by adding a `>` to the end of the descriptor - and
248+
lifted by adding a `/` to the beginning of the descriptor:
249+
250+
```js
251+
userEvent.keyboard('{Shift>}A{/Shift}') // translates to: Shift(down), A, Shift(up)
252+
```
253+
254+
`userEvent.keyboard` returns a keyboard state that can be used to continue
255+
keyboard operations.
256+
257+
```js
258+
const keyboardState = userEvent.keyboard('[ControlLeft>]') // keydown [ControlLeft]
259+
// ... inspect some changes ...
260+
userEvent.keyboard('a', { keyboardState }) // press [KeyA] with active ctrlKey modifier
261+
```
262+
263+
The mapping of `key` to `code` is performed by a
264+
[default key map](https://github.com/testing-library/user-event/blob/master/src/keyboard/keyMap.ts)
265+
portraying a "default" US-keyboard. You can provide your own local keyboard
266+
mapping per option.
267+
268+
```js
269+
userEvent.keyboard('?', { keyboardMap: myOwnLocaleKeyboardMap })
270+
```
271+
272+
> Future versions might try to interpolate the modifiers needed to reach a
273+
> printable key on the keyboard. E.g. Automatically pressing `{Shift}` when
274+
> CapsLock is not active and `A` is referenced. If you don't wish this behavior,
275+
> you can pass `autoModify: false` when using `userEvent.keyboard` in your code.
276+
207277
### `upload(element, file, [{ clickInit, changeInit }])`
208278

209279
Uploads file to an `<input>`. For uploading multiple files use `<input>` with

0 commit comments

Comments
 (0)