Add smoke test for Social on Simple sites

packages/calypso-e2e/src/lib/components/editor-toolbar-component.ts

@@ -95,9 +95,10 @@ export class EditorToolbarComponent {
 	 * @returns {Promise<boolean>} True if target is in an expanded state. False otherwise.
 	 */
 	private async targetIsOpen( target: Locator ): Promise< boolean > {
+		const checked = await target.getAttribute( 'aria-checked' );
 		const pressed = await target.getAttribute( 'aria-pressed' );
 		const expanded = await target.getAttribute( 'aria-expanded' );
-		return pressed === 'true' || expanded === 'true';
+		return checked === 'true' || pressed === 'true' || expanded === 'true';
 	}
 
 	/* Block Inserter */
@@ -322,11 +323,21 @@ export class EditorToolbarComponent {
 
 		// To support i18n tests.
 		const translatedTargetName = await this.translateFromPage( target );
-		const button = editorParent
+
+		let button = editorParent
 			.locator( '.editor-header__settings, .edit-post-header__settings' )
 			.getByLabel( translatedTargetName );
 
+		// 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 = editorParent.getByRole( 'menuitemcheckbox', { name: translatedTargetName } );
+		}
+
 		if ( await this.targetIsOpen( button ) ) {
+			await this.closeMoreOptionsMenu();
 			return;
 		}
 
@@ -451,26 +462,41 @@ export class EditorToolbarComponent {
 	 * Opens the more options menu (three dots).
 	 */
 	async openMoreOptionsMenu(): Promise< void > {
-		// const label = await this.translateFromPage( moreOptionsLabel );
-		// const selector = selectors.moreOptionsButton( label );
+		const button = await this.getMoreOptionsButton();
+
+		if ( await this.targetIsOpen( button ) ) {
+			return;
+		}
+
+		await button.click();
+	}
+
+	/**
+	 * Closes the more options menu.
+	 */
+	async closeMoreOptionsMenu(): Promise< void > {
+		const button = await this.getMoreOptionsButton();
 
+		if ( await this.targetIsOpen( button ) ) {
+			await button.click();
+		}
+	}
+
+	/**
+	 * Returns the more options button instance.
+	 */
+	async getMoreOptionsButton() {
 		const editorParent = await this.editor.parent();
 
 		// To support i18n tests.
 		const translatedTargetName = await this.translateFromPage( 'Options' );
 		// Narrowing down to the "Editor top bar" is needed because it might conflict with
 		// the options button for the block toolbar, causing a strict-mode violation error
 		// due to duplicate elements on the page.
-		const button = editorParent.getByLabel( 'Editor top bar' ).getByRole( 'button', {
+		return editorParent.getByLabel( 'Editor top bar' ).getByRole( 'button', {
 			name: translatedTargetName,
 			exact: true,
 		} );
-
-		if ( await this.targetIsOpen( button ) ) {
-			return;
-		}
-
-		await button.click();
 	}
 
 	/** FSE unique buttons */

test/e2e/specs/jetpack/social__editor-smoke.ts

@@ -0,0 +1,50 @@
+/**
+ * @group calypso-pr
+ * @group jetpack-wpcom-integration
+ */
+
+import { DataHelper, EditorPage, SecretsManager, TestAccount } from '@automattic/calypso-e2e';
+import { Browser, Page } from 'playwright';
+
+declare const browser: Browser;
+
+/**
+ * Tests features offered by Jetpack Social.
+ *
+ * Keywords: Social, Jetpack, Publicize
+ */
+describe( DataHelper.createSuiteTitle( 'Social: Editor Smoke test' ), function () {
+	let page: Page;
+	let editorPage: EditorPage;
+
+	const siteSlug =
+		SecretsManager.secrets.testAccounts.simpleSiteFreePlanUser.testSites?.primary.url;
+
+	beforeAll( async () => {
+		page = await browser.newPage();
+		editorPage = new EditorPage( page );
+
+		const testAccount = new TestAccount( 'simpleSiteFreePlanUser' );
+		await testAccount.authenticate( page );
+	} );
+
+	it( 'Verify that Social UI is visible', async function () {
+		await editorPage.visit( 'post', { siteSlug } );
+
+		// Open the Jetpack sidebar.
+		await editorPage.openSettings( 'Jetpack' );
+
+		// Expand the Publicize panel.
+		await editorPage.expandSection( 'Share this post' );
+
+		const editorParent = await editorPage.getEditorParent();
+
+		const toggle = editorParent.getByLabel( 'Share when publishing' );
+
+		expect( await toggle.isChecked() ).toBe( false );
+
+		const link = editorParent.getByRole( 'link', { name: 'Connect an account' } );
+
+		expect( await link.isVisible() ).toBe( true );
+	} );
+} );