Skip to content

Enable previously skipped widgets tests #33121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kevin940726 merged 4 commits into from
Jul 1, 2021
Merged

Enable previously skipped widgets tests #33121

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
018f30b
Enable duplicate test for widgets screen
kevin940726 Jun 30, 2021
c35f365
Enable saving to the second widget area test
kevin940726 Jul 1, 2021
67c8498
Address todo
kevin940726 Jul 1, 2021
fc5989b
Fix indent issues in snapshots
kevin940726 Jul 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 53 additions & 77 deletions packages/e2e-tests/specs/widgets/editing-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();

Expand All @@ -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>",
}
` );
Expand Down Expand Up @@ -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' );
Expand Down Expand Up @@ -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 );

Expand All @@ -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( {
Expand All @@ -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( `
Expand All @@ -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(
Expand All @@ -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();
Expand Down