diff --git a/.github/files/e2e-tests/e2e-matrix.js b/.github/files/e2e-tests/e2e-matrix.js index a2f232eb41a6d..144bf8df5b18a 100644 --- a/.github/files/e2e-tests/e2e-matrix.js +++ b/.github/files/e2e-tests/e2e-matrix.js @@ -26,6 +26,14 @@ const projects = [ suite: '', buildGroup: 'jetpack-core', }, + { + project: 'Jetpack post editor', + path: 'projects/plugins/jetpack/tests/e2e', + testArgs: [ 'specs/editor', '--retries=1' ], + targets: [ 'plugins/jetpack', 'packages/publicize' ], + suite: '', + buildGroup: 'jetpack-core', + }, { project: 'Jetpack sync', path: 'projects/plugins/jetpack/tests/e2e', diff --git a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx index d9e84e7c6f00b..3bf807c5d5954 100644 --- a/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx +++ b/projects/plugins/jetpack/_inc/client/sharing/publicize.jsx @@ -20,6 +20,9 @@ import { FEATURE_JETPACK_SOCIAL } from '../lib/plans/constants'; import SocialImageGeneratorSection from './features/social-image-generator-section'; import UtmToggleSection from './features/utm-toggle-section'; +/** + * Publicize module settings. + */ export const Publicize = withModuleSettingsFormHelpers( class extends Component { trackClickConfigure() { diff --git a/projects/plugins/jetpack/changelog/add-e2e-test-for-publicize-activation-from-the-editor b/projects/plugins/jetpack/changelog/add-e2e-test-for-publicize-activation-from-the-editor new file mode 100644 index 0000000000000..1448dd6733ffd --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-e2e-test-for-publicize-activation-from-the-editor @@ -0,0 +1,5 @@ +Significance: patch +Type: other +Comment: Social | Added e2e test for publicize activation from the editor + + diff --git a/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js b/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js new file mode 100644 index 0000000000000..0bb8368131b93 --- /dev/null +++ b/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js @@ -0,0 +1,48 @@ +import { prerequisitesBuilder } from 'jetpack-e2e-commons/env/index.js'; +import { expect, test } from 'jetpack-e2e-commons/fixtures/base-test.js'; +import logger from 'jetpack-e2e-commons/logger.js'; +import { BlockEditorPage } from 'jetpack-e2e-commons/pages/wp-admin/index.js'; + +test.beforeEach( async ( { page } ) => { + await prerequisitesBuilder( page ) + .withCleanEnv() + .withLoggedIn( true ) + .withWpComLoggedIn( true ) + .withConnection( true ) + .build(); +} ); + +test.describe( 'Editor sidebar: Social', () => { + test( 'Activation of publicize from the editor', async ( { page } ) => { + logger.sync( 'Creating new post' ); + + /** + * @type {BlockEditorPage} + */ + const blockEditor = await BlockEditorPage.visit( page ); + + await page.waitForURL( '**/post-new.php' ); + await blockEditor.waitForEditor(); + + logger.action( 'Close "Welcome to the block editor" dialog' ); + await blockEditor.closeWelcomeGuide(); + + logger.action( 'Open Jetpack sidebar' ); + await blockEditor.openSettings( 'Jetpack' ); + + const settingsSidebar = blockEditor.getEditorSettingsSidebar(); + + const socialPanel = settingsSidebar.getByRole( 'button', { + name: 'Share this post', + } ); + + logger.action( 'Expand "Share this post" panel' ); + await socialPanel.click(); + + const activateSocialLink = settingsSidebar.getByRole( 'link', { + name: 'Activate Jetpack Social', + } ); + + await expect( activateSocialLink ).toBeVisible(); + } ); +} ); diff --git a/projects/plugins/social/changelog/add-e2e-test-for-publicize-activation-from-the-editor b/projects/plugins/social/changelog/add-e2e-test-for-publicize-activation-from-the-editor new file mode 100644 index 0000000000000..5af1c99a84770 --- /dev/null +++ b/projects/plugins/social/changelog/add-e2e-test-for-publicize-activation-from-the-editor @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Updated E2E test + + diff --git a/projects/plugins/social/tests/e2e/specs/social-sidebar.test.js b/projects/plugins/social/tests/e2e/specs/social-sidebar.test.js index 78d078b68999b..aacc80ee42c19 100644 --- a/projects/plugins/social/tests/e2e/specs/social-sidebar.test.js +++ b/projects/plugins/social/tests/e2e/specs/social-sidebar.test.js @@ -19,6 +19,11 @@ test( 'Jetpack Social sidebar', async ( { page } ) => { await connect( page ); } ); + /** + * @type {BlockEditorPage} + */ + let blockEditor; + await test.step( 'Goto post edit page', async () => { logger.action( 'Hover over "Posts" in admin menu' ); await page.getByRole( 'link', { name: 'Posts', exact: true } ).hover(); @@ -26,12 +31,7 @@ test( 'Jetpack Social sidebar', async ( { page } ) => { logger.action( 'Click on "Add New Post" in admin menu' ); await page.getByRole( 'link', { name: 'Add New Post' } ).click(); - /** - * @type {BlockEditorPage} - */ - const blockEditor = await BlockEditorPage.init( page ); - - await page.waitForURL( '**/post-new.php' ); + blockEditor = await BlockEditorPage.visit( page ); await blockEditor.waitForEditor(); logger.action( 'Close "Welcome to the block editor" dialog' ); @@ -42,10 +42,12 @@ test( 'Jetpack Social sidebar', async ( { page } ) => { await test.step( 'Check Social sidebar', async () => { logger.action( 'Open Jetpack Social sidebar' ); - await page.getByRole( 'button', { name: 'Jetpack Social', exact: true } ).click(); + await blockEditor.openSettings( 'Jetpack Social' ); logger.action( 'Checking for "Preview" button' ); - const previewButton = page.getByRole( 'button', { name: 'Open Social Previews', exact: true } ); + const previewButton = blockEditor + .getEditorSettingsSidebar() + .getByRole( 'button', { name: 'Open Social Previews', exact: true } ); await expect( previewButton ).toBeVisible(); } ); } ); diff --git a/tools/e2e-commons/pages/wp-admin/block-editor.js b/tools/e2e-commons/pages/wp-admin/block-editor.js index dbeacce18ade9..519838b96d653 100644 --- a/tools/e2e-commons/pages/wp-admin/block-editor.js +++ b/tools/e2e-commons/pages/wp-admin/block-editor.js @@ -110,14 +110,107 @@ export default class BlockEditorPage extends WpPage { } async openSettingsSidebar() { - const settingsLocator = 'button[aria-label="Settings"][aria-pressed="false"]'; - - if ( await this.isElementVisible( settingsLocator ) ) { - await this.click( settingsLocator ); - } + await this.openSettings(); } async waitForEditor() { await this.canvasPage.canvas().locator( "h1[aria-label='Add title']" ).waitFor(); } + + /** + * Returns the editor top bar locator. + * + * @return {import('@playwright/test').Locator} The editor top bar locator. + */ + getEditorTopBar() { + return this.page.getByRole( 'region', { name: 'Editor top bar' } ); + } + + /** + * Returns the editor settings sidebar locator. + * + * @return {import('@playwright/test').Locator} The editor settings sidebar locator. + */ + getEditorSettingsSidebar() { + return this.page.getByRole( 'region', { name: 'Editor settings' } ); + } + + /** + * Returns the more options button instance. + * + * @return {import('@playwright/test').Locator} The more options button locator. + */ + getMoreOptionsButton() { + return this.getEditorTopBar().getByRole( 'button', { + name: 'Options', + exact: true, + } ); + } + + /** + * Given a Locator, determines whether the target button/toggle is + * in an expanded state. + * + * If the toggle is in the on state or otherwise in an expanded + * state, this method will return true. Otherwise, false. + * + * @param {import('@playwright/test').Locator} target - Target button. + * @return {Promise} True if target is in an expanded state. False otherwise. + */ + async #targetIsOpen( target ) { + const checked = await target.getAttribute( 'aria-checked' ); + const pressed = await target.getAttribute( 'aria-pressed' ); + const expanded = await target.getAttribute( 'aria-expanded' ); + return checked === 'true' || pressed === 'true' || expanded === 'true'; + } + + /* Editor Settings sidebar */ + + /** + * Opens the editor settings. + * + * @param {string} target - The target to open. Can be 'Settings', 'Jetpack', 'Jetpack Social'. + */ + async openSettings( target = 'Settings' ) { + let button = this.getEditorTopBar().getByLabel( target ); + + // For other pinned settings, we need to open the options menu + // because those are hidden on mobile/small screens + if ( target !== 'Settings' ) { + await this.openMoreOptionsMenu(); + + button = this.page.getByRole( 'menuitemcheckbox', { name: target } ); + } + + if ( await this.#targetIsOpen( button ) ) { + await this.closeMoreOptionsMenu(); + return; + } + + await button.click(); + } + + /** + * Opens the more options menu (three dots). + */ + async openMoreOptionsMenu() { + const button = this.getMoreOptionsButton(); + + if ( await this.#targetIsOpen( button ) ) { + return; + } + + await button.click(); + } + + /** + * Closes the more options menu. + */ + async closeMoreOptionsMenu() { + const button = this.getMoreOptionsButton(); + + if ( await this.#targetIsOpen( button ) ) { + await button.click(); + } + } }