1
1
import React from 'react'
2
2
import { render } from '../utils/testing'
3
- import { render as HTMLRender , fireEvent } from '@testing-library/react'
3
+ import { render as HTMLRender , fireEvent , waitFor } from '@testing-library/react'
4
4
import { toHaveNoViolations } from 'jest-axe'
5
5
import 'babel-polyfill'
6
6
import Autocomplete , { AutocompleteInputProps } from '../Autocomplete'
@@ -193,7 +193,8 @@ describe('Autocomplete', () => {
193
193
} )
194
194
195
195
describe ( 'Autocomplete.Input' , ( ) => {
196
- it ( 'calls onChange' , ( ) => {
196
+ it ( 'calls onChange' , async ( ) => {
197
+ const user = userEvent . setup ( )
197
198
const onChangeMock = jest . fn ( )
198
199
const { container} = HTMLRender (
199
200
< LabelledAutocomplete
@@ -204,7 +205,7 @@ describe('Autocomplete', () => {
204
205
const inputNode = container . querySelector ( '#autocompleteInput' )
205
206
206
207
expect ( onChangeMock ) . not . toHaveBeenCalled ( )
207
- inputNode && userEvent . type ( inputNode , 'z' )
208
+ inputNode && ( await user . type ( inputNode , 'z' ) )
208
209
expect ( onChangeMock ) . toHaveBeenCalled ( )
209
210
} )
210
211
@@ -244,15 +245,16 @@ describe('Autocomplete', () => {
244
245
expect ( onKeyUpMock ) . toHaveBeenCalled ( )
245
246
} )
246
247
247
- it ( 'calls onKeyPress' , ( ) => {
248
+ it ( 'calls onKeyPress' , async ( ) => {
249
+ const user = userEvent . setup ( )
248
250
const onKeyPressMock = jest . fn ( )
249
251
const { getByLabelText} = HTMLRender (
250
252
< LabelledAutocomplete inputProps = { { onKeyPress : onKeyPressMock } } menuProps = { { items : [ ] , selectedItemIds : [ ] } } />
251
253
)
252
254
const inputNode = getByLabelText ( AUTOCOMPLETE_LABEL )
253
255
254
256
expect ( onKeyPressMock ) . not . toHaveBeenCalled ( )
255
- userEvent . type ( inputNode , '{enter}' )
257
+ await user . type ( inputNode , '{enter}' )
256
258
expect ( onKeyPressMock ) . toHaveBeenCalled ( )
257
259
} )
258
260
@@ -265,7 +267,7 @@ describe('Autocomplete', () => {
265
267
expect ( inputNode . getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' )
266
268
} )
267
269
268
- it ( 'closes the menu when the input is blurred' , ( ) => {
270
+ it ( 'closes the menu when the input is blurred' , async ( ) => {
269
271
const { getByLabelText} = HTMLRender ( < LabelledAutocomplete menuProps = { { items : [ ] , selectedItemIds : [ ] } } /> )
270
272
const inputNode = getByLabelText ( AUTOCOMPLETE_LABEL )
271
273
@@ -276,49 +278,50 @@ describe('Autocomplete', () => {
276
278
fireEvent . blur ( inputNode )
277
279
278
280
// wait a tick for blur to finish
279
- setTimeout ( ( ) => {
280
- expect ( inputNode . getAttribute ( 'aria-expanded' ) ) . not . toBe ( 'true' )
281
- } , 0 )
281
+ await waitFor ( ( ) => expect ( inputNode . getAttribute ( 'aria-expanded' ) ) . not . toBe ( 'true' ) )
282
282
} )
283
283
284
- it ( 'sets the input value to the suggested item text and highlights the untyped part of the word' , ( ) => {
284
+ it ( 'sets the input value to the suggested item text and highlights the untyped part of the word' , async ( ) => {
285
+ const user = userEvent . setup ( )
285
286
const { container, getByDisplayValue} = HTMLRender (
286
287
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] } } />
287
288
)
288
289
const inputNode = container . querySelector ( '#autocompleteInput' )
289
290
290
- inputNode && userEvent . type ( inputNode , 'ze' )
291
+ inputNode && ( await user . type ( inputNode , 'ze' ) )
291
292
expect ( getByDisplayValue ( 'zero' ) ) . toBeDefined ( )
292
293
} )
293
294
294
- it ( 'does not show or highlight suggestion text after the user hits Backspace until they hit another key' , ( ) => {
295
+ it ( 'does not show or highlight suggestion text after the user hits Backspace until they hit another key' , async ( ) => {
296
+ const user = userEvent . setup ( )
295
297
const { container, getByDisplayValue} = HTMLRender (
296
298
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] } } />
297
299
)
298
300
const inputNode = container . querySelector ( '#autocompleteInput' )
299
301
300
302
expect ( ( inputNode as HTMLInputElement ) . selectionStart ) . toBe ( 0 )
301
- inputNode && userEvent . type ( inputNode , 'ze' )
303
+ inputNode && ( await user . type ( inputNode , 'ze' ) )
302
304
expect ( getByDisplayValue ( 'zero' ) ) . toBeDefined ( )
303
305
expect ( ( inputNode as HTMLInputElement ) . selectionStart ) . toBe ( 2 )
304
306
expect ( ( inputNode as HTMLInputElement ) . selectionEnd ) . toBe ( 4 )
305
- inputNode && userEvent . type ( inputNode , '{backspace}' )
307
+ inputNode && ( await user . keyboard ( '{backspace}' ) )
306
308
expect ( ( inputNode as HTMLInputElement ) . selectionStart ) . toBe ( 2 )
307
309
expect ( getByDisplayValue ( 'ze' ) ) . toBeDefined ( )
308
- inputNode && userEvent . type ( inputNode , 'r' )
310
+ inputNode && ( await user . keyboard ( 'r' ) )
309
311
expect ( ( inputNode as HTMLInputElement ) . selectionStart ) . toBe ( 3 )
310
312
expect ( ( inputNode as HTMLInputElement ) . selectionEnd ) . toBe ( 4 )
311
313
expect ( getByDisplayValue ( 'zero' ) ) . toBeDefined ( )
312
314
} )
313
315
314
- it ( 'clears the input value when the user hits Escape' , ( ) => {
316
+ it ( 'clears the input value when the user hits Escape' , async ( ) => {
317
+ const user = userEvent . setup ( )
315
318
const { container} = HTMLRender ( < LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] } } /> )
316
319
const inputNode = container . querySelector ( '#autocompleteInput' )
317
320
318
321
expect ( inputNode ?. getAttribute ( 'aria-expanded' ) ) . not . toBe ( 'true' )
319
- inputNode && userEvent . type ( inputNode , 'ze' )
322
+ inputNode && ( await user . type ( inputNode , 'ze' ) )
320
323
expect ( inputNode ?. getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' )
321
- inputNode && userEvent . type ( inputNode , '{esc}' )
324
+ inputNode && ( await user . keyboard ( '{escape}' ) )
322
325
expect ( inputNode ?. getAttribute ( 'aria-expanded' ) ) . not . toBe ( 'true' )
323
326
} )
324
327
@@ -332,18 +335,20 @@ describe('Autocomplete', () => {
332
335
} )
333
336
334
337
describe ( 'Autocomplete.Menu' , ( ) => {
335
- it ( 'calls a custom filter function' , ( ) => {
338
+ it ( 'calls a custom filter function' , async ( ) => {
339
+ const user = userEvent . setup ( )
336
340
const filterFnMock = jest . fn ( )
337
341
const { container} = HTMLRender (
338
342
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] , filterFn : filterFnMock } } />
339
343
)
340
344
const inputNode = container . querySelector ( '#autocompleteInput' )
341
345
342
- inputNode && userEvent . type ( inputNode , 'ze' )
346
+ inputNode && ( await user . type ( inputNode , 'ze' ) )
343
347
expect ( filterFnMock ) . toHaveBeenCalled ( )
344
348
} )
345
349
346
- it ( 'calls a custom sort function when the menu closes' , ( ) => {
350
+ it ( 'calls a custom sort function when the menu closes' , async ( ) => {
351
+ const user = userEvent . setup ( )
347
352
const sortOnCloseFnMock = jest . fn ( )
348
353
const { container} = HTMLRender (
349
354
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] , sortOnCloseFn : sortOnCloseFnMock } } />
@@ -354,29 +359,29 @@ describe('Autocomplete', () => {
354
359
// current sort order matches the result of `sortOnCloseFnMock`
355
360
expect ( sortOnCloseFnMock ) . toHaveBeenCalledTimes ( mockItems . length - 1 )
356
361
if ( inputNode ) {
357
- userEvent . type ( inputNode , 'ze' )
362
+ await user . type ( inputNode , 'ze' )
358
363
// eslint-disable-next-line github/no-blur
359
364
fireEvent . blur ( inputNode )
360
365
}
361
366
362
367
// wait a tick for blur to finish
363
- setTimeout ( ( ) => {
364
- expect ( sortOnCloseFnMock ) . toHaveBeenCalledTimes ( mockItems . length )
365
- } , 0 )
368
+ await waitFor ( ( ) => expect ( sortOnCloseFnMock ) . toHaveBeenCalled ( ) )
366
369
} )
367
370
368
- it ( "calls onOpenChange with the menu's open state" , ( ) => {
371
+ it ( "calls onOpenChange with the menu's open state" , async ( ) => {
372
+ const user = userEvent . setup ( )
369
373
const onOpenChangeMock = jest . fn ( )
370
374
const { container} = HTMLRender (
371
375
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] , onOpenChange : onOpenChangeMock } } />
372
376
)
373
377
const inputNode = container . querySelector ( '#autocompleteInput' )
374
378
375
- inputNode && userEvent . type ( inputNode , 'ze' )
379
+ inputNode && ( await user . type ( inputNode , 'ze' ) )
376
380
expect ( onOpenChangeMock ) . toHaveBeenCalled ( )
377
381
} )
378
382
379
- it ( 'calls onSelectedChange with the data for the selected items' , ( ) => {
383
+ it ( 'calls onSelectedChange with the data for the selected items' , async ( ) => {
384
+ const user = userEvent . setup ( )
380
385
const onSelectedChangeMock = jest . fn ( )
381
386
const { container} = HTMLRender (
382
387
< LabelledAutocomplete
@@ -388,7 +393,7 @@ describe('Autocomplete', () => {
388
393
expect ( onSelectedChangeMock ) . not . toHaveBeenCalled ( )
389
394
if ( inputNode ) {
390
395
fireEvent . focus ( inputNode )
391
- userEvent . type ( inputNode , '{enter}' )
396
+ await user . type ( inputNode , '{enter}' )
392
397
}
393
398
394
399
// wait a tick for the keyboard event to be dispatched to the menu item
@@ -397,7 +402,8 @@ describe('Autocomplete', () => {
397
402
} , 0 )
398
403
} )
399
404
400
- it ( 'does not close the menu when clicking an item in the menu if selectionVariant=multiple' , ( ) => {
405
+ it ( 'does not close the menu when clicking an item in the menu if selectionVariant=multiple' , async ( ) => {
406
+ const user = userEvent . setup ( )
401
407
const { getByText, container} = HTMLRender (
402
408
< LabelledAutocomplete menuProps = { { items : mockItems , selectedItemIds : [ ] , selectionVariant : 'multiple' } } />
403
409
)
@@ -408,7 +414,7 @@ describe('Autocomplete', () => {
408
414
inputNode && fireEvent . focus ( inputNode )
409
415
expect ( inputNode ?. getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' )
410
416
fireEvent . click ( itemToClickNode )
411
- inputNode && userEvent . type ( inputNode , '{enter}' )
417
+ inputNode && ( await user . type ( inputNode , '{enter}' ) )
412
418
expect ( inputNode ?. getAttribute ( 'aria-expanded' ) ) . toBe ( 'true' )
413
419
} )
414
420
0 commit comments