Fix e2e tests

WordPress · youknowriad · Dec 1, 2022 · Sep 15, 2022 · Oct 14, 2022 · Oct 14, 2022
commit 6ae91c88023ec6e83cf70ca97938c4898c167299
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking changes
+
+-   Remove all the site editor navigation panel related utils: getSiteEditorMenuItem, isSiteEditorRoot, navigateSiteEditorBack, navigateSiteEditorBackToRoot, openSiteEditorNavigationPanel, siteEditorNavigateSequence, clickSiteEditorMenuItem, closeSiteEditorNavigationPanel.
+
 ## 8.6.0 (2022-11-16)
 
 ## 8.5.0 (2022-11-02)

diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
@@ -109,14 +109,6 @@ _Parameters_
 
 -   _buttonLabel_ `string`: The label to search the button for.
 
-### clickSiteEditorMenuItem
-
-Searches for an item in the navigation panel with the label provided and clicks it.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
 ### closeGlobalBlockInserter
 
 Undocumented declaration.
@@ -125,10 +117,6 @@ Undocumented declaration.
 
 Closes list view
 
-### closeSiteEditorNavigationPanel
-
-Closes the site editor navigation panel if open
-
 ### createEmbeddingMatcher
 
 Creates a function to determine if a request is embedding a certain URL.
@@ -453,18 +441,6 @@ _Returns_
 
 -   `Promise<?string>`: Promise resolving to a string or null, depending whether a page error is present.
 
-### getSiteEditorMenuItem
-
-Searches for an item in the site editor navigation menu with the provided label.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
-_Returns_
-
--   `Promise<?ElementHandle>`: The menu item handle or `null`
-
 ### hasBlockSwitcher
 
 Returns a boolean indicating if the current selected block has a block switcher or not.
@@ -555,17 +531,6 @@ _Returns_
 
 Undocumented declaration.
 
-### isSiteEditorRoot
-
-Returns `true` if in the site editor navigation root
-
-Checks whether the “Back to dashboard” button is visible. If
-not in the root, a “Back” button would be visible instead.
-
-_Returns_
-
--   `Promise<boolean>`: Whether it currently is the navigation root or not
-
 ### isThemeInstalled
 
 Checks whether a theme exists on the site.
@@ -602,14 +567,6 @@ _Returns_
 
 -   `Promise`: Promise that uses `mockCheck` to see if a request should be mocked with `mock`, and optionally transforms the response with `responseObjectTransform`.
 
-### navigateSiteEditorBack
-
-Navigates the site editor back
-
-### navigateSiteEditorBackToRoot
-
-Goes back until it gets to the root
-
 ### openDocumentSettingsSidebar
 
 Clicks on the button in the header which opens Document Settings sidebar when it is closed.
@@ -650,10 +607,6 @@ Opens the previous global styles panel.
 
 Opens the publish panel.
 
-### openSiteEditorNavigationPanel
-
-Opens the site editor navigation panel if closed
-
 ### openTypographyToolsPanelMenu
 
 Opens the Typography tools panel menu provided via block supports.
@@ -820,14 +773,6 @@ _Parameters_
 The block toolbar is not always visible while typing.
 Call this function to reveal it.
 
-### siteEditorNavigateSequence
-
-Navigates through a sequence of links in the site editor navigation panel
-
-_Parameters_
-
--   _labels_ `string[] | string`: Labels to navigate through
-
 ### switchEditorModeTo
 
 Switches editor mode.
@@ -846,6 +791,10 @@ running the test is not already the admin user).
 Switches the current user to whichever user we should be
 running the tests as (if we're not already that user).
 
+### toggleCanvasMode
+
+Switch between edit and view mode.
+
 ### toggleGlobalBlockInserter
 
 Toggles the global inserter.

diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
@@ -103,18 +103,11 @@ export {
 } from './rest-api';
 export { openListView, closeListView } from './list-view';
 export {
-	clickSiteEditorMenuItem,
-	closeSiteEditorNavigationPanel,
 	disableSiteEditorWelcomeGuide,
 	getCurrentSiteEditorContent,
-	getSiteEditorMenuItem,
-	isSiteEditorRoot,
-	navigateSiteEditorBack,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
 	visitSiteEditor,
 	toggleGlobalStyles,
+	toggleCanvasMode,
 	openGlobalStylesPanel,
 	openPreviousGlobalStylesPanel,
 } from './site-editor';

diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
@@ -9,52 +9,9 @@ import { addQueryArgs } from '@wordpress/url';
  */
 
 const SELECTORS = {
-	navigationPanel: {
-		backToDashboard:
-			'.edit-site-navigation-panel .edit-site-navigation-panel__back-to-dashboard',
-		goBack: '.components-navigation__back-button',
-		isOpenState: '.edit-site-navigation-toggle.is-open',
-		menuItem: ( label ) =>
-			`//div[contains(@class, "edit-site-navigation-panel")]//button[.//*[text()="${ label }"]]`,
-		open: '.edit-site-navigation-toggle__button',
-		panelContainer: '.edit-site-navigation-panel',
-	},
 	visualEditor: '.edit-site-visual-editor iframe',
 };
 
-/**
- * Searches for an item in the navigation panel with the label provided and clicks it.
- *
- * @param {string} label The label to search the menu item for.
- */
-export async function clickSiteEditorMenuItem( label ) {
-	const item = await getSiteEditorMenuItem( label );
-
-	if ( item ) {
-		await item.click();
-	} else {
-		throw new Error(
-			`Navigation item with label ${ label } was not found.`
-		);
-	}
-}
-
-/**
- * Closes the site editor navigation panel if open
- */
-export async function closeSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer, {
-			hidden: true,
-		} );
-	}
-}
-
 /**
  * Skips the welcome guide popping up to first time users of the site editor
  */
