Boost: Add tests for Image CDN

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

@@ -58,6 +58,14 @@ const projects = [
 		suite: '',
 		buildGroup: 'jetpack-boost',
 	},
+	{
+		project: 'Jetpack Boost - Image CDN',
+		path: 'projects/plugins/boost/tests/e2e',
+		testArgs: [ 'specs/image-cdn', '--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_cdn' );
 
 	/**
 	 * CLI constructor.

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

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

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-image-cdn/e2e-image-cdn.php' );
+	} else {
+		logger.prerequisites( 'Removing appended image' );
+		await execWpCommand( 'plugin deactivate e2e-image-cdn/e2e-image-cdn.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,9 @@
+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 } );
+	}
+}

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/lib/pages/wp-admin/JetpackBoostPage.js

@@ -126,6 +126,11 @@ export default class JetpackBoostPage extends WpPage {
 		return this.waitForElementToBeVisible( selector );
 	}
 
+	async isImageCdnUpgradeSectionVisible() {
+		const selector = '[data-testid="module-image_cdn"] >> text=For more control over image quality';
+		return this.page.isVisible( selector );
+	}
+
 	async navigateToMainSettingsPage() {
 		await this.page.click( 'text=Go back' );
 	}

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

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Boost E2E Image CDN helper
+ * Description: Appends an image to site footer.
+ * 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-cdn/image-cdn.test.js

@@ -0,0 +1,63 @@
+import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js';
+import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js';
+import { JetpackBoostPage, 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( 'No Image CDN meta information should show on the admin when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'image_cdn' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isImageCdnUpgradeSectionVisible(),
+			'Image CDN upgrade section should not be visible'
+		).toBeFalsy();
+	} );
+
+	test( 'Image CDN functionality shouldn`t be active when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withInactiveModules( [ 'image_cdn' ] )
+			.withAppendedImage( true )
+			.build();
+		const firstPostPage = await FirstPostPage.visit( page );
+
+		expect(
+			// The image is added via a helper plugin.
+			await firstPostPage.page.locator( '[id="e2e-test-image"]' ).getAttribute( 'src' ),
+			'Image shouldn`t use CDN'
+		).not.toMatch( /https:\/\/.*\.wp\.com/ );
+	} );
+
+	test( 'Upgrade section should be visible when the module is active', async () => {
+		await boostPrerequisitesBuilder( page ).withActiveModules( [ 'image_cdn' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isImageCdnUpgradeSectionVisible(),
+			'Image CDN upgrade section should be visible'
+		).toBeTruthy();
+	} );
+
+	test( 'Image should be loaded via CDN when Image CDN is active', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'image_cdn' ] )
+			.withAppendedImage( true )
+			.build();
+		const firstPostPage = await FirstPostPage.visit( page );
+
+		expect(
+			// The image is added via a helper plugin.
+			await firstPostPage.page.locator( '[id="e2e-test-image"]' ).getAttribute( 'src' ),
+			'Image should use CDN'
+		).toMatch( /https:\/\/.*\.wp\.com/ );
+	} );
+} );

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-image-cdn/: /var/www/html/wp-content/plugins/e2e-image-cdn/
     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