Add more E2E tests for Jetpack Social (#37046)

* Add more E2E tests for Jetpack Social

* Update the wpcom login step to check for the login button visibility

* Revert previous change and update wpcom login step

---------

Co-authored-by: Paul Bunkham <[email protected]>

projects/plugins/social/changelog/add-e2e-tests-for-social

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added more E2E tests

projects/plugins/social/tests/e2e/specs/admin-page.test.js

@@ -0,0 +1,23 @@
+import { prerequisitesBuilder } from 'jetpack-e2e-commons/env/prerequisites.js';
+import { expect, test } from 'jetpack-e2e-commons/fixtures/base-test.js';
+import { JetpackSocialPage } from '../pages/index.js';
+import logger from 'jetpack-e2e-commons/logger.js';
+
+test.beforeEach( async ( { page } ) => {
+	await prerequisitesBuilder( page )
+		.withCleanEnv()
+		.withActivePlugins( [ 'social' ] )
+		.withLoggedIn( true )
+		.build();
+} );
+
+test( 'Jetpack Social admin page', async ( { page } ) => {
+	logger.action( 'Visit the Jetpack Social admin page' );
+	await JetpackSocialPage.visit( page );
+
+	logger.action( 'Checking for heading "Jetpack Social"' );
+	await expect( page.getByRole( 'heading', { name: 'Jetpack Social' } ) ).toBeVisible();
+
+	logger.action( 'Checking for button "Get Started"' );
+	await expect( page.getByRole( 'button', { name: 'Get Started' } ) ).toBeVisible();
+} );

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

@@ -0,0 +1,51 @@
+import { prerequisitesBuilder } from 'jetpack-e2e-commons/env/prerequisites.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/block-editor.js';
+import { connect } from '../flows/index.js';
+
+test.beforeEach( async ( { page } ) => {
+	await prerequisitesBuilder( page )
+		.withCleanEnv()
+		.withActivePlugins( [ 'social' ] )
+		.withInactivePlugins( [ 'jetpack' ] )
+		.withLoggedIn( true )
+		.withWpComLoggedIn( true )
+		.build();
+} );
+
+test( 'Jetpack Social sidebar', async ( { page } ) => {
+	await test.step( 'Connect wordpress.com account', async () => {
+		await connect( page );
+	} );
+
+	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' );
+		await blockEditor.waitForEditor();
+
+		logger.action( 'Close "Welcome to the block editor" dialog' );
+		await blockEditor.resolveWelcomeGuide();
+
+		await blockEditor.setTitle( 'Jetpack Social test post' );
+	} );
+
+	await test.step( 'Check Social sidebar', async () => {
+		logger.action( 'Open Jetpack Social sidebar' );
+		await page.getByRole( 'button', { name: 'Jetpack Social', exact: true } ).click();
+
+		logger.action( 'Checking for "Preview" button' );
+		const previewButton = page.getByRole( 'button', { name: 'Open Social Previews', exact: true } );
+		await expect( previewButton ).toBeVisible();
+	} );
+} );

tools/e2e-commons/pages/wpcom/login.js

@@ -30,14 +30,9 @@ export default class LoginPage extends WpPage {
 			await this.fill( usernameSelector, credentials.username );
 			await this.click( continueButtonSelector );
 			await this.waitForElementToBeVisible( passwordSelector );
-			// Even if we wait for the field to become visible Playwright might still type the password too fast
-			// and the first characters will miss the password field. A short wait fixes this
-			await this.waitForTimeout( 2000 );
 			await this.fill( passwordSelector, credentials.password );
 			await this.click( submitButtonSelector );
-
-			await this.waitForDomContentLoaded();
-			await this.waitForElementToBeHidden( this.selectors[ 0 ] );
+			await this.waitForElementToBeHidden( submitButtonSelector );
 		} catch ( e ) {
 			if ( retry === true ) {
 				logger.warn( `The login didn't work as expected - retrying now: '${ e }'` );