diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js index 642af7ee8171b6..c626564bb37e11 100644 --- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js +++ b/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', () => {

+
", + "sidebar-2": "
+

Third Paragraph

", } ` ); @@ -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": "Howdy", - } - ` ); + Object { + "sidebar-1": "Howdy", + } + ` ); await page.reload(); editedSerializedWidgetAreas = await getSerializedWidgetAreas(); await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` - Object { - "sidebar-1": "Howdy", - } - ` ); + Object { + "sidebar-1": "Howdy", + } + ` ); await addMarquee( 2 ); @@ -506,10 +494,10 @@ describe( 'Widgets screen', () => { await saveWidgets(); editedSerializedWidgetAreas = await getSerializedWidgetAreas(); await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( ` - Object { - "sidebar-1": "Howdy", - } - ` ); + Object { + "sidebar-1": "Howdy", + } + ` ); await page.reload(); const marqueesAfter = await findAll( { @@ -519,18 +507,21 @@ 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' ); @@ -538,9 +529,10 @@ describe( 'Widgets screen', () => { 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();