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.

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

Feat/toggleSelectOptions #252

Merged
merged 9 commits into from Jun 5, 2020
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
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
40 changes: 39 additions & 1 deletion README.md
Expand Up @@ -50,7 +50,6 @@ 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 All @@ -59,6 +58,7 @@ change the state of the checkbox.
- [`upload(element, file, [{ clickInit, changeInit }])`](#uploadelement-file--clickinit-changeinit-)
- [`clear(element)`](#clearelement)
- [`selectOptions(element, values)`](#selectoptionselement-values)
- [`toggleSelectOptions(element, values)`](#toggleselectoptionselement-values)
- [`tab({shift, focusTrap})`](#tabshift-focustrap)
- [Issues](#issues)
- [🐛 Bugs](#-bugs)
Expand Down Expand Up @@ -308,6 +308,44 @@ userEvent.selectOptions(screen.getByTestId('select-multiple'), [
])
```

### `toggleSelectOptions(element, values)`

Toggle the specified option(s) of a `<select multiple>` element.

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

test('toggleSelectOptions', () => {
render(
<select multiple value={['1']} data-testid="select-multiple">
<option data-testid="val1" value="1">
A
</option>
<option data-testid="val2" value="2">
B
</option>
<option data-testid="val3" value="3">
C
</option>
</select>,
)

userEvent.toggleSelectOptions(screen.getByTestId('select-multiple'), [
'1',
'3',
])

expect(screen.getByTestId('val1').selected).toBe(false) // selected becomes unselected
expect(screen.getByTestId('val2').selected).toBe(false) // unaffected
expect(screen.getByTestId('val3').selected).toBe(true) // unselected becomes selected
malcolm-kee marked this conversation as resolved.
Show resolved Hide resolved
})
```

The `values` parameter can be either an array of values or a singular scalar
value.

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

Fires a tab event changing the document.activeElement in the same way the
Expand Down
103 changes: 54 additions & 49 deletions src/__tests__/dblclick.js
Expand Up @@ -205,15 +205,16 @@ test('should not blur when mousedown prevents default', () => {
])
})


it('should fire mouse events with the correct properties', () => {
const events = []
const eventsHandler = jest.fn(evt => events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail
}))
const eventsHandler = jest.fn(evt =>
events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail,
}),
)
render(
<div
data-testid="div"
Expand All @@ -233,68 +234,70 @@ it('should fire mouse events with the correct properties', () => {
type: 'mouseover',
button: 0,
buttons: 0,
detail: 0
detail: 0,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
detail: 0
detail: 0,
},
{
type: 'mousedown',
button: 0,
buttons: 1,
detail: 1
detail: 1,
},
{
type: 'mouseup',
button: 0,
buttons: 1,
detail: 1
detail: 1,
},
{
type: 'click',
button: 0,
buttons: 1,
detail: 1
detail: 1,
},
{
type: 'mousedown',
button: 0,
buttons: 1,
detail: 2
detail: 2,
},
{
type: 'mouseup',
button: 0,
buttons: 1,
detail: 2
detail: 2,
},
{
type: 'click',
button: 0,
buttons: 1,
detail: 2
detail: 2,
},
{
type: 'dblclick',
button: 0,
buttons: 1,
detail: 2
detail: 2,
},
])
})

it('should fire mouse events with custom button property', () => {
const events = []
const eventsHandler = jest.fn(evt => events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail,
altKey: evt.altKey
}))
const eventsHandler = jest.fn(evt =>
events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail,
altKey: evt.altKey,
}),
)
render(
<div
data-testid="div"
Expand All @@ -310,7 +313,7 @@ it('should fire mouse events with custom button property', () => {

userEvent.dblClick(screen.getByTestId('div'), {
button: 1,
altKey: true
altKey: true,
})

expect(events).toEqual([
Expand All @@ -319,75 +322,77 @@ it('should fire mouse events with custom button property', () => {
button: 0,
buttons: 0,
detail: 0,
altKey: true
altKey: true,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
detail: 0,
altKey: true
altKey: true,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
detail: 1,
altKey: true
altKey: true,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
detail: 1,
altKey: true
altKey: true,
},
{
type: 'click',
button: 1,
buttons: 4,
detail: 1,
altKey: true
altKey: true,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
detail: 2,
altKey: true
altKey: true,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
detail: 2,
altKey: true
altKey: true,
},
{
type: 'click',
button: 1,
buttons: 4,
detail: 2,
altKey: true
altKey: true,
},
{
type: 'dblclick',
button: 1,
buttons: 4,
detail: 2,
altKey: true
altKey: true,
},
])
})

it('should fire mouse events with custom buttons property', () => {
const events = []
const eventsHandler = jest.fn(evt => events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail
}))
const eventsHandler = jest.fn(evt =>
events.push({
type: evt.type,
button: evt.button,
buttons: evt.buttons,
detail: evt.detail,
}),
)
render(
<div
data-testid="div"
Expand All @@ -402,63 +407,63 @@ it('should fire mouse events with custom buttons property', () => {
)

userEvent.dblClick(screen.getByTestId('div'), {
buttons: 4
buttons: 4,
})

expect(events).toEqual([
{
type: 'mouseover',
button: 0,
buttons: 0,
detail: 0
detail: 0,
},
{
type: 'mousemove',
button: 0,
buttons: 0,
detail: 0
detail: 0,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
detail: 1
detail: 1,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
detail: 1
detail: 1,
},
{
type: 'click',
button: 1,
buttons: 4,
detail: 1
detail: 1,
},
{
type: 'mousedown',
button: 1,
buttons: 4,
detail: 2
detail: 2,
},
{
type: 'mouseup',
button: 1,
buttons: 4,
detail: 2
detail: 2,
},
{
type: 'click',
button: 1,
buttons: 4,
detail: 2
detail: 2,
},
{
type: 'dblclick',
button: 1,
buttons: 4,
detail: 2
detail: 2,
},
])
})
2 changes: 1 addition & 1 deletion src/__tests__/helpers/utils.js
Expand Up @@ -181,4 +181,4 @@ afterEach(() => {
eventListeners = []
})

export {setup, addEventListener}
export {setup, addEventListener, addListeners}