Refactor findSidebarPanelWithTitle

packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { first } from 'lodash';
+
+/**
+ * Finds a sidebar panel with the provided title.
+ *
+ * @param {string} panelTitle The name of sidebar panel.
+ *
+ * @return {?ElementHandle} Object that represents an in-page DOM element.
+ */
+export async function findSidebarPanelToggleButtonWithTitle( panelTitle ) {
+	return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) );
+}

packages/e2e-test-utils/src/find-sidebar-panel-with-title.js

@@ -4,12 +4,15 @@
 import { first } from 'lodash';
 
 /**
- * Finds a sidebar panel with the provided title.
+ * Finds the button responsible for toggling the sidebar panel with the provided title.
  *
  * @param {string} panelTitle The name of sidebar panel.
  *
  * @return {?ElementHandle} Object that represents an in-page DOM element.
  */
 export async function findSidebarPanelWithTitle( panelTitle ) {
-	return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ 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 await page.$x( panelSelector ) );
 }

packages/e2e-test-utils/src/index.js

@@ -12,6 +12,7 @@ export { disablePrePublishChecks } from './disable-pre-publish-checks';
 export { enablePageDialogAccept } from './enable-page-dialog-accept';
 export { enablePrePublishChecks } from './enable-pre-publish-checks';
 export { ensureSidebarOpened } from './ensure-sidebar-opened';
+export { findSidebarPanelToggleButtonWithTitle } from './find-sidebar-panel-toggle-button-with-title';
 export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title';
 export { getAllBlocks } from './get-all-blocks';
 export { getAvailableBlockTransforms } from './get-available-block-transforms';

packages/e2e-tests/specs/new-post-default-content.test.js

@@ -5,7 +5,7 @@ import {
 	activatePlugin,
 	createNewPost,
 	deactivatePlugin,
-	findSidebarPanelWithTitle,
+	findSidebarPanelToggleButtonWithTitle,
 	getEditedPostContent,
 	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
@@ -33,7 +33,7 @@ describe( 'new editor filtered state', () => {
 
 		// open the sidebar, we want to see the excerpt.
 		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelWithTitle( 'Excerpt' );
+		const excerptButton = await findSidebarPanelToggleButtonWithTitle( 'Excerpt' );
 		if ( excerptButton ) {
 			await excerptButton.click( 'button' );
 		}

packages/e2e-tests/specs/plugins/meta-boxes.test.js

@@ -5,7 +5,7 @@ import {
 	activatePlugin,
 	createNewPost,
 	deactivatePlugin,
-	findSidebarPanelWithTitle,
+	findSidebarPanelToggleButtonWithTitle,
 	insertBlock,
 	openDocumentSettingsSidebar,
 	publishPost,
@@ -98,7 +98,7 @@ describe( 'Meta boxes', () => {
 
 		// Open the excerpt panel
 		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelWithTitle( 'Excerpt' );
+		const excerptButton = await findSidebarPanelToggleButtonWithTitle( 'Excerpt' );
 		if ( excerptButton ) {
 			await excerptButton.click( 'button' );
 		}

packages/e2e-tests/specs/taxonomies.test.js

@@ -38,15 +38,13 @@ describe( 'Taxonomies', () => {
 
 	const getCurrentTags = async () => {
 		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
-		return tagsPanel.$eval( '*', ( node ) => {
-			return Array.from(
-				node.parentElement.parentElement.parentElement.querySelectorAll(
-					'.components-form-token-field__token-text span:not(.screen-reader-text)'
-				)
-			).map( ( spanNode ) => {
-				return spanNode.innerText;
+		return page.evaluate( ( node ) => {
+			return Array.from( node.querySelectorAll(
+				'.components-form-token-field__token-text span:not(.screen-reader-text)'
+			) ).map( ( field ) => {
+				return field.innerText;
 			} );
-		} );
+		}, tagsPanel );
 	};
 
 	it( 'should be able to open the categories panel and create a new main category if the user has the right capabilities', async () => {
@@ -113,35 +111,37 @@ describe( 'Taxonomies', () => {
 		await openDocumentSettingsSidebar();
 
 		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
+
+		//expect( await page.evaluate( ( el ) => el.outerHTML, tagsPanel ) ).toEqual( 'tag1 ok' );
 		expect( tagsPanel ).toBeDefined();
 
-		// If the user has no permission to add a new category finish the test.
+		// If the user has no permission to add a new tag finish the test.
 		if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) {
 			return;
 		}
 
 		// Open the tags panel.
 		await tagsPanel.click( 'button' );
 
-		const tagInput = await page.$( '.components-form-token-field__input' );
+		const tagInput = await tagsPanel.$( '.components-form-token-field__input' );
 
 		// Click the tag input field.
 		await tagInput.click();
 
 		// Type the category name in the field.
-		await tagInput.type( 'tag1 ok' );
+		await tagInput.type( 'tag1' );
 
 		// Press enter to create a new tag.
 		await tagInput.press( 'Enter' );
 
-		page.waitForSelector( '.components-form-token-field__token' );
+		await page.waitForSelector( '.components-form-token-field__token' );
 
 		// Get an array with the tags of the post.
 		let tags = await getCurrentTags();
 
 		// The post should only contain the tag we added.
 		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( 'tag1 ok' );
+		expect( tags[ 0 ] ).toEqual( 'tag1' );
 
 		// Type something in the title so we can publish the post.
 		await page.type( '.editor-post-title__input', 'Hello World' );
@@ -159,6 +159,6 @@ describe( 'Taxonomies', () => {
 
 		// The tag selection was persisted after the publish process.
 		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( 'tag1 ok' );
+		expect( tags[ 0 ] ).toEqual( 'tag1' );
 	} );
 } );