Boost: Add e2e tests to concatenate JS/CSS

.github/files/e2e-tests/e2e-matrix.js

@@ -58,6 +58,22 @@ const projects = [
 		suite: '',
 		buildGroup: 'jetpack-boost',
 	},
+	{
+		project: 'Jetpack Boost - Concatenate JS',
+		path: 'projects/plugins/boost/tests/e2e',
+		testArgs: [ 'specs/concatenate-js', '--retries=1' ],
+		targets: [ 'plugins/boost' ],
+		suite: '',
+		buildGroup: 'jetpack-boost',
+	},
+	{
+		project: 'Jetpack Boost - Concatenate CSS',
+		path: 'projects/plugins/boost/tests/e2e',
+		testArgs: [ 'specs/concatenate-css', '--retries=1' ],
+		targets: [ 'plugins/boost' ],
+		suite: '',
+		buildGroup: 'jetpack-boost',
+	},
 	{
 		project: 'Search',
 		path: 'projects/plugins/search/tests/e2e',

projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx

@@ -22,7 +22,7 @@ const MetaComponent = ( { inputLabel, buttonText, placeholder, datasyncKey }: Pr
 	const htmlId = `jb-minify-meta-${ datasyncKey }`;
 
 	return (
-		<div className={ styles[ 'minify-meta' ] }>
+		<div className={ styles[ 'minify-meta' ] } data-testid={ `meta-${ datasyncKey }` }>
 			{ isEditing ? (
 				<div className={ styles[ 'manage-excludes' ] }>
 					<label htmlFor={ htmlId }>{ inputLabel }</label>

projects/plugins/boost/app/assets/src/js/features/module/module.tsx

@@ -58,7 +58,7 @@ const Module = ( {
 	}
 
 	return (
-		<div className={ styles.module }>
+		<div className={ styles.module } data-testid={ `module-${ slug }` }>
 			<div className={ styles.toggle }>
 				{ toggle && (
 					<ToggleControl

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' );
+	const MAKE_E2E_TESTS_WORK_MODULES = array( 'critical_css', 'render_blocking_js', 'minify_js', 'minify_css' );
 
 	/**
 	 * CLI constructor.

projects/plugins/boost/changelog/add-e2e-tests-concatenate-js-css

@@ -0,0 +1,5 @@
+Significance: patch
+Type: added
+Comment: Add e2e tests for Concatenate JS/CSS modules.
+
+

projects/plugins/boost/tests/e2e/lib/env/prerequisites.js

@@ -12,6 +12,7 @@ export function boostPrerequisitesBuilder( page ) {
 		connected: undefined,
 		jetpackDeactivated: undefined,
 		mockSpeedScore: undefined,
+		enqueuedAssets: undefined,
 	};
 
 	return {
@@ -35,6 +36,10 @@ export function boostPrerequisitesBuilder( page ) {
 			state.mockSpeedScore = shouldMockSpeedScore;
 			return this;
 		},
+		withEnqueuedAssets( shouldEnqueueAssets ) {
+			state.enqueuedAssets = shouldEnqueueAssets;
+			return this;
+		},
 		withCleanEnv() {
 			state.clean = true;
 			return this;
@@ -52,6 +57,7 @@ async function buildPrerequisites( state, page ) {
 		testPostTitles: () => ensureTestPosts( state.testPostTitles ),
 		clean: () => ensureCleanState( state.clean ),
 		mockSpeedScore: () => ensureMockSpeedScoreState( state.mockSpeedScore ),
+		enqueuedAssets: () => ensureEnqueuedAssets( state.enqueuedAssets ),
 	};
 
 	logger.prerequisites( JSON.stringify( state, null, 2 ) );
@@ -93,6 +99,16 @@ export async function ensureMockSpeedScoreState( mockSpeedScore ) {
 	}
 }
 
+export async function ensureEnqueuedAssets( enqueue ) {
+	if ( enqueue ) {
+		logger.prerequisites( 'Enqueuing assets' );
+		await execWpCommand( 'plugin activate e2e-concatenate-enqueue/e2e-concatenate-enqueue.php' );
+	} else {
+		logger.prerequisites( 'Deactivating assets' );
+		await execWpCommand( 'plugin deactivate e2e-concatenate-enqueue/e2e-concatenate-enqueue.php' );
+	}
+}
+
 export async function activateModules( modules ) {
 	for ( const module of modules ) {
 		logger.prerequisites( `Activating module ${ module }` );

projects/plugins/boost/tests/e2e/lib/pages/wp-admin/JetpackBoostPage.js

@@ -126,6 +126,16 @@ export default class JetpackBoostPage extends WpPage {
 		return this.waitForElementToBeVisible( selector );
 	}
 
+	async isConcatenateJsMetaVisible() {
+		const selector = '[data-testid="meta-minify_js_excludes"]';
+		return this.page.isVisible( selector );
+	}
+
+	async isConcatenateCssMetaVisible() {
+		const selector = '[data-testid="meta-minify_css_excludes"]';
+		return this.page.isVisible( selector );
+	}
+
 	async navigateToMainSettingsPage() {
 		await this.page.click( 'text=Go back' );
 	}

projects/plugins/boost/tests/e2e/plugins/e2e-concatenate-enqueue/assets/e2e-script-one.js

@@ -0,0 +1 @@
+console.log( 'e2e-script-one.js' );

projects/plugins/boost/tests/e2e/plugins/e2e-concatenate-enqueue/assets/e2e-script-two.js

@@ -0,0 +1 @@
+console.log( 'e2e-script-two.js' );

projects/plugins/boost/tests/e2e/plugins/e2e-concatenate-enqueue/assets/e2e-style-one.css

@@ -0,0 +1 @@
+.nonexistentselector { color: inherit; }

projects/plugins/boost/tests/e2e/plugins/e2e-concatenate-enqueue/assets/e2e-style-two.css

@@ -0,0 +1 @@
+.nonexistentselector2 { color: green; }

projects/plugins/boost/tests/e2e/plugins/e2e-concatenate-enqueue/e2e-concatenate-enqueue.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Boost E2E Enqueue Assets
+ * Description: Enqueue assets for testing Concatenate JS and CSS.
+ * Plugin URI: https://github.com/automattic/jetpack
+ * Author: Heart of Gold
+ * Version: 1.0.0
+ * Text Domain: jetpack
+ *
+ * @package automattic/jetpack
+ */
+
+add_action( 'wp_enqueue_scripts', 'e2e_enqueue_assets' );
+
+function e2e_enqueue_assets() {
+	wp_enqueue_script( 'jquery' );
+	wp_enqueue_script( 'e2e-script-one', plugins_url( 'assets/e2e-script-one.js', __FILE__ ), array(), '1.0.0', true );
+	wp_enqueue_script( 'e2e-script-two', plugins_url( 'assets/e2e-script-two.js', __FILE__ ), array(), '1.0.0', true );
+
+	wp_enqueue_style( 'e2e-style-one', plugins_url( 'assets/e2e-style-one.css', __FILE__ ), array(), '1.0.0' );
+	wp_enqueue_style( 'e2e-style-two', plugins_url( 'assets/e2e-style-two.css', __FILE__ ), array(), '1.0.0' );
+}

projects/plugins/boost/tests/e2e/specs/concatenate-css/concatenate-css.test.js

@@ -0,0 +1,81 @@
+import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js';
+import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js';
+import { JetpackBoostPage } from '../../lib/pages/index.js';
+import { PostFrontendPage } from 'jetpack-e2e-commons/pages/index.js';
+import playwrightConfig from 'jetpack-e2e-commons/playwright.config.mjs';
+
+test.describe( 'Concatenate JS', () => {
+	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 Concatenate CSS meta information should show on the admin when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'minify_css' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isConcatenateCssMetaVisible(),
+			'Concatenate CSS meta information should not be visible'
+		).toBeFalsy();
+	} );
+
+	test( 'CSS concatenation shouldn`t occur when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withInactiveModules( [ 'minify_css' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// This style is enqueued via a helper plugin.
+			( await postFrontPage.page.locator( '[id="e2e-style-one-css"]' ).count() ) > 0,
+			'CSS concatenation shouldn`t occur when the module is inactive'
+		).toBeTruthy();
+	} );
+
+	test( 'Meta information should be visible when the module is active', async () => {
+		await boostPrerequisitesBuilder( page ).withActiveModules( [ 'minify_css' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isConcatenateCssMetaVisible(),
+			'Concatenate CSS meta information should be visible'
+		).toBeTruthy();
+	} );
+
+	test( 'CSS Concatenation occurs when module is active', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'minify_css' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// e2e-style-one and e2e-style-two are enqueued by a helper plugin. When concatenation is enabled,
+			// they should be concatenated into a single style.
+			( await postFrontPage.page
+				.locator( '[data-handles*="e2e-style-one,e2e-style-two"]' )
+				.count() ) > 0,
+			'CSS Concatenation occurs when module is active'
+		).toBeTruthy();
+	} );
+
+	test( 'Admin bar stylesheet should not be concatenated as it is excluded by default', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'minify_css' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// Admin bar stylesheet is enqueued by default when logged-in.
+			( await postFrontPage.page.locator( '[id="admin-bar-css"]' ).count() ) > 0,
+			'Admin bar stylesheet should not be concatenated'
+		).toBeTruthy();
+	} );
+} );

projects/plugins/boost/tests/e2e/specs/concatenate-js/concatenate-js.test.js

@@ -0,0 +1,81 @@
+import { test, expect } from 'jetpack-e2e-commons/fixtures/base-test.js';
+import { boostPrerequisitesBuilder } from '../../lib/env/prerequisites.js';
+import { JetpackBoostPage } from '../../lib/pages/index.js';
+import { PostFrontendPage } from 'jetpack-e2e-commons/pages/index.js';
+import playwrightConfig from 'jetpack-e2e-commons/playwright.config.mjs';
+
+test.describe( 'Concatenate JS', () => {
+	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 Concatenate JS meta information should show on the admin when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page ).withInactiveModules( [ 'minify_js' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isConcatenateJsMetaVisible(),
+			'Concatenate JS meta information should not be visible'
+		).toBeFalsy();
+	} );
+
+	test( 'JS concatenation shouldn`t occur when the module is inactive', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withInactiveModules( [ 'minify_js' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// This script is enqueued via a helper plugin.
+			( await postFrontPage.page.locator( '[id="e2e-script-one-js"]' ).count() ) > 0,
+			'JS concatenation shouldn`t occur when the module is inactive'
+		).toBeTruthy();
+	} );
+
+	test( 'Meta information should be visible when the module is active', async () => {
+		await boostPrerequisitesBuilder( page ).withActiveModules( [ 'minify_js' ] ).build();
+		const jetpackBoostPage = await JetpackBoostPage.visit( page );
+
+		expect(
+			await jetpackBoostPage.isConcatenateJsMetaVisible(),
+			'Concatenate JS meta information should be visible'
+		).toBeTruthy();
+	} );
+
+	test( 'JS Concatenation occurs when module is active', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'minify_js' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// e2e-script-one and e2e-script-two are enqueued by a helper plugin. When concatenation is enabled,
+			// they should be concatenated into a single script.
+			( await postFrontPage.page
+				.locator( '[data-handles="e2e-script-one,e2e-script-two"]' )
+				.count() ) > 0,
+			'JS Concatenation occurs when module is active'
+		).toBeTruthy();
+	} );
+
+	test( 'jQuery should not be concatenated as it is excluded by default', async () => {
+		await boostPrerequisitesBuilder( page )
+			.withActiveModules( [ 'minify_js' ] )
+			.withEnqueuedAssets( true )
+			.build();
+		const postFrontPage = await PostFrontendPage.visit( page );
+
+		expect(
+			// jQuery is enqueued by a helper plugin.
+			( await postFrontPage.page.locator( '[id="jquery-core-js"]' ).count() ) > 0,
+			'jQuery should not be concatenated'
+		).toBeTruthy();
+	} );
+} );

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-concatenate-enqueue/: /var/www/html/wp-content/plugins/e2e-concatenate-enqueue/
     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