Fix more end2end tests

WordPress · Jul 16, 2020 · 4603edd · 4603edd
1 parent dc2c833
commit 4603edd
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 53 deletions.
diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first } from 'lodash';
-
 /** @typedef {import('puppeteer').ElementHandle} ElementHandle */
 
 /**
@@ -13,13 +8,7 @@ import { first } from 'lodash';
  * @return {Promise<ElementHandle|undefined>} Object that represents an in-page DOM element.
  */
 export async function findSidebarPanelWithTitle( panelTitle ) {
-	const classSelect = ( className ) =>
-		`[contains(concat(" ", @class, " "), " ${ className } ")]`;
-	const buttonSelector = `//div${ classSelect(
-		'edit-post-sidebar'
-	) }//button${ classSelect( 'components-button' ) }${ classSelect(
-		'components-panel__body-toggle'
-	) }[contains(text(),"${ panelTitle }")]`;
-	const panelSelector = `${ buttonSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`;
-	return first( await page.$x( panelSelector ) );
+	const panelToggleSelector = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
+	const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`;
+	return await page.waitForXPath( panelSelector );
 }
diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js
@@ -9,7 +9,8 @@
 			PluginDocumentSettingPanel,
 			{
 				className: 'my-document-setting-plugin',
-				title: 'My Custom Panel'
+				title: 'My Custom Panel',
+				name: 'my-custom-panel'
 			},
 			__( 'My Document Setting Panel' )
 		);

diff --git a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
@@ -57,10 +57,11 @@ describe( 'Using Plugins API', () => {
 
 		it( 'Should render publish panel inside Post-publish sidebar', async () => {
 			await publishPost();
-
-			const pluginPublishPanelText = await page.$eval(
-				'.editor-post-publish-panel .my-publish-panel-plugin__post',
-				( el ) => el.innerText
+			const pluginPublishPanel = await page.waitForSelector(
+				'.editor-post-publish-panel .my-publish-panel-plugin__post'
+			);
+			const pluginPublishPanelText = await pluginPublishPanel.evaluate(
+				( node ) => node.innerText
 			);
 			expect( pluginPublishPanelText ).toMatch( 'My post publish panel' );
 		} );

diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
@@ -45,7 +45,9 @@ describe( 'adding blocks', () => {
 		await clickAtBottom(
 			await page.$( '.interface-interface-skeleton__content' )
 		);
-		expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
+		expect(
+			await page.waitForSelector( '[data-type="core/paragraph"]' )
+		).not.toBeNull();
 		await page.keyboard.type( 'Paragraph block' );
 
 		// Using the slash command

diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js
@@ -37,7 +37,6 @@ describe( 'Change detection', () => {
 		try {
 			page.on( 'dialog', handleOnDialog );
 			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
 
 			// Ensure whether it was expected that dialog was encountered.
 			expect( hadDialog ).toBe( isDirty );

diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink-panel.test.js
@@ -9,6 +9,8 @@ import {
 	publishPost,
 } from '@wordpress/e2e-test-utils';
 
+const permalinkPanelXPath = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"Permalink")]`;
+
 // This tests are not together with the remaining sidebar tests,
 // because we need to publish/save a post, to correctly test the permalink panel.
 // The sidebar test suit enforces that focus is never lost, but during save operations
@@ -28,9 +30,7 @@ describe( 'Sidebar Permalink Panel', () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
 			removeEditorPanel( 'post-link' );
 		} );
