Skip to content

Commit

Permalink
docs(user-event): add skipPointerEventsCheck option
Browse files Browse the repository at this point in the history
Co-authored-by: Philipp Fritsche <ph.fritsche@gmail.com>
  • Loading branch information
jesperorb and ph-fritsche authored Oct 10, 2021
1 parent 8474904 commit 7b4705b
Showing 1 changed file with 34 additions and 9 deletions.
43 changes: 34 additions & 9 deletions docs/ecosystem-user-event.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ in

### `click(element, eventInit, options)`

Clicks `element`, depending on what `element` is clicked, calling `click()` can have different side
effects.
Clicks `element`, depending on what `element` is clicked, calling `click()` can
have different side effects.

```jsx
import React from 'react'
Expand Down Expand Up @@ -81,9 +81,24 @@ See the
constructor documentation for more options.

Note that `click` will trigger hover events before clicking. To disable this,
set the `skipHover` option to `true`. Also note that trying to click an element
with `pointer-events` being set to `"none"` (i.e. unclickable) will throw an
error.
set the `skipHover` option to `true`.

#### Pointer events options

Trying to click an element with `pointer-events` being set to `"none"` (i.e.
unclickable) will throw an error. If you want to disable this behavior you can
set `skipPointerEventsCheck` to `true`:

```js
userEvent.click(elem, undefined, {skipPointerEventsCheck: true})
```

The `skipPointerEventsCheck` option can be passed to any pointer related API including:
- [dblClick](#dblclickelement-eventinit-options)
- [hover](#hoverelement-options)
- [unhover](#unhoverelement-options)
- [selectOptions](#selectoptionselement-values-options)
- [deselectOptions](#deselectoptionselement-values-options)

### `dblClick(element, eventInit, options)`

Expand All @@ -105,6 +120,8 @@ test('double click', () => {
})
```

Note: `options` includes [Pointer events options](#pointer-events-options)

### `type(element, text, [options])`

Writes `text` inside an `<input>` or a `<textarea>`.
Expand Down Expand Up @@ -352,7 +369,7 @@ test('clear', () => {
})
```

### `selectOptions(element, values)`
### `selectOptions(element, values, options)`

Selects the specified option(s) of a `<select>` or a `<select multiple>`
element.
Expand Down Expand Up @@ -391,7 +408,9 @@ userEvent.selectOptions(screen.getByTestId('select-multiple'), [
])
```

### `deselectOptions(element, values)`
Note: `options` includes [Pointer events options](#pointer-events-options)

### `deselectOptions(element, values, options)`

Remove the selection for the specified option(s) of a `<select multiple>`
element.
Expand Down Expand Up @@ -422,6 +441,8 @@ test('deselectOptions', () => {
The `values` parameter can be either an array of values or a singular scalar
value.

Note: `options` includes [Pointer events options](#pointer-events-options)

### `tab({shift, focusTrap})`

Fires a tab event changing the document.activeElement in the same way the
Expand Down Expand Up @@ -483,7 +504,7 @@ it('should cycle elements in document tab order', () => {
})
```

### `hover(element)`
### `hover(element, options)`

Hovers over `element`.

Expand All @@ -508,12 +529,16 @@ test('hover', () => {
})
```

### `unhover(element)`
Note: `options` includes [Pointer events options](#pointer-events-options)

### `unhover(element, options)`

Unhovers out of `element`.

> See [above](#hoverelement) for an example
Note: `options` includes [Pointer events options](#pointer-events-options)

### `paste(element, text, eventInit, options)`

Allows you to simulate the user pasting some text into an input.
Expand Down

0 comments on commit 7b4705b

Please sign in to comment.