@wordpress/e2e-tests 2.5.12 → 2.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "2.5.12",
+	"version": "2.5.13",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,5 +43,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
+	"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
 }

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/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")]';
 
@@ -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();