Boost: Add e2e tests for Image Guide (#36716)

* Update Boost's CLI to include support for image guide module

* Add e2e tests for image guide

* Add Boost's image guide test configuration to e2e test matrix

* add changelog

.github/files/e2e-tests/e2e-matrix.js

@@ -58,6 +58,14 @@ const projects = [
 		suite: '',
 		buildGroup: 'jetpack-boost',
 	},
+	{
+		project: 'Jetpack Boost - Image Guide',
+		path: 'projects/plugins/boost/tests/e2e',
+		testArgs: [ 'specs/image-guide', '--retries=1' ],
+		targets: [ 'plugins/boost' ],
+		suite: '',
+		buildGroup: 'jetpack-boost',
+	},
 	{
 		project: 'Search',
 		path: 'projects/plugins/search/tests/e2e',

projects/plugins/boost/app/assets/src/js/features/module/module.tsx

@@ -58,7 +58,7 @@ const Module = ( {
 	}
 
 	return (
-		<div className={ styles.module }>
+		<div className={ styles.module } data-testid={ `module-${ slug }` }>
 			<div className={ styles.toggle }>
 				{ toggle && (
 					<ToggleControl

projects/plugins/boost/app/lib/class-cli.php

@@ -24,7 +24,7 @@ class CLI {
 	 */
 	private $jetpack_boost;
 
-	const MAKE_E2E_TESTS_WORK_MODULES = array( 'critical_css', 'render_blocking_js' );
+	const MAKE_E2E_TESTS_WORK_MODULES = array( 'critical_css', 'render_blocking_js', 'image_guide' );
 
 	/**
 	 * CLI constructor.

projects/plugins/boost/changelog/add-e2e-tests-image-guide

@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Add e2e tests for Image Guide module.
+
+

projects/plugins/boost/tests/e2e/lib/env/prerequisites.js

@@ -12,6 +12,7 @@ export function boostPrerequisitesBuilder( page ) {
 		connected: undefined,
 		jetpackDeactivated: undefined,
 		mockSpeedScore: undefined,
+		appendImage: undefined,
 	};
 
 	return {
@@ -35,6 +36,10 @@ export function boostPrerequisitesBuilder( page ) {
 			state.mockSpeedScore = shouldMockSpeedScore;
 			return this;
 		},
+		withAppendedImage( shouldAppendImage ) {
+			state.appendImage = shouldAppendImage;
+			return this;
+		},
 		withCleanEnv() {
 			state.clean = true;
 			return this;
@@ -52,6 +57,7 @@ async function buildPrerequisites( state, page ) {
 		testPostTitles: () => ensureTestPosts( state.testPostTitles ),
 		clean: () => ensureCleanState( state.clean ),
 		mockSpeedScore: () => ensureMockSpeedScoreState( state.mockSpeedScore ),
+		appendImage: () => ensureAppendedImage( state.appendImage ),
 	};
 
 	logger.prerequisites( JSON.stringify( state, null, 2 ) );
@@ -93,6 +99,16 @@ export async function ensureMockSpeedScoreState( mockSpeedScore ) {
 	}
 }
 
+export async function ensureAppendedImage( append ) {
+	if ( append ) {
+		logger.prerequisites( 'Appending image' );
+		await execWpCommand( 'plugin activate e2e-appended-image/e2e-appended-image.php' );
+	} else {
+		logger.prerequisites( 'Removing appended image' );
+		await execWpCommand( 'plugin deactivate e2e-appended-image/e2e-appended-image.php' );
+	}
+}
+
 export async function activateModules( modules ) {
 	for ( const module of modules ) {
 		logger.prerequisites( `Activating module ${ module }` );

projects/plugins/boost/tests/e2e/lib/pages/frontend/FirstPostPage.js

@@ -0,0 +1,24 @@
+import WpPage from 'jetpack-e2e-commons/pages/wp-page.js';
+import { resolveSiteUrl } from 'jetpack-e2e-commons/helpers/utils-helper.js';
+
+export default class FirstPostPage extends WpPage {
+	constructor( page ) {
+		const url = `${ resolveSiteUrl() }/?p=1`;
+		super( page, { url } );
+	}
+
+	async isImageGuideScriptPresent() {
+		const selector = '#jetpack-boost-guide-js';
+		return ( await this.page.locator( selector ).count() ) > 0;
+	}
+
+	async isImageGuideAdminBarItemPresent() {
+		const selector = '#wp-toolbar #jetpack-boost-guide-bar';
+		return ( await this.page.locator( selector ).count() ) > 0;
+	}
+
+	async isImageGuideUIPresent() {
+		const selector = '.jetpack-boost-guide > .guide';
+		return this.waitForElementToBeVisible( selector, 5 * 1000 );
+	}
+}

projects/plugins/boost/tests/e2e/lib/pages/index.js

@@ -1 +1,2 @@
 export { default as JetpackBoostPage } from './wp-admin/JetpackBoostPage.js';
+export { default as FirstPostPage } from './frontend/FirstPostPage.js';

projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/e2e-appended-image.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Boost E2E Appended image
+ * Description: Appends an image at the end of posts' content.
+ * Plugin URI: https://github.com/automattic/jetpack
+ * Author: Heart of Gold
+ * Version: 1.0.0
+ * Text Domain: jetpack
+ *
+ * @package automattic/jetpack
+ */
+
+add_filter(
+	'the_content',
+	function ( $content ) {
+		if ( is_single() ) {
+			$content .= '<p><img id="e2e-test-image" src="' . plugins_url( 'assets/e2e-image.png', __FILE__ ) . '" /></p>';
+		}
+		return $content;
+	}
+);

projects/plugins/boost/tests/e2e/specs/image-guide/image-guide.test.js

@@ -0,0 +1,50 @@
+import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js';
+import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js';
+import { FirstPostPage } from '../../lib/pages/index.js';
+import playwrightConfig from 'jetpack-e2e-commons/playwright.config.mjs';
+
+test.describe( 'Image CDN', () => {
+	let page;
+
+	test.beforeAll( async ( { browser } ) => {
+		page = await browser.newPage( playwrightConfig.use );
+		await boostPrerequisitesBuilder( page ).withCleanEnv( true ).withConnection( true ).build();
+	} );
+
+	test.afterAll( async () => {} );
+
+	test( 'Image Guide functionality shouldn`t be active when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'image_guide' ] ).build();
+		const firstPostPage = await FirstPostPage.visit( page );
+
+		expect(
+			await firstPostPage.isImageGuideScriptPresent(),
+			'Image Guide script shouldn`t be present'
+		).toBeFalsy();
+	} );
+
+	test( 'Image Guide functionality should be active when the module is active', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'image_guide' ] )
+			.withAppendedImage( true )
+			.build();
+		const firstPostPage = await FirstPostPage.visit( page );
+
+		expect(
+			await firstPostPage.isImageGuideScriptPresent(),
+			'Image Guide script should be present'
+		).toBeTruthy();
+
+		expect(
+			await firstPostPage.isImageGuideAdminBarItemPresent(),
+			'Image Guide admin bar item should be present'
+		).toBeTruthy();
+
+		console.log( await firstPostPage.isImageGuideUIPresent() );
+
+		expect(
+			await firstPostPage.isImageGuideUIPresent(),
+			'Image Guide UI item should be present'
+		).toBeTruthy();
+	} );
+} );

tools/docker/jetpack-docker-config-default.yml

@@ -61,6 +61,7 @@ e2e:
     tools/e2e-commons/plugins/e2e-plugin-updater.php: /var/www/html/wp-content/plugins/e2e-plugin-updater.php
     tools/e2e-commons/plugins/e2e-plan-data-interceptor.php: /var/www/html/wp-content/plugins/e2e-plan-data-interceptor.php
     tools/e2e-commons/plugins/e2e-waf-data-interceptor.php: /var/www/html/wp-content/plugins/e2e-waf-data-interceptor.php
+    projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/: /var/www/html/wp-content/plugins/e2e-appended-image/
     projects/plugins/boost/tests/e2e/plugins/e2e-mock-speed-score-api.php: /var/www/html/wp-content/plugins/e2e-mock-speed-score-api.php
     tools/e2e-commons/plugins/e2e-search-test-helper.php: /var/www/html/wp-content/plugins/e2e-search-test-helper.php
     tools/e2e-commons/plugins/e2e-wpcom-request-interceptor.php: /var/www/html/wp-content/plugins/e2e-wpcom-request-interceptor.php