Add end 2 end test tag creation (#13129)

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[contains(@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[contains(@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

@@ -36,6 +36,17 @@ describe( 'Taxonomies', () => {
 		);
 	};
 
+	const getCurrentTags = async () => {
+		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
+		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 () => {
 		await createNewPost();
 
@@ -44,14 +55,14 @@ describe( 'Taxonomies', () => {
 		const categoriesPanel = await findSidebarPanelWithTitle( 'Categories' );
 		expect( categoriesPanel ).toBeDefined();
 
-		// Open the categories panel.
-		await categoriesPanel.click( 'button' );
-
 		// If the user has no permission to add a new category finish the test.
-		if ( ! ( await canCreatTermInTaxonomy( 'category' ) ) ) {
+		if ( ! ( await canCreatTermInTaxonomy( 'categories' ) ) ) {
 			return;
 		}
 
+		// Open the categories panel.
+		await categoriesPanel.click( 'button' );
+
 		await page.waitForSelector( 'button.editor-post-taxonomies__hierarchical-terms-add' );
 
 		// Click add new category button.
@@ -93,4 +104,61 @@ describe( 'Taxonomies', () => {
 		expect( selectedCategories ).toHaveLength( 1 );
 		expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' );
 	} );
+
+	it( 'should be able to open the tags panel and create a new tag if the user has the right capabilities', async () => {
+		await createNewPost();
+
+		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 tag finish the test.
+		if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) {
+			return;
+		}
+
+		// Open the tags panel.
+		await tagsPanel.click( 'button' );
+
+		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' );
+
+		// Press enter to create a new tag.
+		await tagInput.press( 'Enter' );
+
+		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' );
+
+		// Type something in the title so we can publish the post.
+		await page.type( '.editor-post-title__input', 'Hello World' );
+
+		// Publish the post.
+		await publishPost();
+
+		// Reload the editor.
+		await page.reload();
+
+		// Wait for the tags to load.
+		page.waitForSelector( '.components-form-token-field__token' );
+
+		tags = await getCurrentTags();
+
+		// The tag selection was persisted after the publish process.
+		expect( tags ).toHaveLength( 1 );
+		expect( tags[ 0 ] ).toEqual( 'tag1' );
+	} );
 } );