Components: Add sleep() before all Tab() to fix flaky tests (#59012)

Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Feb 15, 2024 · decaae6 · decaae6
1 parent c32dd34
commit decaae6
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 5 deletions.
diff --git a/packages/components/src/alignment-matrix-control/test/index.tsx b/packages/components/src/alignment-matrix-control/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { press, click } from '@ariakit/test';
+import { press, click, sleep } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -39,6 +39,7 @@ describe( 'AlignmentMatrixControl', () => {
 		it( 'should be centered by default', async () => {
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
+			await sleep();
 			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
@@ -109,6 +110,7 @@ describe( 'AlignmentMatrixControl', () => {
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
+					await sleep();
 					await press.Tab();
 					await press[ keyRef ]();
 

diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { press } from '@ariakit/test';
+import { press, sleep } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -78,6 +78,7 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -97,6 +98,7 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -116,6 +118,7 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();

diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
@@ -178,10 +178,13 @@ 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();
@@ -210,6 +213,7 @@ describe.each( [
 
 		expect( item2 ).toBeDisabled();
 
+		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -239,6 +243,7 @@ describe.each( [
 		expect( item2 ).toBeEnabled();
 		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
 
+		await sleep();
 		await press.Tab();
 		expect( item1 ).toHaveFocus();
 		await press.ArrowDown();
@@ -318,6 +323,7 @@ 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();
@@ -355,6 +361,7 @@ describe.each( [
 				orientation: 'horizontal',
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -384,6 +391,7 @@ describe.each( [
 				orientation: 'vertical',
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press( next );
@@ -413,6 +421,7 @@ describe.each( [
 				loop: true,
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( item1 ).toHaveFocus();
 			await press.ArrowDown();
@@ -435,6 +444,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
 				useTwoDimensionalTest();
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();
@@ -471,6 +481,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { loop: true } );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -495,6 +506,7 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
 				useTwoDimensionalTest( { wrap: true } );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( next );
@@ -527,6 +539,7 @@ describe.each( [
 				wrap: true,
 			} );
 
+			await sleep();
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press( previous );
@@ -542,6 +555,7 @@ 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();
@@ -563,6 +577,7 @@ 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();

diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { click, press, type } from '@ariakit/test';
+import { click, press, sleep, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -106,6 +106,7 @@ describe( 'With Legacy Props', () => {
 				expanded: false,
 			} );
 
+			await sleep();
 			await press.Tab();
 			await press.Enter();
 			expect(
@@ -315,6 +316,7 @@ describe( 'With Legacy Props', () => {
 				<CustomSelect { ...legacyProps } onChange={ mockOnChange } />
 			);
 
+			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'combobox', {
@@ -336,6 +338,7 @@ describe( 'With Legacy Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				expect( currentSelectedItem ).toHaveFocus();
 
@@ -361,6 +364,7 @@ describe( 'With Legacy Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				await press.Enter();
 				expect(
@@ -381,6 +385,7 @@ describe( 'With Legacy Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				expect( currentSelectedItem ).toHaveFocus();
 
@@ -544,6 +549,7 @@ describe( 'With Default Props', () => {
 				expanded: false,
 			} );
 
+			await sleep();
 			await press.Tab();
 			await press.Enter();
 			expect(
@@ -572,6 +578,7 @@ describe( 'With Default Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				expect( currentSelectedItem ).toHaveFocus();
 
@@ -597,6 +604,7 @@ describe( 'With Default Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				await press.Enter();
 				expect(
@@ -617,6 +625,7 @@ describe( 'With Default Props', () => {
 					expanded: false,
 				} );
 
+				await sleep();
 				await press.Tab();
 				expect( currentSelectedItem ).toHaveFocus();
 

diff --git a/packages/components/src/dropdown-menu-v2/test/index.tsx b/packages/components/src/dropdown-menu-v2/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, type } from '@ariakit/test';
+import { press, click, hover, sleep, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -123,6 +123,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -153,6 +154,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -908,6 +910,7 @@ 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();

diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, hover, click } from '@ariakit/test';
+import { press, hover, click, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -155,6 +155,7 @@ 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();
@@ -626,6 +627,7 @@ 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();
 
@@ -663,6 +665,7 @@ 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();
 
@@ -700,6 +703,7 @@ 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();
 
@@ -795,6 +799,7 @@ 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 );
@@ -836,13 +841,15 @@ 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' } )