From 5336ce71ffbeb0138658a1c10020963392276743 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 14 Feb 2019 13:56:53 +0000
Subject: [PATCH] Add end 2 end test tag creation (#13129)
---
...-sidebar-panel-toggle-button-with-title.js | 15 ++++
.../src/find-sidebar-panel-with-title.js | 7 +-
packages/e2e-test-utils/src/index.js | 1 +
.../specs/new-post-default-content.test.js | 4 +-
.../specs/plugins/meta-boxes.test.js | 4 +-
packages/e2e-tests/specs/taxonomies.test.js | 76 ++++++++++++++++++-
6 files changed, 97 insertions(+), 10 deletions(-)
create mode 100644 packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js
diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js
new file mode 100644
index 00000000000000..a4167fe6e2e6cd
--- /dev/null
+++ b/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 }")]` ) );
+}
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
index bd257787126758..ff60dca5f00782 100644
--- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
+++ b/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 ) );
}
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index 5534c981f46a9e..6f48ab320a206b 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/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';
diff --git a/packages/e2e-tests/specs/new-post-default-content.test.js b/packages/e2e-tests/specs/new-post-default-content.test.js
index 7460b2aaeac319..3fdad97d46f64e 100644
--- a/packages/e2e-tests/specs/new-post-default-content.test.js
+++ b/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' );
}
diff --git a/packages/e2e-tests/specs/plugins/meta-boxes.test.js b/packages/e2e-tests/specs/plugins/meta-boxes.test.js
index 94a0c04c81bcb7..b2e7649f53b57b 100644
--- a/packages/e2e-tests/specs/plugins/meta-boxes.test.js
+++ b/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' );
}
diff --git a/packages/e2e-tests/specs/taxonomies.test.js b/packages/e2e-tests/specs/taxonomies.test.js
index adb596e9d296a9..087da816f4d6a2 100644
--- a/packages/e2e-tests/specs/taxonomies.test.js
+++ b/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' );
+ } );
} );