Skip to content

Commit 56c33cf

Browse files
tyxlatyxla
authored
Components: Use real timers where possible (#47056)
* Components: Use real timers where possible * Change sleep to use waitFor * Remove comments
1 parent 7c0f2dd commit 56c33cf

33 files changed

Lines changed: 205 additions & 699 deletions

File tree

‎packages/components/src/autocomplete/test/index.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,10 @@ import { useRef } from '@wordpress/element';
1414
*/
1515
import { getAutoCompleterUI } from '../autocompleter-ui';
1616

17-
jest.useFakeTimers();
18-
1917
describe( 'AutocompleterUI', () => {
2018
describe( 'click outside behavior', () => {
2119
it( 'should call reset function when a click on another element occurs', async () => {
22-
const user = userEvent.setup( {
23-
advanceTimers: jest.advanceTimersByTime,
24-
} );
20+
const user = userEvent.setup();
2521

2622
const resetSpy = jest.fn();
2723

‎packages/components/src/box-control/test/index.js‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
1414
*/
1515
import BoxControl from '../';
1616

17-
jest.useFakeTimers();
18-
1917
const Example = ( extraProps ) => {
2018
const [ state, setState ] = useState();
2119

@@ -39,9 +37,7 @@ describe( 'BoxControl', () => {
3937
} );
4038

4139
it( 'should update values when interacting with input', async () => {
42-
const user = userEvent.setup( {
43-
advanceTimers: jest.advanceTimersByTime,
44-
} );
40+
const user = userEvent.setup();
4541

4642
render( <BoxControl /> );
4743

@@ -63,9 +59,7 @@ describe( 'BoxControl', () => {
6359

6460
describe( 'Reset', () => {
6561
it( 'should reset values when clicking Reset', async () => {
66-
const user = userEvent.setup( {
67-
advanceTimers: jest.advanceTimersByTime,
68-
} );
62+
const user = userEvent.setup();
6963

7064
render( <BoxControl /> );
7165

@@ -89,9 +83,7 @@ describe( 'BoxControl', () => {
8983
} );
9084

9185
it( 'should reset values when clicking Reset, if controlled', async () => {
92-
const user = userEvent.setup( {
93-
advanceTimers: jest.advanceTimersByTime,
94-
} );
86+
const user = userEvent.setup();
9587

9688
render( <Example /> );
9789

@@ -115,9 +107,7 @@ describe( 'BoxControl', () => {
115107
} );
116108

117109
it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
118-
const user = userEvent.setup( {
119-
advanceTimers: jest.advanceTimersByTime,
120-
} );
110+
const user = userEvent.setup();
121111

122112
render( <Example /> );
123113

@@ -141,9 +131,7 @@ describe( 'BoxControl', () => {
141131
} );
142132

143133
it( 'should persist cleared value when focus changes', async () => {
144-
const user = userEvent.setup( {
145-
advanceTimers: jest.advanceTimersByTime,
146-
} );
134+
const user = userEvent.setup();
147135
const spyChange = jest.fn();
148136

149137
render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
@@ -179,9 +167,7 @@ describe( 'BoxControl', () => {
179167

180168
describe( 'Unlinked sides', () => {
181169
it( 'should update a single side value when unlinked', async () => {
182-
const user = userEvent.setup( {
183-
advanceTimers: jest.advanceTimersByTime,
184-
} );
170+
const user = userEvent.setup();
185171

186172
render( <Example /> );
187173

@@ -216,9 +202,7 @@ describe( 'BoxControl', () => {
216202
} );
217203

218204
it( 'should update a whole axis when value is changed when unlinked', async () => {
219-
const user = userEvent.setup( {
220-
advanceTimers: jest.advanceTimersByTime,
221-
} );
205+
const user = userEvent.setup();
222206

223207
render( <Example splitOnAxis /> );
224208

@@ -251,9 +235,7 @@ describe( 'BoxControl', () => {
251235

252236
describe( 'Unit selections', () => {
253237
it( 'should update unlinked controls unit selection based on all input control', async () => {
254-
const user = userEvent.setup( {
255-
advanceTimers: jest.advanceTimersByTime,
256-
} );
238+
const user = userEvent.setup();
257239

258240
// Render control.
259241
render( <BoxControl /> );
@@ -285,9 +267,7 @@ describe( 'BoxControl', () => {
285267
} );
286268

287269
it( 'should use individual side attribute unit when available', async () => {
288-
const user = userEvent.setup( {
289-
advanceTimers: jest.advanceTimersByTime,
290-
} );
270+
const user = userEvent.setup();
291271

292272
// Render control.
293273
const { rerender } = render( <BoxControl /> );
@@ -337,9 +317,7 @@ describe( 'BoxControl', () => {
337317

338318
describe( 'onChange updates', () => {
339319
it( 'should call onChange when values contain more than just CSS units', async () => {
340-
const user = userEvent.setup( {
341-
advanceTimers: jest.advanceTimersByTime,
342-
} );
320+
const user = userEvent.setup();
343321
const setState = jest.fn();
344322

345323
render( <BoxControl onChange={ setState } /> );
@@ -361,9 +339,7 @@ describe( 'BoxControl', () => {
361339
} );
362340

363341
it( 'should not pass invalid CSS unit only values to onChange', async () => {
364-
const user = userEvent.setup( {
365-
advanceTimers: jest.advanceTimersByTime,
366-
} );
342+
const user = userEvent.setup();
367343
const setState = jest.fn();
368344

369345
render( <BoxControl onChange={ setState } /> );

‎packages/components/src/checkbox-control/test/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
1515
import BaseCheckboxControl from '..';
1616
import type { CheckboxControlProps } from '../types';
1717

18-
jest.useFakeTimers();
19-
2018
const noop = () => {};
2119

2220
const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
@@ -85,9 +83,7 @@ describe( 'CheckboxControl', () => {
8583

8684
describe( 'Value', () => {
8785
it( 'should flip the checked property when clicked', async () => {
88-
const user = userEvent.setup( {
89-
advanceTimers: jest.advanceTimersByTime,
90-
} );
86+
const user = userEvent.setup();
9187

9288
let state = false;
9389
const setState = jest.fn(

‎packages/components/src/color-palette/test/index.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
99
*/
1010
import ColorPalette from '..';
1111

12-
jest.useFakeTimers();
13-
1412
const EXAMPLE_COLORS = [
1513
{ name: 'red', color: '#f00' },
1614
{ name: 'green', color: '#0f0' },
@@ -54,9 +52,7 @@ describe( 'ColorPalette', () => {
5452
} );
5553

5654
it( 'should call onClick on an active button with undefined', async () => {
57-
const user = userEvent.setup( {
58-
advanceTimers: jest.advanceTimersByTime,
59-
} );
55+
const user = userEvent.setup();
6056
const onChange = jest.fn();
6157

6258
render(
@@ -76,9 +72,7 @@ describe( 'ColorPalette', () => {
7672
} );
7773

7874
it( 'should call onClick on an inactive button', async () => {
79-
const user = userEvent.setup( {
80-
advanceTimers: jest.advanceTimersByTime,
81-
} );
75+
const user = userEvent.setup();
8276
const onChange = jest.fn();
8377

8478
render(
@@ -104,9 +98,7 @@ describe( 'ColorPalette', () => {
10498
} );
10599

106100
it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
107-
const user = userEvent.setup( {
108-
advanceTimers: jest.advanceTimersByTime,
109-
} );
101+
const user = userEvent.setup();
110102
const onChange = jest.fn();
111103

112104
render(
@@ -139,9 +131,7 @@ describe( 'ColorPalette', () => {
139131
} );
140132

141133
it( 'should render dropdown and its content', async () => {
142-
const user = userEvent.setup( {
143-
advanceTimers: jest.advanceTimersByTime,
144-
} );
134+
const user = userEvent.setup();
145135
const onChange = jest.fn();
146136

147137
render(

‎packages/components/src/color-picker/test/index.js‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
/**
22
* External dependencies
33
*/
4-
import { render, fireEvent } from '@testing-library/react';
4+
import { render, fireEvent, waitFor } from '@testing-library/react';
55

66
/**
77
* Internal dependencies
88
*/
99
import { ColorPicker } from '..';
1010

11-
jest.useFakeTimers();
12-
1311
/**
1412
* Ordinarily we'd try to select the compnoent by role but the silder role appears
1513
* on several elements and we'd end up encoding assumptions about order when
@@ -43,12 +41,6 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
4341
fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
4442
}
4543

46-
const sleep = ( ms ) => {
47-
const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
48-
jest.advanceTimersByTime( ms + 1 );
49-
return promise;
50-
};
51-
5244
const hslaMatcher = expect.objectContaining( {
5345
h: expect.any( Number ),
5446
s: expect.any( Number ),
@@ -95,8 +87,9 @@ describe( 'ColorPicker', () => {
9587
{ pageX: 10, pageY: 10 }
9688
);
9789

98-
// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
99-
await sleep( 1 );
90+
await waitFor( () =>
91+
expect( onChangeComplete ).toHaveBeenCalled()
92+
);
10093

10194
expect( onChangeComplete ).toHaveBeenCalledWith(
10295
legacyColorMatcher
@@ -119,8 +112,7 @@ describe( 'ColorPicker', () => {
119112
{ pageX: 10, pageY: 10 }
120113
);
121114

122-
// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
123-
await sleep( 1 );
115+
await waitFor( () => expect( onChange ).toHaveBeenCalled() );
124116

125117
expect( onChange ).toHaveBeenCalledWith(
126118
expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
@@ -152,8 +144,7 @@ describe( 'ColorPicker', () => {
152144
{ pageX: 10, pageY: 10 }
153145
);
154146

155-
// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
156-
await sleep( 1 );
147+
await waitFor( () => expect( onChange ).toHaveBeenCalled() );
157148

158149
expect( onChange ).toHaveBeenCalledWith(
159150
expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )

‎packages/components/src/combobox-control/test/index.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
1414
*/
1515
import ComboboxControl from '../';
1616

17-
jest.useFakeTimers();
18-
1917
const timezones = [
2018
{ label: 'Greenwich Mean Time', value: 'GMT' },
2119
{ label: 'Universal Coordinated Time', value: 'UTC' },
@@ -56,10 +54,7 @@ const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
5654
const getOption = ( name ) => screen.getByRole( 'option', { name } );
5755
const getAllOptions = () => screen.getAllByRole( 'option' );
5856
const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
59-
const setupUser = () =>
60-
userEvent.setup( {
61-
advanceTimers: jest.advanceTimersByTime,
62-
} );
57+
const setupUser = () => userEvent.setup();
6358

6459
const ControlledComboboxControl = ( {
6560
value: valueProp,

0 commit comments

Comments
 (0)