Skip to content

Commit c3082f2

Browse files
docs(user-event): add example to prepend text with type (#952)
* docs(user-event): fix formatting Run `prettier --write --parser=mdx docs/ecosystem-user-event.mdx` to fix the file's formatting. * docs(user-event): add example to prepend text with `type` Add an example that shows how to prepend text with `type`. By default, `type` appends to the existing text. To prepend text, you should reset the element's selection range and provide the `initialSelectionStart` and `initialSelectionEnd` options to `type`. * docs(user-event): simplify 'prepend text' example Co-authored-by: Philipp Fritsche <[email protected]> Co-authored-by: Philipp Fritsche <[email protected]>
1 parent 86977e9 commit c3082f2

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

docs/ecosystem-user-event.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,29 @@ test('delete characters within the selectedRange', () => {
210210
userEvent.type(input, '{backspace}good')
211211

212212
expect(input).toHaveValue('This is a good example')
213+
```
214+
215+
By default, `type` appends to the existing text. To prepend text, reset the
216+
element's selection range and provide the `initialSelectionStart` and
217+
`initialSelectionEnd` options:
218+
219+
```jsx
220+
import React from 'react'
221+
import {render, screen} from '@testing-library/react'
222+
import userEvent from '@testing-library/user-event'
223+
224+
test('prepend text', () => {
225+
render(<input defaultValue="World!"/>)
226+
const element = screen.getByRole('textbox')
227+
228+
// Prepend text
229+
element.setSelectionRange(0, 0)
230+
userEvent.type(element, 'Hello, ', {
231+
initialSelectionStart: 0,
232+
initialSelectionEnd: 0,
233+
})
234+
235+
expect(element).toHaveValue('Hello, World!')
213236
})
214237
```
215238

0 commit comments

Comments
 (0)