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 0000000000000..a4167fe6e2e6c --- /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 bd25778712675..ff60dca5f0078 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 5534c981f46a9..6f48ab320a206 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 7460b2aaeac31..3fdad97d46f64 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 94a0c04c81bcb..b2e7649f53b57 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 adb596e9d296a..087da816f4d6a 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' ); + } ); } );