Social | Add e2e test for publicize activation from the editor (#40378)

* Enhance Block Editor E2E utility class

* Social | Add e2e test for publicize activation from the editor

* Improve social sidebar test

* Add changelog

* Trigger Jetpack E2E tests

* Update test path

* Update e2e-matrix.js

* Update the test for the updated link

.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',

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() {

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
+
+

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();
+	} );
+} );

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
+
+

projects/plugins/social/tests/e2e/specs/social-sidebar.test.js

@@ -19,19 +19,19 @@ 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();
 
 		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();
 	} );
 } );

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<boolean>} 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();
+		}
+	}
 }