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