@wordpress/e2e-tests 2.5.10 → 2.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.10",
+	"version": "2.5.14",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,7 +23,7 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^5.4.9",
+		"@wordpress/e2e-test-utils": "^5.4.10",
 		"@wordpress/jest-console": "^4.1.1",
 		"@wordpress/jest-puppeteer-axe": "^3.1.1",
 		"@wordpress/scripts": "^19.2.2",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "34b76b2f9397215e5afb8443f5b3073c83913102"
+	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
 }

package/specs/editor/blocks/cover.test.js

@@ -197,6 +197,9 @@ describe( 'Cover', () => {
 		await insertBlock( 'Image' );
 		// Upload image and transform to the Cover block
 		await upload( '.wp-block-image' );
+		// Click the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
+		// the block toolbar.
+		await page.click( '.wp-block-image' );
 		await transformBlockTo( 'Cover' );
 
 		// Get the block's background dim color and its opacity

package/specs/editor/blocks/image.test.js

@@ -103,8 +103,9 @@ describe( 'Image', () => {
 			`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex3 );
-
-		await page.click( '.wp-block-image' );
+		// For some reason just clicking the block wrapper causes figcaption to get focus
+		// in puppeteer but not in live browser, so clicking on the image wrapper div here instead.
+		await page.click( '.wp-block-image > div' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );

package/specs/editor/blocks/navigation.test.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import {
+	clickButton,
+	clickOnMoreMenuItem,
 	createJSONResponse,
 	createNewPost,
 	getEditedPostContent,
@@ -187,7 +189,10 @@ async function updateActiveNavigationLink( { url, label, type } ) {
 	};
 
 	if ( url ) {
-		await page.type( 'input[placeholder="Search or type url"]', url );
+		const input = await page.waitForSelector(
+			'input[placeholder="Search or type url"]'
+		);
+		await input.type( url );
 
 		const suggestionPath = `//button[contains(@class, 'block-editor-link-control__search-item') and contains(@class, '${ typeClasses[ type ] }')]/span/span[@class='block-editor-link-control__search-item-title']/mark[text()="${ url }"]`;
 
@@ -235,6 +240,7 @@ const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
 const PLACEHOLDER_ACTIONS_XPATH = `//*[contains(@class, '${ PLACEHOLDER_ACTIONS_CLASS }')]`;
 const START_EMPTY_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Start empty']`;
 const ADD_ALL_PAGES_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Add all pages']`;
+const SELECT_MENU_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Select menu']`;
 
 async function createNavBlockWithAllPages() {
 	const allPagesButton = await page.waitForXPath( ADD_ALL_PAGES_XPATH );
@@ -675,6 +681,151 @@ describe.skip( 'Navigation', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'supports navigation blocks that have inner blocks within their markup and converts them to wp_navigation posts', async () => {
+		// Insert 'old-school' inner blocks via the code editor.
+		await createNewPost();
+		await clickOnMoreMenuItem( 'Code editor' );
+		const codeEditorInput = await page.waitForSelector(
+			'.editor-post-text-editor'
+		);
+		await codeEditorInput.click();
+		const markup =
+			'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
+		await page.keyboard.type( markup );
+		await clickButton( 'Exit code editor' );
+		const navBlock = await page.waitForSelector(
+			'nav[aria-label="Block: Navigation"]'
+		);
+		// Select the block to convert to a wp_navigation and publish.
+		// The select menu button shows up when saving is complete.
+		await navBlock.click();
+		await page.waitForSelector( 'button[aria-label="Select Menu"]' );
+		// await publishPost();
+
+		// Check that the wp_navigation post has the page list block.
+		// expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
+	} );
+
+	describe( 'Creating and restarting', () => {
+		const NAV_ENTITY_SELECTOR =
+			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
+
+		async function populateNavWithOneItem() {
+			// Add a Link block first.
+			const appender = await page.waitForSelector(
+				'.wp-block-navigation .block-list-appender'
+			);
+			await appender.click();
+			// Add a link to the Link block.
+			await updateActiveNavigationLink( {
+				url: 'https://wordpress.org',
+				label: 'WP',
+				type: 'url',
+			} );
+		}
+
+		async function resetNavBlockToInitialState() {
+			const selectMenuDropdown = await page.waitForSelector(
+				'[aria-label="Select Menu"]'
+			);
+			await selectMenuDropdown.click();
+			const newMenuButton = await page.waitForXPath(
+				'//span[text()="Create new menu"]'
+			);
+			newMenuButton.click();
+		}
+
+		it( 'does not retain uncontrolled inner blocks when creating a new entity', async () => {
+			await createNewPost();
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
+			await codeEditorInput.click();
+			const markup =
+				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
+			await page.keyboard.type( markup );
+			await clickButton( 'Exit code editor' );
+			const navBlock = await page.waitForSelector(
+				'nav[aria-label="Block: Navigation"]'
+			);
+
+			// Select the block to convert to a wp_navigation and publish.
+			// The select menu button shows up when saving is complete.
+			await navBlock.click();
+			await page.waitForSelector( 'button[aria-label="Select Menu"]' );
+
+			// Reset the nav block to create a new entity.
+			await resetNavBlockToInitialState();
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
+			await populateNavWithOneItem();
+
+			// Confirm that only the last menu entity was updated.
+			const publishPanelButton2 = await page.waitForSelector(
+				'.editor-post-publish-button__button:not([aria-disabled="true"])'
+			);
+			await publishPanelButton2.click();
+
+			await page.waitForXPath( NAV_ENTITY_SELECTOR );
+			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+		} );
+
+		it( 'only update a single entity currently linked with the block', async () => {
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
+			await populateNavWithOneItem();
+
+			// Confirm that the menu entity was updated.
+			const publishPanelButton = await page.waitForSelector(
+				'.editor-post-publish-panel__toggle:not([aria-disabled="true"])'
+			);
+			await publishPanelButton.click();
+
+			await page.waitForXPath( NAV_ENTITY_SELECTOR );
+			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+
+			// Publish the post
+			const entitySaveButton = await page.waitForSelector(
+				'.editor-entities-saved-states__save-button'
+			);
+			await entitySaveButton.click();
+			const publishButton = await page.waitForSelector(
+				'.editor-post-publish-button:not([aria-disabled="true"])'
+			);
+			await publishButton.click();
+
+			// A success notice should show up.
+			await page.waitForSelector( '.components-snackbar' );
+
+			// Now try inserting another Link block via the quick inserter.
+			await page.click( 'nav[aria-label="Block: Navigation"]' );
+
+			await resetNavBlockToInitialState();
+			const startEmptyButton2 = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton2.click();
+			await populateNavWithOneItem();
+
+			// Confirm that only the last menu entity was updated.
+			const publishPanelButton2 = await page.waitForSelector(
+				'.editor-post-publish-button__button:not([aria-disabled="true"])'
+			);
+			await publishPanelButton2.click();
+
+			await page.waitForXPath( NAV_ENTITY_SELECTOR );
+			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+		} );
+	} );
+
 	// The following tests are unstable, roughly around when https://github.com/WordPress/wordpress-develop/pull/1412
 	// landed. The block manually tests well, so let's skip to unblock other PRs and immediately follow up. cc @vcanales
 	it.skip( 'loads frontend code only if the block is present', async () => {
@@ -785,91 +936,51 @@ describe.skip( 'Navigation', () => {
 		expect( isScriptLoaded ).toBe( true );
 	} );
 
-	describe( 'Creating and restarting', () => {
-		async function populateNavWithOneItem() {
-			// Add a Link block first.
-			await page.waitForSelector(
-				'.wp-block-navigation .block-list-appender'
-			);
-			await page.click( '.wp-block-navigation .block-list-appender' );
-			// Add a link to the Link block.
-			await updateActiveNavigationLink( {
-				url: 'https://wordpress.org',
-				label: 'WP',
-				type: 'url',
-			} );
-		}
-
-		async function resetNavBlockToInitialState() {
-			await page.waitForSelector( '[aria-label="Select Menu"]' );
-			await page.click( '[aria-label="Select Menu"]' );
-
-			await page.waitForXPath( '//span[text()="Create new menu"]' );
-			const newMenuButton = await page.$x(
-				'//span[text()="Create new menu"]'
-			);
-			newMenuButton[ 0 ].click();
-		}
-
-		it( 'only update a single entity currently linked with the block', async () => {
-			// Mock the response from the Pages endpoint. This is done so that the pages returned are always
-			// consistent and to test the feature more rigorously than the single default sample page.
-			await mockPagesResponse( [
-				{
-					title: 'Home',
-					slug: 'home',
-				},
-				{
-					title: 'About',
-					slug: 'about',
-				},
-				{
-					title: 'Contact Us',
-					slug: 'contact',
-				},
-			] );
-
-			// Add the navigation block.
+	describe( 'Permission based restrictions', () => {
+		it( 'shows a warning if user does not have permission to edit or update navigation menus', async () => {
+			await createNewPost();
 			await insertBlock( 'Navigation' );
 
-			// Create an empty nav block.
-			await createEmptyNavBlock();
-			await populateNavWithOneItem();
-
-			// Let's confirm that the menu entity was updated.
-			await page.waitForSelector(
-				'.editor-post-publish-panel__toggle:not([aria-disabled="true"])'
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
 			);
-			await page.click( '.editor-post-publish-panel__toggle' );
 
-			const NAV_ENTITY_SELECTOR =
-				'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
-			await page.waitForXPath( NAV_ENTITY_SELECTOR );
-			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+			// This creates an empty Navigation post type entity.
+			await startEmptyButton.click();
 
-			// Publish the post
-			await page.click( '.editor-entities-saved-states__save-button' );
-			await page.waitForSelector( '.editor-post-publish-button' );
-			await page.click( '.editor-post-publish-button' );
+			// Publishing the Post ensures the Navigation entity is saved.
+			// The Post itself is irrelevant.
+			// await publishPost();
 
-			// A success notice should show up
-			await page.waitForSelector( '.components-snackbar' );
+			// Switch to a Contributor role user - they should not have
+			// permission to update Navigations.
+			// await loginUser( username, contribUserPassword );
 
-			// Now try inserting another Link block via the quick inserter.
-			await page.focus( '.wp-block-navigation' );
+			await createNewPost();
 
-			await resetNavBlockToInitialState();
-			await createEmptyNavBlock();
-			await populateNavWithOneItem();
+			await insertBlock( 'Navigation' );
 
-			// Let's confirm that only the last menu entity was updated.
-			await page.waitForSelector(
-				'.editor-post-publish-button__button:not([aria-disabled="true"])'
+			// Select the Navigation post created by the Admin early
+			// in the test.
+			const navigationPostCreatedByAdminName = 'Navigation';
+			const dropdown = await page.waitForXPath( SELECT_MENU_XPATH );
+			await dropdown.click();
+			const theOption = await page.waitForXPath(
+				`//*[contains(@class, 'components-menu-item__item')][ text()="${ navigationPostCreatedByAdminName }" ]`
 			);
-			await page.click( '.editor-post-publish-button__button' );
+			await theOption.click();
 
-			await page.waitForXPath( NAV_ENTITY_SELECTOR );
-			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+			// Make sure the snackbar error shows up
+			await page.waitForXPath(
+				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Menu. Any changes made will not be saved." ]`
+			);
+
+			// Expect a console 403 for request to Navigation Areas for lower permisison users.
+			// This is because reading requires the `edit_theme_options` capability
+			// which the Contributor level user does not have.
+			// See: https://github.com/WordPress/gutenberg/blob/4cedaf0c4abb0aeac4bfd4289d63e9889efe9733/lib/class-wp-rest-block-navigation-areas-controller.php#L81-L91.
+			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			expect( console ).toHaveErrored();
 		} );
 	} );
 } );

package/specs/editor/various/block-grouping.test.js

@@ -110,6 +110,52 @@ describe( 'Block Grouping', () => {
 			);
 			expect( ungroupButtons ).toHaveLength( 0 );
 		} );
+		it( 'should group and ungroup a controlled block properly', async () => {
+			const getParagraphText = async () => {
+				const paragraphInReusableSelector =
+					'.block-editor-block-list__block[data-type="core/block"] p';
+				await page.waitForSelector( paragraphInReusableSelector );
+				return page.$eval(
+					paragraphInReusableSelector,
+					( element ) => element.innerText
+				);
+			};
+
+			const paragraphText = 'hi';
+			const reusableBlockNameInputSelector =
+				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+			await insertBlock( 'Paragraph' );
+			await page.keyboard.type( paragraphText );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Add to Reusable blocks' );
+			const nameInput = await page.waitForSelector(
+				reusableBlockNameInputSelector
+			);
+			await nameInput.click();
+			await page.keyboard.type( 'Block' );
+			await page.keyboard.press( 'Enter' );
+
+			// Wait for creation to finish
+			await page.waitForXPath(
+				'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+			);
+			// Group
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Group' );
+
+			let group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 1 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toMatch( paragraphText );
+
+			await clickBlockToolbarButton( 'Options' );
+			await clickMenuItem( 'Ungroup' );
+			group = await page.$$( '[data-type="core/group"]' );
+			expect( group ).toHaveLength( 0 );
+			// Make sure the paragraph in reusable block exists.
+			expect( await getParagraphText() ).toEqual( paragraphText );
+		} );
 	} );
 
 	describe( 'Grouping Block availability', () => {

package/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichText should remove highlighting element 1`] = `
+"<!-- wp:paragraph -->
+<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`RichText should remove highlighting element 2`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;

package/specs/editor/various/format-library/text-color.test.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	getEditedPostContent,
+	clickBlockAppender,
+	pressKeyWithModifier,
+	clickBlockToolbarButton,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'RichText', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should remove highlighting element', async () => {
+		await clickBlockAppender();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await clickBlockToolbarButton( 'More' );
+
+		const button = await page.waitForXPath(
+			`//button[text()='Highlight']`
+		);
+		// Clicks may fail if the button is out of view. Assure it is before click.
+		await button.evaluate( ( element ) => element.scrollIntoView() );
+		await button.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const option = await page.waitForSelector(
+			'[aria-label="Color: Cyan bluish gray"]'
+		);
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await option.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

package/specs/site-editor/document-settings.test.js

@@ -13,7 +13,7 @@ async function getDocumentSettingsTitle() {
 		'.edit-site-document-actions__title'
 	);
 
-	return titleElement.evaluate( ( el ) => el.innerText );
+	return titleElement.evaluate( ( el ) => el.textContent );
 }
 
 async function getDocumentSettingsSecondaryTitle() {
@@ -21,7 +21,7 @@ async function getDocumentSettingsSecondaryTitle() {
 		'.edit-site-document-actions__secondary-item'
 	);
 
-	return secondaryTitleElement.evaluate( ( el ) => el.innerText );
+	return secondaryTitleElement.evaluate( ( el ) => el.textContent );
 }
 
 describe( 'Document Settings', () => {
@@ -50,7 +50,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'Index' );
+			expect( actual ).toEqual( 'Editing template: Index' );
 		} );
 
 		describe( 'and a template part is clicked in the template', () => {
@@ -70,7 +70,7 @@ describe( 'Document Settings', () => {
 				// Evaluate the document settings secondary title
 				const actual = await getDocumentSettingsSecondaryTitle();
 
-				expect( actual ).toEqual( 'Header' );
+				expect( actual ).toEqual( 'Editing template part: header' );
 			} );
 		} );
 	} );
@@ -86,7 +86,7 @@ describe( 'Document Settings', () => {
 			// Evaluate the document settings title
 			const actual = await getDocumentSettingsTitle();
 
-			expect( actual ).toEqual( 'header' );
+			expect( actual ).toEqual( 'Editing template part: header' );
 		} );
 	} );
 } );

package/specs/site-editor/multi-entity-saving.test.js

@@ -25,7 +25,7 @@ describe( 'Multi-entity save flow', () => {
 	const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
 	const savePanelSelector = '.entities-saved-states__panel';
 	const closePanelButtonSelector =
-		'.editor-post-publish-panel__header-cancel-button button';
+		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
 	const createNewButtonSelector =
 		'//button[contains(text(), "New template part")]';
 
@@ -84,8 +84,8 @@ describe( 'Multi-entity save flow', () => {
 			expect( multiSaveButton ).toBeNull();
 		};
 
-		it( 'Save flow should work as expected.', async () => {
-			await createNewPost();
+		// Template parts can't be used in posts, so this test needs to be rebuilt using perhaps reusable blocks.
+		it.skip( 'Save flow should work as expected.', async () => {
 			// Edit the page some.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( 'Test Post...' );
@@ -145,7 +145,10 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( savePanelSelector, false );
 
 			// Close publish panel.
-			await page.click( closePanelButtonSelector );
+			const closePanelButton = await page.waitForSelector(
+				closePanelButtonSelector
+			);
+			await closePanelButton.click();
 
 			// Verify saving is disabled.
 			const draftSaved = await page.waitForSelector( draftSavedSelector );
@@ -154,13 +157,22 @@ describe( 'Multi-entity save flow', () => {
 			await assertExistance( saveA11ySelector, false );
 
 			await publishPost();
+			// Wait for the success notice specifically for the published post.
+			// `publishPost()` has a similar check but it only checks for the
+			// existence of any snackbars. In this case, there's another "Site updated"
+			// notice which will be sufficient for that and thus creating a false-positive.
+			await page.waitForXPath(
+				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
+			);
 
 			// Update the post.
 			await page.click( '.editor-post-title' );
 			await page.keyboard.type( '...more title!' );
 
 			// Verify update button is enabled.
-			const enabledSaveButton = await page.$( enabledSavePostSelector );
+			const enabledSaveButton = await page.waitForSelector(
+				enabledSavePostSelector
+			);
 			expect( enabledSaveButton ).not.toBeNull();
 			// Verify multi-entity saving not enabled.
 			await assertMultiSaveDisabled();

package/specs/site-editor/settings-sidebar.test.js

@@ -77,12 +77,11 @@ describe( 'Settings sidebar', () => {
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {
 				title: 'Index',
-				description:
-					'The default template used when no other template is available. This is a required template in WordPress.',
+				description: 'Displays posts.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
 				title: '404',
-				description: 'Template shown when no content is found.',
+				description: 'Displays when no content is found.',
 			} );
 		} );
 	} );

package/specs/site-editor/template-part.test.js

@@ -280,7 +280,8 @@ describe( 'Template Part', () => {
 		const confirmTitleButtonSelector =
 			'.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary';
 
-		it( 'Should insert new template part on creation', async () => {
+		// Template parts can't be used in posts, so this test needs to be rebuilt for the template editor.
+		it.skip( 'Should insert new template part on creation', async () => {
 			await createNewPost();
 			await disablePrePublishChecks();
 			// Create new template part.