Boost: Add tests for Image CDN (#36694)

* Add tests for Image CDN

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

* add changelog

* Remove e2e helper plugin

.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: 'Jetpack Boost - Image Guide',
 		path: 'projects/plugins/boost/tests/e2e',

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', 'image_guide' );
+	const MAKE_E2E_TESTS_WORK_MODULES = array( 'critical_css', 'render_blocking_js', 'image_cdn', 'image_guide' );
 
 	/**
 	 * 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/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/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/ );
+	} );
+} );