-		expect(
-			await findSidebarPanelWithTitle( 'Permalink' )
-		).toBeUndefined();
+		expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] );
 	} );
 
 	it( 'should not render link panel when post is publicly queryable but not public', async () => {
@@ -39,9 +39,7 @@ describe( 'Sidebar Permalink Panel', () => {
 		await publishPost();
 		// Start editing again.
 		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect(
-			await findSidebarPanelWithTitle( 'Permalink' )
-		).toBeUndefined();
+		expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] );
 	} );
 
 	it( 'should not render link panel when post is public but not publicly queryable', async () => {
@@ -50,9 +48,7 @@ describe( 'Sidebar Permalink Panel', () => {
 		await publishPost();
 		// Start editing again.
 		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect(
-			await findSidebarPanelWithTitle( 'Permalink' )
-		).toBeUndefined();
+		expect( await page.$x( permalinkPanelXPath ) ).toEqual( [] );
 	} );
 
 	it( 'should render link panel when post is public and publicly queryable', async () => {

diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js
@@ -122,7 +122,6 @@ describe( 'Sidebar', () => {
 	it( 'should be possible to programmatically remove Document Settings panels', async () => {
 		await createNewPost();
 		await enableFocusLossObservation();
-
 		await openDocumentSettingsSidebar();
 
 		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
@@ -147,19 +146,27 @@ describe( 'Sidebar', () => {
 			removeEditorPanel( 'post-status' );
 		} );
 
+		const getPanelToggleSelector = ( panelTitle ) => {
+			return `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
+		};
+
 		expect(
-			await findSidebarPanelWithTitle( 'Categories' )
-		).toBeUndefined();
-		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeUndefined();
+			await page.$x( getPanelToggleSelector( 'Categories' ) )
+		).toEqual( [] );
+		expect( await page.$x( getPanelToggleSelector( 'Tags' ) ) ).toEqual(
+			[]
+		);
 		expect(
-			await findSidebarPanelWithTitle( 'Featured image' )
-		).toBeUndefined();
-		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeUndefined();
+			await page.$x( getPanelToggleSelector( 'Featured image' ) )
+		).toEqual( [] );
+		expect( await page.$x( getPanelToggleSelector( 'Excerpt' ) ) ).toEqual(
+			[]
+		);
 		expect(
-			await findSidebarPanelWithTitle( 'Discussion' )
-		).toBeUndefined();
+			await page.$x( getPanelToggleSelector( 'Discussion' ) )
+		).toEqual( [] );
 		expect(
-			await findSidebarPanelWithTitle( 'Status & visibility' )
-		).toBeUndefined();
+			await page.$x( getPanelToggleSelector( 'Status & visibility' ) )
+		).toEqual( [] );
 	} );
 } );
diff --git a/packages/e2e-tests/specs/experiments/navigation.test.js b/packages/e2e-tests/specs/experiments/navigation.test.js
@@ -191,7 +191,7 @@ async function updateActiveNavigationLink( { url, label, type } ) {
 		// Wait for the autocomplete suggestion item to appear.
 		await page.waitForXPath( suggestionPath );
 		// Set the suggestion
-		const [ suggestion ] = await page.$x( suggestionPath );
+		const suggestion = await page.waitForXPath( suggestionPath );
 
 		// Select it (so we're clicking the right one, even if it's further down the list)
 		await suggestion.click();
@@ -218,15 +218,13 @@ async function updateActiveNavigationLink( { url, label, type } ) {
 }
 
 async function selectDropDownOption( optionText ) {
-	await page.waitForSelector(
+	const selectToggle = await page.waitForSelector(
 		'.wp-block-navigation-placeholder__select-control button'
 	);
-	await page.click(
-		'.wp-block-navigation-placeholder__select-control button'
+	await selectToggle.click();
+	const theOption = await page.waitForXPath(
+		`//li[text()="${ optionText }"]`
 	);
-
-	const [ theOption ] = await page.$x( `//li[text()="${ optionText }"]` );
-
 	await theOption.click();
 }
 
@@ -238,7 +236,7 @@ async function clickCreateButton() {
 	);
 
 	// Then locate...
-	const [ createNavigationButton ] = await page.$x(
+	const createNavigationButton = await page.waitForXPath(
 		`//button[text()="${ buttonText }"][not(@disabled)]`
 	);
 

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -31,14 +31,15 @@ describe( 'Template Part', () => {
 	} );
 
 	describe( 'Template part block', () => {
-		beforeEach( () =>
-			visitAdminPage(
+		beforeEach( async () => {
+			await visitAdminPage(
 				'admin.php',
 				addQueryArgs( '', {
 					page: 'gutenberg-edit-site',
 				} ).slice( 1 )
-			)
-		);
+			);
+			await page.waitForSelector( '.edit-site-visual-editor' );
+		} );
 
 		it( 'Should load customizations when in a template even if only the slug and theme attributes are set.', async () => {
 			// Switch to editing the header template part.