Skip to content

Commit

Permalink
Components: Cleanup flaky unit test sleep() hacks (#64205)
Browse files Browse the repository at this point in the history 
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>
Co-authored-by: diegohaz <hazdiego@git.wordpress.org>
  • Loading branch information
@tyxla
4 people authored Aug 2, 2024
1 parent 6698215 commit f9216d7
Show file tree
Hide file tree
Showing 10 changed files with 7 additions and 83 deletions.
4 changes: 1 addition & 3 deletions packages/components/src/alignment-matrix-control/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen, waitFor, within } from '@testing-library/react';
import { press, click, sleep } from '@ariakit/test';
import { press, click } from '@ariakit/test';

/**
* Internal dependencies
Expand Down Expand Up @@ -39,7 +39,6 @@ describe( 'AlignmentMatrixControl', () => {
it( 'should be centered by default', async () => {
await renderAndInitCompositeStore( <AlignmentMatrixControl /> );

await sleep();
await press.Tab();

expect( getCell( 'center center' ) ).toHaveFocus();
Expand Down Expand Up @@ -110,7 +109,6 @@ describe( 'AlignmentMatrixControl', () => {
<AlignmentMatrixControl onChange={ spy } />
);

await sleep();
await press.Tab();
await press[ keyRef ]();

Expand Down
5 changes: 1 addition & 4 deletions packages/components/src/circular-option-picker/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import { press, sleep } from '@ariakit/test';
import { press } from '@ariakit/test';

/**
* Internal dependencies
Expand Down Expand Up @@ -70,7 +70,6 @@ describe( 'CircularOptionPicker', () => {
/>
);

await sleep();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await press.ArrowRight();
Expand All @@ -90,7 +89,6 @@ describe( 'CircularOptionPicker', () => {
/>
);

await sleep();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await press.ArrowRight();
Expand All @@ -110,7 +108,6 @@ describe( 'CircularOptionPicker', () => {
/>
);

await sleep();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await press.ArrowRight();
Expand Down
18 changes: 1 addition & 17 deletions packages/components/src/composite/legacy/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { queryByAttribute, render, screen } from '@testing-library/react';
import { press, sleep, waitFor } from '@ariakit/test';
import { press, waitFor } from '@ariakit/test';

/**
* Internal dependencies
Expand Down Expand Up @@ -178,13 +178,10 @@ describe.each( [
);
renderAndValidate( <Test /> );

await sleep();
await press.Tab();
expect( screen.getByText( 'Before' ) ).toHaveFocus();
await sleep();
await press.Tab();
expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
await sleep();
await press.Tab();
expect( screen.getByText( 'After' ) ).toHaveFocus();
await press.ShiftTab();
Expand Down Expand Up @@ -213,7 +210,6 @@ describe.each( [

expect( item2 ).toBeDisabled();

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press.ArrowDown();
Expand Down Expand Up @@ -243,7 +239,6 @@ describe.each( [
expect( item2 ).toBeEnabled();
expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press.ArrowDown();
Expand Down Expand Up @@ -279,7 +274,6 @@ describe.each( [
renderAndValidate( <Test /> );
const { item2 } = getOneDimensionalItems();

await sleep();
await press.Tab();
await waitFor( () => expect( item2 ).toHaveFocus() );
} );
Expand Down Expand Up @@ -323,7 +317,6 @@ describe.each( [
test( 'All directions work with no orientation', async () => {
const { item1, item2, item3 } = useOneDimensionalTest();

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press.ArrowDown();
Expand Down Expand Up @@ -361,7 +354,6 @@ describe.each( [
orientation: 'horizontal',
} );

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press.ArrowDown();
Expand Down Expand Up @@ -391,7 +383,6 @@ describe.each( [
orientation: 'vertical',
} );

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press( next );
Expand Down Expand Up @@ -421,7 +412,6 @@ describe.each( [
loop: true,
} );

await sleep();
await press.Tab();
expect( item1 ).toHaveFocus();
await press.ArrowDown();
Expand All @@ -444,7 +434,6 @@ describe.each( [
const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
useTwoDimensionalTest();

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press.ArrowUp();
Expand Down Expand Up @@ -481,7 +470,6 @@ describe.each( [
const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
useTwoDimensionalTest( { loop: true } );

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press( next );
Expand All @@ -506,7 +494,6 @@ describe.each( [
const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
useTwoDimensionalTest( { wrap: true } );

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press( next );
Expand Down Expand Up @@ -539,7 +526,6 @@ describe.each( [
wrap: true,
} );

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press( previous );
Expand All @@ -555,7 +541,6 @@ describe.each( [
test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press.ArrowDown();
Expand All @@ -577,7 +562,6 @@ describe.each( [
test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
const { itemA1, itemB1, itemB2 } = useShiftTest( false );

await sleep();
await press.Tab();
expect( itemA1 ).toHaveFocus();
await press.ArrowDown();
Expand Down
7 changes: 1 addition & 6 deletions packages/components/src/custom-select-control-v2/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { screen } from '@testing-library/react';
import { click, press, sleep, type } from '@ariakit/test';
import { click, press, type } from '@ariakit/test';
import { render } from '@ariakit/test/react';

/**
Expand Down Expand Up @@ -101,7 +101,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
await press.Enter();
expect(
Expand All @@ -128,7 +127,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();

Expand All @@ -152,7 +150,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
await press.Enter();
expect(
Expand All @@ -173,7 +170,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();
expect( currentSelectedItem ).toHaveTextContent( 'violets' );
Expand Down Expand Up @@ -425,7 +421,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();
expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
Expand Down
6 changes: 0 additions & 6 deletions packages/components/src/custom-select-control/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
await press.Enter();
expect(
Expand Down Expand Up @@ -388,7 +387,6 @@ describe.each( [

await render( <Component { ...props } onChange={ mockOnChange } /> );

await sleep();
await press.Tab();
expect(
screen.getByRole( 'combobox', {
Expand Down Expand Up @@ -494,7 +492,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();

Expand All @@ -520,7 +517,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
await press.Enter();
expect(
Expand All @@ -541,7 +537,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();
expect( currentSelectedItem ).toHaveTextContent(
Expand Down Expand Up @@ -571,7 +566,6 @@ describe.each( [
expanded: false,
} );

await sleep();
await press.Tab();
expect( currentSelectedItem ).toHaveFocus();
expect( currentSelectedItem ).toHaveTextContent(
Expand Down
5 changes: 1 addition & 4 deletions packages/components/src/dropdown-menu-v2/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen, waitFor } from '@testing-library/react';
import { press, click, hover, sleep, type } from '@ariakit/test';
import { press, click, hover, type } from '@ariakit/test';

/**
* WordPress dependencies
Expand Down Expand Up @@ -128,7 +128,6 @@ describe( 'DropdownMenu', () => {
} );

// Move focus on the toggle
await sleep();
await press.Tab();

expect( toggleButton ).toHaveFocus();
Expand Down Expand Up @@ -159,7 +158,6 @@ describe( 'DropdownMenu', () => {
} );

// Move focus on the toggle
await sleep();
await press.Tab();

expect( toggleButton ).toHaveFocus();
Expand Down Expand Up @@ -915,7 +913,6 @@ describe( 'DropdownMenu', () => {

// The outer button can be focused by pressing tab. Doing so will cause
// the DropdownMenu to close.
await sleep();
await press.Tab();
expect( outerButton ).toBeInTheDocument();
expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
Expand Down
9 changes: 1 addition & 8 deletions packages/components/src/tab-panel/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen, waitFor } from '@testing-library/react';
import { press, hover, click, sleep } from '@ariakit/test';
import { press, hover, click } from '@ariakit/test';

/**
* WordPress dependencies
Expand Down Expand Up @@ -155,7 +155,6 @@ describe.each( [
// Tab to focus the tablist. Make sure alpha is focused, and that the
// corresponding tooltip is shown.
expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
await sleep();
await press.Tab();
expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
Expand Down Expand Up @@ -627,7 +626,6 @@ describe.each( [
// Tab to focus the tablist. Make sure alpha is focused.
expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
expect( await getSelectedTab() ).not.toHaveFocus();
await sleep();
await press.Tab();
expect( await getSelectedTab() ).toHaveFocus();

Expand Down Expand Up @@ -665,7 +663,6 @@ describe.each( [
// Tab to focus the tablist. Make sure Alpha is focused.
expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
expect( await getSelectedTab() ).not.toHaveFocus();
await sleep();
await press.Tab();
expect( await getSelectedTab() ).toHaveFocus();

Expand Down Expand Up @@ -703,7 +700,6 @@ describe.each( [
// Tab to focus the tablist. Make sure alpha is focused.
expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
expect( await getSelectedTab() ).not.toHaveFocus();
await sleep();
await press.Tab();
expect( await getSelectedTab() ).toHaveFocus();

Expand Down Expand Up @@ -799,7 +795,6 @@ describe.each( [
// Tab to focus the tablist. Make sure Alpha is focused.
expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
expect( await getSelectedTab() ).not.toHaveFocus();
await sleep();
await press.Tab();
expect( await getSelectedTab() ).toHaveFocus();
expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
Expand Down Expand Up @@ -841,15 +836,13 @@ describe.each( [

// Tab should initially focus the first tab in the tablist, which
// is Alpha.
await sleep();
await press.Tab();
expect(
await screen.findByRole( 'tab', { name: 'Alpha' } )
).toHaveFocus();

// Because all other tabs should have `tabindex=-1`, pressing Tab
// should NOT move the focus to the next tab, which is Beta.
await sleep();
await press.Tab();
expect(
await screen.findByRole( 'tab', { name: 'Beta' } )
Expand Down
Loading

0 comments on commit f9216d7

Please sign in to comment.