From a8fc2475033699c8b35244979cb44cf9c7db419d Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Tue, 2 Apr 2024 15:32:27 +0300 Subject: [PATCH 1/4] Add tests for Image CDN --- .../assets/src/js/features/module/module.tsx | 2 +- projects/plugins/boost/app/lib/class-cli.php | 2 +- .../boost/tests/e2e/lib/env/prerequisites.js | 16 +++++ .../e2e/lib/pages/frontend/FirstPostPage.js | 9 +++ .../boost/tests/e2e/lib/pages/index.js | 1 + .../lib/pages/wp-admin/JetpackBoostPage.js | 5 ++ .../e2e-image-cdn/assets/e2e-image.png | Bin 0 -> 2727 bytes .../plugins/e2e-image-cdn/e2e-image-cdn.php | 21 ++++++ .../e2e/specs/image-cdn/image-cdn.test.js | 63 ++++++++++++++++++ .../docker/jetpack-docker-config-default.yml | 1 + 10 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 projects/plugins/boost/tests/e2e/lib/pages/frontend/FirstPostPage.js create mode 100644 projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png create mode 100644 projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/e2e-image-cdn.php create mode 100644 projects/plugins/boost/tests/e2e/specs/image-cdn/image-cdn.test.js 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-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 }` ); 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..8fdebdbdf1f71 --- /dev/null +++ b/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 } ); + } +} 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/lib/pages/wp-admin/JetpackBoostPage.js b/projects/plugins/boost/tests/e2e/lib/pages/wp-admin/JetpackBoostPage.js index 03deb3722394c..a2f1b8a8c27bc 100644 --- a/projects/plugins/boost/tests/e2e/lib/pages/wp-admin/JetpackBoostPage.js +++ b/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' ); } diff --git a/projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png b/projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png new file mode 100644 index 0000000000000000000000000000000000000000..94ec9a10839b4de1898f18b1261fa836d4894922 GIT binary patch literal 2727 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

'; + } + return $content; + } +); diff --git a/projects/plugins/boost/tests/e2e/specs/image-cdn/image-cdn.test.js b/projects/plugins/boost/tests/e2e/specs/image-cdn/image-cdn.test.js new file mode 100644 index 0000000000000..a62725903da86 --- /dev/null +++ b/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/ ); + } ); +} ); diff --git a/tools/docker/jetpack-docker-config-default.yml b/tools/docker/jetpack-docker-config-default.yml index 63ac16823faa9..1d3373e5c079e 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-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 From 08cd5436e538cf48664f72c878bd47deb8a829c7 Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Tue, 2 Apr 2024 15:35:05 +0300 Subject: [PATCH 2/4] Add Boost's image cdn test configuration to e2e test matrix --- .github/files/e2e-tests/e2e-matrix.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/files/e2e-tests/e2e-matrix.js b/.github/files/e2e-tests/e2e-matrix.js index 2f9ef1cd249fb..2fa6d5c7e0ff4 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 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', From 412ea7c8794fa82590ba63a428796578af13f9f5 Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Tue, 2 Apr 2024 15:35:29 +0300 Subject: [PATCH 3/4] add changelog --- projects/plugins/boost/changelog/add-e2e-tests-image-cdn | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 projects/plugins/boost/changelog/add-e2e-tests-image-cdn diff --git a/projects/plugins/boost/changelog/add-e2e-tests-image-cdn b/projects/plugins/boost/changelog/add-e2e-tests-image-cdn new file mode 100644 index 0000000000000..af35e80b0a9c9 --- /dev/null +++ b/projects/plugins/boost/changelog/add-e2e-tests-image-cdn @@ -0,0 +1,5 @@ +Significance: patch +Type: added +Comment: Add e2e tests for Image CDN. + + From 8f732f360ba16ddcffcba997e421247d11a21bf2 Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Wed, 3 Apr 2024 16:22:17 +0300 Subject: [PATCH 4/4] Remove e2e helper plugin --- .../e2e-image-cdn/assets/e2e-image.png | Bin 2727 -> 0 bytes .../plugins/e2e-image-cdn/e2e-image-cdn.php | 21 ------------------ 2 files changed, 21 deletions(-) delete mode 100644 projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png delete mode 100644 projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/e2e-image-cdn.php diff --git a/projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png b/projects/plugins/boost/tests/e2e/plugins/e2e-image-cdn/assets/e2e-image.png deleted file mode 100644 index 94ec9a10839b4de1898f18b1261fa836d4894922..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2727 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

'; - } - return $content; - } -);