Update Legacy Widget E2E test

WordPress · Apr 26, 2021 · cffe24c · cffe24c
1 parent ce80478
commit cffe24c
Showing 1 changed file with 27 additions and 44 deletions.
diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js
@@ -503,22 +503,39 @@ describe( 'Widgets screen', () => {
 		await page.waitForTimeout( 500 );
 
 		await visitAdminPage( 'themes.php', 'page=gutenberg-widgets' );
-		// Wait for the widget areas to load.
-		await findAll( {
-			role: 'group',
-			name: 'Block: Widget Area',
+
+		// Wait for the Legacy Widget block's preview iframe to load.
+		const frame = await new Promise( ( resolve ) => {
+			const checkFrame = async ( candidateFrame ) => {
+				const url = await candidateFrame.url();
+				if ( url.includes( 'legacy-widget-preview' ) ) {
+					page.off( 'frameattached', checkFrame );
+					page.off( 'framenavigated', checkFrame );
+					resolve( candidateFrame );
+				}
+			};
+			page.on( 'frameattached', checkFrame );
+			page.on( 'framenavigated', checkFrame );
 		} );
 
-		// Wait for the widget's form to load.
-		await page.waitForSelector(
-			'[data-block][data-type="core/legacy-widget"] input'
+		// Expect to have search input.
+		await find(
+			{
+				role: 'searchbox',
+			},
+			{
+				page: frame,
+			}
 		);
 
+		// Focus the Legacy Widget block.
 		const legacyWidget = await find( {
 			role: 'group',
 			name: 'Block: Legacy Widget',
 		} );
+		await legacyWidget.focus();
 
+		// There should be a title at the top of the widget form.
 		const legacyWidgetName = await find(
 			{
 				role: 'heading',
@@ -530,34 +547,7 @@ describe( 'Widgets screen', () => {
 		);
 		expect( legacyWidgetName ).toMatchQuery( { text: 'Search' } );
 
-		await legacyWidget.focus();
-
-		await showBlockToolbar();
-		let previewButton = await find( {
-			role: 'button',
-			name: 'Preview',
-		} );
-		await previewButton.click();
-
-		const iframe = await legacyWidget.$( 'iframe' );
-		const frame = await iframe.contentFrame();
-
-		// Expect to have search input.
-		await find(
-			{
-				role: 'searchbox',
-			},
-			{
-				page: frame,
-			}
-		);
-
-		const editButton = await find( {
-			role: 'button',
-			name: 'Edit',
-		} );
-		await editButton.click();
-
+		// Update the widget form.
 		const titleInput = await find(
 			{
 				role: 'textbox',
@@ -569,15 +559,8 @@ describe( 'Widgets screen', () => {
 		);
 		await titleInput.type( 'Search Title' );
 
-		await showBlockToolbar();
-		previewButton = await find( {
-			role: 'button',
-			name: 'Preview',
-		} );
-		await Promise.all( [
-			previewButton.click(),
-			frame.waitForNavigation(),
-		] );
+		// Switch to Navigation mode.
+		await page.keyboard.press( 'Escape' );
 
 		// Expect to have search title.
 		await find(