Navigation Editor: Fix failing e2e tests (#32043)

* Add missing await to 'assertIsDirty' async function * Fixe menu name e2e tests
WordPress · May 21, 2021 · cc41feb · cc41feb
1 parent 48137eb
commit cc41feb
Showing 1 changed file with 25 additions and 32 deletions.
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -3,6 +3,7 @@
  */
 import {
 	createJSONResponse,
+	pressKeyTimes,
 	pressKeyWithModifier,
 	setUpResponseMocking,
 	visitAdminPage,
@@ -384,10 +385,9 @@ describe( 'Navigation editor', () => {
 
 	describe( 'Menu name editor', () => {
 		const initialMenuName = 'Main Menu';
-		const navigationNameEditorSelector =
-			'.edit-navigation-name-editor__text-control';
-		const inputSelector = `${ navigationNameEditorSelector } input`;
-		let navigatorNameEditor, input;
+		const nameEditorSelector = '.edit-navigation-name-editor__text-control';
+		const inputSelector = `${ nameEditorSelector } input`;
+
 		beforeEach( async () => {
 			const menuPostResponse = {
 				id: 4,
@@ -408,19 +408,20 @@ describe( 'Navigation editor', () => {
 
 			await visitNavigationEditor();
 
-			navigatorNameEditor = await page.$( navigationNameEditorSelector );
-			input = await page.$( inputSelector );
+			// Wait for the navigation setting sidebar.
+			await page.waitForSelector( '.edit-navigation-sidebar' );
 		} );
 
 		afterEach( async () => {
 			await setUpResponseMocking( [] );
 		} );
 
 		it( 'is displayed in inspector additions', async () => {
-			expect( navigatorNameEditor ).toBeDefined();
+			const nameControl = await page.$( nameEditorSelector );
+			expect( nameControl ).toBeDefined();
 		} );
 
-		it.skip( 'saves menu name upon clicking save button', async () => {
+		it( 'saves menu name upon clicking save button', async () => {
 			const newName = 'newName';
 			const menuPostResponse = {
 				id: 4,
@@ -439,17 +440,10 @@ describe( 'Navigation editor', () => {
 				...getMenuItemMocks( { GET: [] } ),
 			] );
 
-			await input.focus();
-
-			// clear input
-			const oldName = await page.$eval(
-				inputSelector,
-				( el ) => el.value
-			);
-			for ( let i = 0; i < oldName.length; i++ ) {
-				await page.keyboard.press( 'Backspace' );
-			}
-			await input.type( newName );
+			// Ensure there is focus.
+			await page.focus( inputSelector );
+			await pressKeyTimes( 'Backspace', initialMenuName.length );
+			await page.keyboard.type( newName );
 
 			const saveButton = await page.$(
 				'.edit-navigation-toolbar__save-button'
@@ -483,14 +477,11 @@ describe( 'Navigation editor', () => {
 				} ),
 				...getMenuItemMocks( { GET: [] } ),
 			] );
-			await input.focus();
-			const oldName = await page.$eval(
-				inputSelector,
-				( el ) => el.value
-			);
-			for ( let i = 0; i < oldName.length; i++ ) {
-				await page.keyboard.press( 'Backspace' );
-			}
+
+			// Ensure there is focus.
+			await page.focus( inputSelector );
+			await pressKeyTimes( 'Backspace', initialMenuName.length );
+
 			const saveButton = await page.$(
 				'.edit-navigation-toolbar__save-button'
 			);
@@ -503,7 +494,9 @@ describe( 'Navigation editor', () => {
 			const headerSubtitleText = await headerSubtitle.evaluate(
 				( element ) => element.innerText
 			);
-			expect( headerSubtitleText ).toBe( `Editing: ${ oldName }` );
+			expect( headerSubtitleText ).toBe(
+				`Editing: ${ initialMenuName }`
+			);
 		} );
 	} );
 
@@ -553,17 +546,17 @@ describe( 'Navigation editor', () => {
 			}
 		}
 
-		it.skip( 'should not prompt to confirm unsaved changes for the newly selected menu', async () => {
-			assertIsDirty( false );
+		it( 'should not prompt to confirm unsaved changes for the newly selected menu', async () => {
+			await assertIsDirty( false );
 		} );
 
-		it.skip( 'should prompt to confirm unsaved changes when menu name is edited', async () => {
+		it( 'should prompt to confirm unsaved changes when menu name is edited', async () => {
 			await page.type(
 				'.edit-navigation-name-editor__text-control input',
 				' Menu'
 			);
 
-			assertIsDirty( true );
+			await assertIsDirty( true );
 		} );
 	} );
 } );