@@ -154,88 +111,6 @@ export function getCurrentSiteEditorContent() {
 	} );
 }
 
-/**
- * Searches for an item in the site editor navigation menu with the provided label.
- *
- * @param {string} label The label to search the menu item for.
- *
- * @return {Promise<?ElementHandle>} The menu item handle or `null`
- */
-export async function getSiteEditorMenuItem( label ) {
-	const { navigationPanel } = SELECTORS;
-
-	const item = await page.waitForXPath( navigationPanel.menuItem( label ), {
-		visible: true,
-	} );
-
-	return item;
-}
-
-/**
- * Returns `true` if in the site editor navigation root
- *
- * Checks whether the “Back to dashboard” button is visible. If
- * not in the root, a “Back” button would be visible instead.
- *
- * @return {Promise<boolean>} Whether it currently is the navigation root or not
- */
-export async function isSiteEditorRoot() {
-	const { navigationPanel } = SELECTORS;
-
-	const isBackToDashboardButtonVisible = !! ( await page.$(
-		navigationPanel.backToDashboard
-	) );
-
-	return isBackToDashboardButtonVisible;
-}
-
-/**
- * Navigates the site editor back
- */
-export async function navigateSiteEditorBack() {
-	const { navigationPanel } = SELECTORS;
-
-	await page.click( navigationPanel.goBack );
-}
-
-/**
- * Goes back until it gets to the root
- */
-export async function navigateSiteEditorBackToRoot() {
-	while ( ! ( await isSiteEditorRoot() ) ) {
-		await navigateSiteEditorBack();
-	}
-}
-
-/**
- * Opens the site editor navigation panel if closed
- */
-export async function openSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( ! isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer );
-	}
-}
-
-/**
- * Navigates through a sequence of links in the site editor navigation panel
- *
- * @param {string[] | string} labels Labels to navigate through
- */
-export async function siteEditorNavigateSequence( labels ) {
-	if ( ! Array.isArray( labels ) ) {
-		labels = [ labels ];
-	}
-
-	for ( const label of labels ) {
-		await clickSiteEditorMenuItem( label );
-	}
-}
-
 /**
  * Visits the Site Editor main page
  *
@@ -286,3 +161,10 @@ export async function openPreviousGlobalStylesPanel() {
 		'div[aria-label="Editor settings"] button[aria-label="Navigate to the previous view"]'
 	);
 }
+
+/**
+ * Switch between edit and view mode.
+ */
+export async function toggleCanvasMode() {
+	await page.click( '.edit-site-header__toggle' );
+}
@@ -6,8 +6,7 @@ import {
 	activateTheme,
 	setOption,
 	visitSiteEditor,
-	openSiteEditorNavigationPanel,
-	navigateSiteEditorBackToRoot,
+	toggleCanvasMode,
 	deleteAllTemplates,
 	canvas,
 } from '@wordpress/e2e-test-utils';
@@ -24,16 +23,16 @@ describe( 'Post Comments Form', () => {
 
 			// Navigate to "Singular" post template
 			await visitSiteEditor();
-			await openSiteEditorNavigationPanel();
-			await navigateSiteEditorBackToRoot();
 			await expect( page ).toClick(
-				'.components-navigation__item-title',
+				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
 			await expect( page ).toClick( '.components-heading > a', {
 				text: /singular/i,
 			} );
 
+			await toggleCanvasMode();
+
 			// Insert post comments form
 			await insertBlock( 'Post Comments Form' );
 

@@ -5,6 +5,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	toggleCanvasMode,
 	toggleGlobalStyles,
 	openGlobalStylesPanel,
 } from '@wordpress/e2e-test-utils';
@@ -26,6 +27,7 @@ describe( 'Global styles sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await toggleCanvasMode();
 	} );
 	describe( 'blocks list', () => {
 		it( 'should filter results properly', async () => {