Skip to content

Commit

Permalink
Components: Use real timers where possible (#47056)
Browse files Browse the repository at this point in the history 
* Components: Use real timers where possible

* Change sleep to use waitFor

* Remove comments
  • Loading branch information
@tyxla
tyxla authored Jan 12, 2023
1 parent 7c0f2dd commit 56c33cf
Show file tree
Hide file tree
Showing 33 changed files with 205 additions and 699 deletions.
6 changes: 1 addition & 5 deletions packages/components/src/autocomplete/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,10 @@ import { useRef } from '@wordpress/element';
*/
import { getAutoCompleterUI } from '../autocompleter-ui';

jest.useFakeTimers();

describe( 'AutocompleterUI', () => {
describe( 'click outside behavior', () => {
it( 'should call reset function when a click on another element occurs', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

const resetSpy = jest.fn();

Expand Down
46 changes: 11 additions & 35 deletions packages/components/src/box-control/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
*/
import BoxControl from '../';

jest.useFakeTimers();

const Example = ( extraProps ) => {
const [ state, setState ] = useState();

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

it( 'should update values when interacting with input', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

render( <BoxControl /> );

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

describe( 'Reset', () => {
it( 'should reset values when clicking Reset', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

render( <BoxControl /> );

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

it( 'should reset values when clicking Reset, if controlled', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

render( <Example /> );

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

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

render( <Example /> );

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

it( 'should persist cleared value when focus changes', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const spyChange = jest.fn();

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

describe( 'Unlinked sides', () => {
it( 'should update a single side value when unlinked', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

render( <Example /> );

Expand Down Expand Up @@ -216,9 +202,7 @@ describe( 'BoxControl', () => {
} );

it( 'should update a whole axis when value is changed when unlinked', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

render( <Example splitOnAxis /> );

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

describe( 'Unit selections', () => {
it( 'should update unlinked controls unit selection based on all input control', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

// Render control.
render( <BoxControl /> );
Expand Down Expand Up @@ -285,9 +267,7 @@ describe( 'BoxControl', () => {
} );

it( 'should use individual side attribute unit when available', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

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

describe( 'onChange updates', () => {
it( 'should call onChange when values contain more than just CSS units', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const setState = jest.fn();

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

it( 'should not pass invalid CSS unit only values to onChange', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const setState = jest.fn();

render( <BoxControl onChange={ setState } /> );
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/checkbox-control/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
import BaseCheckboxControl from '..';
import type { CheckboxControlProps } from '../types';

jest.useFakeTimers();

const noop = () => {};

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

describe( 'Value', () => {
it( 'should flip the checked property when clicked', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();

let state = false;
const setState = jest.fn(
Expand Down
18 changes: 4 additions & 14 deletions packages/components/src/color-palette/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
*/
import ColorPalette from '..';

jest.useFakeTimers();

const EXAMPLE_COLORS = [
{ name: 'red', color: '#f00' },
{ name: 'green', color: '#0f0' },
Expand Down Expand Up @@ -54,9 +52,7 @@ describe( 'ColorPalette', () => {
} );

it( 'should call onClick on an active button with undefined', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -76,9 +72,7 @@ describe( 'ColorPalette', () => {
} );

it( 'should call onClick on an inactive button', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -104,9 +98,7 @@ describe( 'ColorPalette', () => {
} );

it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand Down Expand Up @@ -139,9 +131,7 @@ describe( 'ColorPalette', () => {
} );

it( 'should render dropdown and its content', async () => {
const user = userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand Down
21 changes: 6 additions & 15 deletions packages/components/src/color-picker/test/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
/**
* External dependencies
*/
import { render, fireEvent } from '@testing-library/react';
import { render, fireEvent, waitFor } from '@testing-library/react';

/**
* Internal dependencies
*/
import { ColorPicker } from '..';

jest.useFakeTimers();

/**
* Ordinarily we'd try to select the compnoent by role but the silder role appears
* on several elements and we'd end up encoding assumptions about order when
Expand Down Expand Up @@ -43,12 +41,6 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
}

const sleep = ( ms ) => {
const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
jest.advanceTimersByTime( ms + 1 );
return promise;
};

const hslaMatcher = expect.objectContaining( {
h: expect.any( Number ),
s: expect.any( Number ),
Expand Down Expand Up @@ -95,8 +87,9 @@ describe( 'ColorPicker', () => {
{ pageX: 10, pageY: 10 }
);

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

expect( onChangeComplete ).toHaveBeenCalledWith(
legacyColorMatcher
Expand All @@ -119,8 +112,7 @@ describe( 'ColorPicker', () => {
{ pageX: 10, pageY: 10 }
);

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

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

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

expect( onChange ).toHaveBeenCalledWith(
expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
Expand Down
7 changes: 1 addition & 6 deletions packages/components/src/combobox-control/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
*/
import ComboboxControl from '../';

jest.useFakeTimers();

const timezones = [
{ label: 'Greenwich Mean Time', value: 'GMT' },
{ label: 'Universal Coordinated Time', value: 'UTC' },
Expand Down Expand Up @@ -56,10 +54,7 @@ const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
const getOption = ( name ) => screen.getByRole( 'option', { name } );
const getAllOptions = () => screen.getAllByRole( 'option' );
const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
const setupUser = () =>
userEvent.setup( {
advanceTimers: jest.advanceTimersByTime,
} );
const setupUser = () => userEvent.setup();

const ControlledComboboxControl = ( {
value: valueProp,
Expand Down
Loading

1 comment on commit 56c33cf

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 56c33cf.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3902367571
📝 Reported issues:

Please sign in to comment.