diff --git a/projects/plugins/boost/changelog/update-boost-e2e-tests-lazy-loading b/projects/plugins/boost/changelog/update-boost-e2e-tests-lazy-loading new file mode 100644 index 0000000000000..c3f648dbbf74f --- /dev/null +++ b/projects/plugins/boost/changelog/update-boost-e2e-tests-lazy-loading @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated e2e test to account for recent updates to the lazy loading module. diff --git a/projects/plugins/boost/tests/e2e/specs/base/jetpack-compatibility.test.js b/projects/plugins/boost/tests/e2e/specs/base/jetpack-compatibility.test.js deleted file mode 100644 index e15d03adf1a16..0000000000000 --- a/projects/plugins/boost/tests/e2e/specs/base/jetpack-compatibility.test.js +++ /dev/null @@ -1,94 +0,0 @@ -import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js'; -import { JetpackBoostPage } from '../../lib/pages/index.js'; -import { prerequisitesBuilder, isModuleActive } from 'jetpack-e2e-commons/env/prerequisites.js'; -import { activateModules, deactivateModules } from 'jetpack-e2e-commons/env/index.js'; -import { - boostPrerequisitesBuilder, - activateModules as activateBoostModules, - deactivateModules as deactivateBoostModules, -} from '../../lib/env/prerequisites.js'; - -test.describe( 'Jetpack compatibility', () => { - test.beforeAll( async () => { - await prerequisitesBuilder().withActivePlugins( [ 'jetpack' ] ).build(); - } ); - - test( 'The Jetpack lazy-image module activation reflects in Boost dashboard', async ( { - page, - } ) => { - await prerequisitesBuilder( page ).withInactiveModules( [ 'lazy-images' ] ).build(); - await activateModules( [ 'lazy-images' ] ); - - const jetpackBoostPage = await JetpackBoostPage.visit( page ); - expect( - await jetpackBoostPage.isModuleEnabled( 'lazy_images' ), - 'lazy_images module should be enabled' - ).toEqual( true ); - } ); - - test( 'The Jetpack lazy-image module deactivation reflects in Boost dashboard', async ( { - page, - } ) => { - await prerequisitesBuilder( page ).withActiveModules( [ 'lazy-images' ] ).build(); - await deactivateModules( [ 'lazy-images' ] ); - - const jetpackBoostPage = await JetpackBoostPage.visit( page ); - expect( - await jetpackBoostPage.isModuleEnabled( 'lazy_images' ), - 'lazy_images module should be disabled' - ).toEqual( false ); - } ); - - test( 'The Boost lazy-image module activation reflects in Jetpack dashboard', async ( { - page, - } ) => { - await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'lazy_images' ] ).build(); - await activateBoostModules( [ 'lazy_images' ] ); - - const isActive = await isModuleActive( 'lazy-images' ); - expect( isActive, 'lazy-images module should be active' ).toBe( true ); - } ); - - test( 'The Boost lazy-image module deactivation reflects in Jetpack dashboard', async ( { - page, - } ) => { - await boostPrerequisitesBuilder( page ).withActiveModules( [ 'lazy_images' ] ).build(); - await deactivateBoostModules( [ 'lazy_images' ] ); - - const isActive = await isModuleActive( 'lazy-images' ); - expect( isActive, 'lazy-images module should not be active' ).toBe( false ); - } ); - - test( 'Lazy Image Toggle should work in Boost after using Jetpack dashboard to toogle lazy images.', async ( { - page, - } ) => { - const boostSlug = 'lazy_images'; - const jetpackSlug = 'lazy-images'; - await boostPrerequisitesBuilder( page ) - .withConnection( true ) - .withInactiveModules( [ boostSlug ] ) - .build(); - - const jetpackBoostPage = await JetpackBoostPage.visit( page ); - - await boostPrerequisitesBuilder( page ).build(); - await deactivateBoostModules( [ boostSlug ] ); - - // Turn on Lazy Images in Jetpack Boost via the UI - await jetpackBoostPage.toggleModule( boostSlug ); - - // Turn off Lazy Images with Jetpack - await deactivateModules( [ jetpackSlug ] ); - - // Turn on Lazy Images in Jetpack Boost via the UI - await jetpackBoostPage.reload(); - await jetpackBoostPage.toggleModule( boostSlug ); - - await jetpackBoostPage.reload(); - const isActiveInBoost = await jetpackBoostPage.isModuleEnabled( boostSlug ); - const isActiveInJetpack = await isModuleActive( jetpackSlug ); - - expect( isActiveInBoost, 'lazy_images module should be active in Jetpack Boost' ).toBe( true ); - expect( isActiveInJetpack, 'lazy-images module should be active in Jetpack' ).toBe( true ); - } ); -} ); diff --git a/projects/plugins/boost/tests/e2e/specs/modules/lazy-images.test.js b/projects/plugins/boost/tests/e2e/specs/modules/lazy-images.test.js deleted file mode 100644 index 72af61fe2487d..0000000000000 --- a/projects/plugins/boost/tests/e2e/specs/modules/lazy-images.test.js +++ /dev/null @@ -1,39 +0,0 @@ -import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js'; -import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js'; -import { PostFrontendPage } from 'jetpack-e2e-commons/pages/index.js'; -import playwrightConfig from 'jetpack-e2e-commons/playwright.config.cjs'; - -const testPostTitle = 'Hello World with image'; - -test.describe( 'Lazy Images module', () => { - let page; - - test.beforeAll( async ( { browser } ) => { - page = await browser.newPage( playwrightConfig.use ); - await boostPrerequisitesBuilder( page ).withTestContent( [ testPostTitle ] ).build(); - } ); - - test.afterAll( async () => { - await page.close(); - } ); - - test( 'Images on a post should not be lazy loaded when the module is inactive', async () => { - await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'lazy_images' ] ).build(); - const frontend = await PostFrontendPage.visit( page ); - await frontend.click( `text=${ testPostTitle }` ); - expect( - await page.locator( '.jetpack-lazy-image' ).count(), - 'No images should be lazy loaded' - ).toBe( 0 ); - } ); - - test( 'Images on a post should be lazy loaded when the module is active', async () => { - await boostPrerequisitesBuilder( page ).withActiveModules( [ 'lazy_images' ] ).build(); - const frontend = await PostFrontendPage.visit( page ); - await frontend.click( `text=${ testPostTitle }` ); - expect( - await page.locator( '.jetpack-lazy-image' ).count(), - 'Images should be lazy loaded' - ).toBeGreaterThan( 0 ); - } ); -} ); diff --git a/projects/plugins/boost/tests/e2e/specs/modules/modules-common.test.js b/projects/plugins/boost/tests/e2e/specs/modules/modules-common.test.js index 9d5fb8fd39b46..378962fac5b56 100644 --- a/projects/plugins/boost/tests/e2e/specs/modules/modules-common.test.js +++ b/projects/plugins/boost/tests/e2e/specs/modules/modules-common.test.js @@ -6,7 +6,6 @@ import playwrightConfig from 'jetpack-e2e-commons/playwright.config.cjs'; const modules = [ // ['MODULE_NAME', 'DEFAULT STATE'], [ 'critical_css', 'disabled' ], - [ 'lazy_images', 'disabled' ], [ 'render_blocking_js', 'disabled' ], ]; @@ -19,7 +18,7 @@ test.describe.serial( 'Modules', () => { await boostPrerequisitesBuilder( page ) .withConnection( true ) - .withInactiveModules( [ 'critical_css', 'lazy_images', 'render_blocking_js' ] ) + .withInactiveModules( [ 'critical_css', 'render_blocking_js' ] ) .build(); jetpackBoostPage = await JetpackBoostPage.visit( page ); } ); diff --git a/projects/plugins/boost/tests/e2e/specs/modules/score-auto-refresh.test.js b/projects/plugins/boost/tests/e2e/specs/modules/score-auto-refresh.test.js index 87bd67854b75e..637304e0890b0 100644 --- a/projects/plugins/boost/tests/e2e/specs/modules/score-auto-refresh.test.js +++ b/projects/plugins/boost/tests/e2e/specs/modules/score-auto-refresh.test.js @@ -12,12 +12,12 @@ test.describe( 'Auto refresh of speed scores', () => { await boostPrerequisitesBuilder( page ) .withConnection( true ) - .withInactiveModules( [ 'critical_css', 'lazy_images', 'render_blocking_js' ] ) + .withInactiveModules( [ 'critical_css', 'render_blocking_js' ] ) .build(); jetpackBoostPage = await JetpackBoostPage.visit( page ); } ); - [ 'lazy_images', 'render_blocking_js' ].forEach( moduleSlug => { + [ 'render_blocking_js' ].forEach( moduleSlug => { test( `Enabling ${ moduleSlug } should refresh scores`, async () => { await jetpackBoostPage.waitForScoreLoadingToFinish(); @@ -34,8 +34,6 @@ test.describe( 'Auto refresh of speed scores', () => { test( 'Score refresh should debounce between multiple module toggle', async () => { await jetpackBoostPage.waitForScoreLoadingToFinish(); - const toggleLazyPromise = jetpackBoostPage.toggleModule( 'lazy_images' ); - // Wait a second before toggling another. await new Promise( resolve => setTimeout( resolve, 1000 ) ); @@ -53,6 +51,6 @@ test.describe( 'Auto refresh of speed scores', () => { expect( await jetpackBoostPage.isScoreLoading(), 'Score should be loading' ).toBeTruthy(); // Still expect toggling those two modules to succeed. - await Promise.all( [ toggleLazyPromise, renderBlockingPromise ] ); + await Promise.all( [ renderBlockingPromise ] ); } ); } );