Skip to content

Commit

Permalink
fix(selectOptions): wait after each click (#951)
Browse files Browse the repository at this point in the history
  • Loading branch information
ph-fritsche authored May 12, 2022
1 parent 6f55fee commit 7ea7a77
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 2 deletions.
12 changes: 11 additions & 1 deletion src/utility/selectOptions.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import {getConfig} from '@testing-library/dom'
import {focus, hasPointerEvents, isDisabled, isElementType} from '../utils'
import {
focus,
hasPointerEvents,
isDisabled,
isElementType,
wait,
} from '../utils'
import {Config, Instance} from '../setup'

export async function selectOptions(
Expand Down Expand Up @@ -100,6 +106,8 @@ async function selectOptionsBase(
if (withPointerEvents) {
this.dispatchUIEvent(option, 'click')
}

await wait(this[Config])
}
} else if (selectedOptions.length === 1) {
const withPointerEvents =
Expand All @@ -124,6 +132,8 @@ async function selectOptionsBase(
this.dispatchUIEvent(select, 'mouseup')
this.dispatchUIEvent(select, 'click')
}

await wait(this[Config])
} else {
throw getConfig().getElementError(
`Cannot select multiple options on a non-multiple select`,
Expand Down
3 changes: 3 additions & 0 deletions tests/react/_env/setup-env.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ if (global.REACT_VERSION) {
jest.mock('react-dom', () =>
jest.requireActual(`reactDom${global.REACT_VERSION}`),
)
jest.mock('react-dom/test-utils', () =>
jest.requireActual(`reactDom${global.REACT_VERSION}/test-utils`),
)
jest.mock('react-is', () =>
jest.requireActual(`reactIs${global.REACT_VERSION}`),
)
Expand Down
35 changes: 34 additions & 1 deletion tests/react/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {useState} from 'react'
import {render, screen} from '@testing-library/react'
import {render, screen, waitFor} from '@testing-library/react'
import userEvent from '#src'
import {getUIValue} from '#src/document'
import {addListeners} from '#testHelpers'
Expand Down Expand Up @@ -173,3 +173,36 @@ describe('typing in a formatted input', () => {
expect(element).toHaveValue('$234')
})
})

test('change select with delayed state update', async () => {
function Select() {
const [selected, setSelected] = useState<string[]>([])

return (
<select
multiple
value={selected}
onChange={e => {
const values = Array.from(e.target.selectedOptions).map(o => o.value)
setTimeout(() => setSelected(values))
}}
>
<option>Chrome</option>
<option>Firefox</option>
<option>Opera</option>
</select>
)
}

render(<Select />)

await userEvent.selectOptions(
screen.getByRole('listbox'),
['Chrome', 'Firefox'],
{delay: 10},
)

await waitFor(() => {
expect(screen.getByRole('listbox')).toHaveValue(['Chrome', 'Firefox'])
})
})

0 comments on commit 7ea7a77

Please sign in to comment.