Skip to content

docs(user-event): add example to prepend text with type #952

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

Merged
MatanBobi merged 3 commits into from
Feb 6, 2022
Merged

docs(user-event): add example to prepend text with type #952

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
16e296b
docs(user-event): fix formatting
msmolens Oct 14, 2021
4081368
docs(user-event): add example to prepend text with `type`
msmolens Oct 14, 2021
b25092e
docs(user-event): simplify 'prepend text' example
msmolens Feb 4, 2022
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
27 changes: 26 additions & 1 deletion docs/ecosystem-user-event.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ set `skipPointerEventsCheck` to `true`:
userEvent.click(elem, undefined, {skipPointerEventsCheck: true})
```

The `skipPointerEventsCheck` option can be passed to any pointer related API including:
The `skipPointerEventsCheck` option can be passed to any pointer related API
including:

- [dblClick](#dblclickelement-eventinit-options)
- [hover](#hoverelement-options)
- [unhover](#unhoverelement-options)
Expand Down Expand Up @@ -204,6 +206,29 @@ test('delete characters within the selectedRange', () => {
userEvent.type(input, '{backspace}good')

expect(input).toHaveValue('This is a good example')
```

By default, `type` appends to the existing text. To prepend text, reset the
element's selection range and provide the `initialSelectionStart` and
`initialSelectionEnd` options:

```jsx
import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('prepend text', () => {
render(<input defaultValue="World!"/>)
const element = screen.getByRole('textbox')

// Prepend text
element.setSelectionRange(0, 0)
userEvent.type(element, 'Hello, ', {
initialSelectionStart: 0,
initialSelectionEnd: 0,
})

expect(element).toHaveValue('Hello, World!')
})
```

Expand Down