Use explicit wait for the animated elements

WordPress · Aug 24, 2022 · 6abc644 · 6abc644
1 parent b12a396
commit 6abc644
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 30 deletions.
diff --git a/test/storybook-playwright/specs/font-size-picker.test.ts b/test/storybook-playwright/specs/font-size-picker.test.ts
@@ -6,7 +6,18 @@ import { test, expect } from '@wordpress/e2e-test-utils-playwright';
 /**
  * Internal dependencies
  */
-import { gotoStoryId, waitForFMAnimation } from '../utils';
+import { gotoStoryId } from '../utils';
+
+const waitUntilButtonHighlightStable = async ( page ) => {
+	const handle = await page
+		.locator( '[aria-label="Font size"] > div[role=presentation]' )
+		.elementHandle();
+
+	await handle?.waitForElementState( 'visible' );
+	await handle?.waitForElementState( 'stable' );
+
+	return handle;
+};
 
 test.describe.parallel( 'FontSizePicker', () => {
 	test.beforeEach( async ( { page } ) => {
@@ -16,7 +27,8 @@ test.describe.parallel( 'FontSizePicker', () => {
 	test( 'Renders with "Normal" size by default', async ( { page } ) => {
 		const button = await page.locator( 'button[aria-label="Normal"]' );
 
-		await waitForFMAnimation( { page } );
+		await waitUntilButtonHighlightStable( page );
+
 		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );
@@ -25,8 +37,8 @@ test.describe.parallel( 'FontSizePicker', () => {
 		const button = await page.locator( 'button[aria-label="Small"]' );
 
 		await button.click();
+		await waitUntilButtonHighlightStable( page );
 
-		await waitForFMAnimation( { page } );
 		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );
@@ -35,8 +47,8 @@ test.describe.parallel( 'FontSizePicker', () => {
 		const button = await page.locator( 'button[aria-label="Big"]' );
 
 		await button.click();
+		await waitUntilButtonHighlightStable( page );
 
-		await waitForFMAnimation( { page } );
 		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );
@@ -45,8 +57,8 @@ test.describe.parallel( 'FontSizePicker', () => {
 		const button = await page.locator( 'button[aria-label="Normal"]' );
 
 		await button.click();
+		await waitUntilButtonHighlightStable( page );
 
-		await waitForFMAnimation( { page } );
 		expect( button ).toHaveAttribute( 'aria-checked', 'true' );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );

diff --git a/test/storybook-playwright/specs/popover.test.ts b/test/storybook-playwright/specs/popover.test.ts
@@ -6,15 +6,16 @@ import { test, expect } from '@wordpress/e2e-test-utils-playwright';
 /**
  * Internal dependencies
  */
-import { gotoStoryId, waitForFMAnimation } from '../utils';
+import { gotoStoryId } from '../utils';
 
 test.describe( 'Popover', () => {
 	test( 'should render', async ( { page } ) => {
 		await gotoStoryId( page, 'components-popover--default' );
 
 		await page.click( 'role=button' );
+		const popover = await page.waitForSelector( '.components-popover' );
+		await popover.waitForElementState( 'stable' );
 
-		await waitForFMAnimation( { page } );
 		expect( await page.screenshot() ).toMatchSnapshot();
 	} );
 } );
diff --git a/test/storybook-playwright/utils.ts b/test/storybook-playwright/utils.ts
@@ -10,26 +10,3 @@ export const gotoStoryId = ( page: Page, storyId: string ) =>
 		`http://localhost:${ STORYBOOK_PORT }/iframe.html?id=${ storyId }`,
 		{ waitUntil: 'load' }
 	);
-
-export const waitForFMAnimation = async ( { page } ) =>
-	await page.evaluate(
-		() =>
-			new Promise( ( resolve, reject ) => {
-				const rootEl = document.getElementById( 'root' ) as HTMLElement;
-				if ( ! rootEl ) {
-					reject( 'Could not find #root element' );
-				}
-
-				let mutationTimer = setTimeout( resolve, 200 );
-				const observer = new MutationObserver( () => {
-					clearTimeout( mutationTimer );
-					mutationTimer = setTimeout( resolve, 200 );
-				} );
-
-				observer.observe( rootEl, {
-					subtree: true,
-					childList: true,
-					attributes: true,
-				} );
-			} )
-	);