From 9d4669a91b58e76797dd82cbe43f36211fb81d81 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 15:46:55 +0530 Subject: [PATCH 1/8] Enhance Block Editor E2E utility class --- .../pages/wp-admin/block-editor.js | 103 +++++++++++++++++- 1 file changed, 98 insertions(+), 5 deletions(-) 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(); + } + } } From e033a20f41d7ee4d5555033422260d59049328cf Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 15:47:08 +0530 Subject: [PATCH 2/8] Social | Add e2e test for publicize activation from the editor --- .../e2e/specs/social/editor-sidebar.test.js | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js diff --git a/projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js b/projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js new file mode 100644 index 0000000000000..6b254fe517d14 --- /dev/null +++ b/projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js @@ -0,0 +1,70 @@ +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 activateSocialButton = settingsSidebar.getByRole( 'button', { + name: 'Activate Jetpack Social', + } ); + + logger.action( 'Activate Jetpack Social' ); + await Promise.all( [ + activateSocialButton.click(), + page.waitForRequest( request => { + // We need to consider both pretty and ugly permalink structures + const route = 'jetpack/v4/module/publicize/active'; + + return ( + request.url().includes( route ) || + new URL( request.url() ).searchParams.get( 'rest_route' ).includes( route ) + ); + } ), + ] ); + + logger.action( 'Verify that the social panel is still there' ); + await expect( socialPanel ).toBeVisible(); + + const element = blockEditor.getEditorSettingsSidebar().getByLabel( 'Share when publishing' ); + + await element.waitFor(); + + // Should be unchecked by default because there are no connections + await expect( element ).not.toBeChecked(); + } ); +} ); From 26cc5d8333b9453aead5a57e6636301afb93afdb Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 15:47:22 +0530 Subject: [PATCH 3/8] Improve social sidebar test --- .../tests/e2e/specs/social-sidebar.test.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) 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(); } ); } ); From 739ec6ff8acc2a6027cf51e3e99b04ef3ed4251d Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 15:48:43 +0530 Subject: [PATCH 4/8] Add changelog --- .../add-e2e-test-for-publicize-activation-from-the-editor | 5 +++++ .../add-e2e-test-for-publicize-activation-from-the-editor | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-e2e-test-for-publicize-activation-from-the-editor create mode 100644 projects/plugins/social/changelog/add-e2e-test-for-publicize-activation-from-the-editor 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/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 + + From 1c14d8185782cc40eae1b1b72dff35339c2ff6bd Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 16:03:58 +0530 Subject: [PATCH 5/8] Trigger Jetpack E2E tests --- projects/plugins/jetpack/_inc/client/sharing/publicize.jsx | 3 +++ 1 file changed, 3 insertions(+) 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() { From afee116f41a7f15c171e02f5dd66beff66c7eb1b Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 16:26:22 +0530 Subject: [PATCH 6/8] Update test path --- .../editor-sidebar.test.js => editor/sidebar-social.test.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename projects/plugins/jetpack/tests/e2e/specs/{social/editor-sidebar.test.js => editor/sidebar-social.test.js} (100%) diff --git a/projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js b/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js similarity index 100% rename from projects/plugins/jetpack/tests/e2e/specs/social/editor-sidebar.test.js rename to projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js From 13bf7cb9b9b446690f79d93f3fcb9fd4ee2ad025 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Thu, 28 Nov 2024 16:26:30 +0530 Subject: [PATCH 7/8] Update e2e-matrix.js --- .github/files/e2e-tests/e2e-matrix.js | 8 ++++++++ 1 file changed, 8 insertions(+) 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', From 40bec25489a57bee16108d23d27dd025a6d49e1a Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Fri, 29 Nov 2024 16:13:25 +0530 Subject: [PATCH 8/8] Update the test for the updated link --- .../e2e/specs/editor/sidebar-social.test.js | 26 ++----------------- 1 file changed, 2 insertions(+), 24 deletions(-) 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 index 6b254fe517d14..0bb8368131b93 100644 --- a/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js +++ b/projects/plugins/jetpack/tests/e2e/specs/editor/sidebar-social.test.js @@ -39,32 +39,10 @@ test.describe( 'Editor sidebar: Social', () => { logger.action( 'Expand "Share this post" panel' ); await socialPanel.click(); - const activateSocialButton = settingsSidebar.getByRole( 'button', { + const activateSocialLink = settingsSidebar.getByRole( 'link', { name: 'Activate Jetpack Social', } ); - logger.action( 'Activate Jetpack Social' ); - await Promise.all( [ - activateSocialButton.click(), - page.waitForRequest( request => { - // We need to consider both pretty and ugly permalink structures - const route = 'jetpack/v4/module/publicize/active'; - - return ( - request.url().includes( route ) || - new URL( request.url() ).searchParams.get( 'rest_route' ).includes( route ) - ); - } ), - ] ); - - logger.action( 'Verify that the social panel is still there' ); - await expect( socialPanel ).toBeVisible(); - - const element = blockEditor.getEditorSettingsSidebar().getByLabel( 'Share when publishing' ); - - await element.waitFor(); - - // Should be unchecked by default because there are no connections - await expect( element ).not.toBeChecked(); + await expect( activateSocialLink ).toBeVisible(); } ); } );