Enable previously skipped widgets tests (#33121)

Author: kevin940726

packages/e2e-tests/specs/widgets/editing-widgets.test.js

@@ -144,7 +144,7 @@ describe( 'Widgets screen', () => {
 			role: 'group',
 			name: 'Block: Widget Area',
 		} );
-		const [ firstWidgetArea ] = widgetAreas;
+		const [ firstWidgetArea, secondWidgetArea ] = widgetAreas;
 
 		let addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
 		await addParagraphBlock.hover();
@@ -202,32 +202,17 @@ describe( 'Widgets screen', () => {
 			'[video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"]'
 		);
 
-		/**
-		 * FIXME: There seems to have a bug when saving the widgets
-		 */
-		// await secondWidgetArea.click();
-
-		// addParagraphBlock = await getParagraphBlockInGlobalInserter();
-		// await addParagraphBlock.hover();
-
-		// // FIXME: The insertion point indicator is not showing when the widget area has no blocks.
-		// // await expectInsertionPointIndicatorToBeBelowLastBlock(
-		// // 	secondWidgetArea
-		// // );
-
-		// await addParagraphBlock.click();
+		// Add to the second widget area.
+		await secondWidgetArea.click();
 
-		// const addedParagraphBlockInSecondWidgetArea = await secondWidgetArea.$(
-		// 	'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
-		// );
-
-		// expect(
-		// 	await addedParagraphBlockInSecondWidgetArea.evaluate(
-		// 		( node ) => node === document.activeElement
-		// 	)
-		// ).toBe( true );
+		addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.click();
 
-		// await page.keyboard.type( 'Third Paragraph' );
+		const addedParagraphBlockInSecondWidgetArea = await secondWidgetArea.$(
+			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+		);
+		await addedParagraphBlockInSecondWidgetArea.focus();
+		await page.keyboard.type( 'Third Paragraph' );
 
 		await saveWidgets();
 
@@ -247,6 +232,9 @@ describe( 'Widgets screen', () => {
 		</div></div>
 		<div class=\\"widget widget_block\\"><div class=\\"widget-content\\"><p><div style=\\"width: 580px;\\" class=\\"wp-video\\"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
 		<video class=\\"wp-video-shortcode\\" id=\\"video-0-1\\" width=\\"580\\" height=\\"326\\" preload=\\"metadata\\" controls=\\"controls\\"><source type=\\"video/mp4\\" src=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4?_=1\\" /><a href=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\\">http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4</a></video></div></p>
+		</div></div>",
+		  "sidebar-2": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
+		<p>Third Paragraph</p>
 		</div></div>",
 		}
 	` );
@@ -345,10 +333,10 @@ describe( 'Widgets screen', () => {
 		} );
 		await inlineInserterButton.click();
 
-		// TODO: Convert to find() API from puppeteer-testing-library.
-		const inserterSearchBox = await page.waitForSelector(
-			'aria/Search for blocks and patterns[role="searchbox"]'
-		);
+		const inserterSearchBox = await find( {
+			role: 'searchbox',
+			name: 'Search for blocks and patterns',
+		} );
 		await expect( inserterSearchBox ).toHaveFocus();
 
 		await page.keyboard.type( 'Heading' );
@@ -473,19 +461,19 @@ describe( 'Widgets screen', () => {
 
 			let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-			Object {
-			  "sidebar-1": "<marquee>Howdy</marquee>",
-			}
-		` );
+						Object {
+						  "sidebar-1": "<marquee>Howdy</marquee>",
+						}
+					` );
 
 			await page.reload();
 
 			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-			Object {
-			  "sidebar-1": "<marquee>Howdy</marquee>",
-			}
-		` );
+						Object {
+						  "sidebar-1": "<marquee>Howdy</marquee>",
+						}
+					` );
 
 			await addMarquee( 2 );
 
@@ -506,10 +494,10 @@ describe( 'Widgets screen', () => {
 			await saveWidgets();
 			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
 			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-			Object {
-			  "sidebar-1": "<marquee>Howdy</marquee>",
-			}
-		` );
+						Object {
+						  "sidebar-1": "<marquee>Howdy</marquee>",
+						}
+					` );
 
 			await page.reload();
 			const marqueesAfter = await findAll( {
@@ -519,28 +507,32 @@ describe( 'Widgets screen', () => {
 		} );
 	} );
 
-	// Disable reason: We temporary skip this test until we can figure out why it fails sometimes.
-	// eslint-disable-next-line jest/no-disabled-tests
-	it.skip( 'Should duplicate the widgets', async () => {
-		let firstWidgetArea = await page.$(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+	it( 'Should duplicate the widgets', async () => {
+		let [ firstWidgetArea ] = await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 
 		const addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
 		await addParagraphBlock.click();
 
-		let firstParagraphBlock = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
+		let firstParagraphBlock = await find(
+			{
+				role: 'group',
+				name: /^Empty block/,
+			},
+			{ root: firstWidgetArea }
 		);
 		await firstParagraphBlock.focus();
 		await page.keyboard.type( 'First Paragraph' );
 
 		await saveWidgets();
 		await page.reload();
 		// Wait for the widget areas to load.
-		firstWidgetArea = await page.waitForSelector(
-			'[aria-label="Block: Widget Area"][role="group"]'
-		);
+		[ firstWidgetArea ] = await findAll( {
+			role: 'group',
+			name: 'Block: Widget Area',
+		} );
 
 		const initialSerializedWidgetAreas = await getSerializedWidgetAreas();
 		expect( initialSerializedWidgetAreas ).toMatchInlineSnapshot( `
@@ -559,21 +551,11 @@ describe( 'Widgets screen', () => {
 		await firstParagraphBlock.focus();
 
 		await showBlockToolbar();
-
-		const blockToolbar = await page.waitForSelector(
-			'[role="toolbar"][aria-label="Block tools"]'
-		);
-		const moreOptionsButton = await blockToolbar.$(
-			'button[aria-label="Options"]'
-		);
-		await moreOptionsButton.click();
-
-		const optionsMenu = await page.waitForSelector(
-			'[role="menu"][aria-label="Options"]'
-		);
-		const [ duplicateButton ] = await optionsMenu.$x(
-			'//*[@role="menuitem"][*[text()="Duplicate"]]'
-		);
+		await clickBlockToolbarButton( 'Options' );
+		const duplicateButton = await find( {
+			role: 'menuitem',
+			name: /^Duplicate/,
+		} );
 		await duplicateButton.click();
 
 		await page.waitForFunction(
@@ -597,16 +579,10 @@ describe( 'Widgets screen', () => {
 		expect( firstParagraphBlockClientId ).not.toBe(
 			duplicatedParagraphBlockClientId
 		);
-		expect(
-			await duplicatedParagraphBlock.evaluate(
-				( node ) => node.textContent
-			)
-		).toBe( 'First Paragraph' );
-		expect(
-			await duplicatedParagraphBlock.evaluate(
-				( node ) => node === document.activeElement
-			)
-		).toBe( true );
+		await expect( duplicatedParagraphBlock ).toMatchQuery( {
+			text: 'First Paragraph',
+		} );
+		await expect( duplicatedParagraphBlock ).toHaveFocus();
 
 		await saveWidgets();
 		const editedSerializedWidgetAreas = await getSerializedWidgetAreas();