diff --git a/.github/files/e2e-tests/e2e-matrix.js b/.github/files/e2e-tests/e2e-matrix.js
index 2f9ef1cd249fb..2fe2e44f53220 100644
--- a/.github/files/e2e-tests/e2e-matrix.js
+++ b/.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',
diff --git a/projects/plugins/boost/app/assets/src/js/features/module/module.tsx b/projects/plugins/boost/app/assets/src/js/features/module/module.tsx
index 71d5c97434124..eaf40d209dde2 100644
--- a/projects/plugins/boost/app/assets/src/js/features/module/module.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/module/module.tsx
@@ -58,7 +58,7 @@ const Module = ( {
}
return (
-
+
{ toggle && (
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 }` );
diff --git a/projects/plugins/boost/tests/e2e/lib/pages/frontend/FirstPostPage.js b/projects/plugins/boost/tests/e2e/lib/pages/frontend/FirstPostPage.js
new file mode 100644
index 0000000000000..3ccd30133b6dc
--- /dev/null
+++ b/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 );
+ }
+}
diff --git a/projects/plugins/boost/tests/e2e/lib/pages/index.js b/projects/plugins/boost/tests/e2e/lib/pages/index.js
index 589048da796ce..474734695266c 100644
--- a/projects/plugins/boost/tests/e2e/lib/pages/index.js
+++ b/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';
diff --git a/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/assets/e2e-image.png b/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/assets/e2e-image.png
new file mode 100644
index 0000000000000..94ec9a10839b4
Binary files /dev/null and b/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/assets/e2e-image.png differ
diff --git a/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/e2e-appended-image.php b/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/e2e-appended-image.php
new file mode 100644
index 0000000000000..6857036453c98
--- /dev/null
+++ b/projects/plugins/boost/tests/e2e/plugins/e2e-appended-image/e2e-appended-image.php
@@ -0,0 +1,21 @@
+';
+ }
+ return $content;
+ }
+);
diff --git a/projects/plugins/boost/tests/e2e/specs/image-guide/image-guide.test.js b/projects/plugins/boost/tests/e2e/specs/image-guide/image-guide.test.js
new file mode 100644
index 0000000000000..767a7260c0a77
--- /dev/null
+++ b/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();
+ } );
+} );
diff --git a/tools/docker/jetpack-docker-config-default.yml b/tools/docker/jetpack-docker-config-default.yml
index 63ac16823faa9..723e425b689e2 100644
--- a/tools/docker/jetpack-docker-config-default.yml
+++ b/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