Clean up e2e-environment changes from monorepo reorg (#31233)

* add flag to distinguish between the development repo and npm package

* introduce local E2E file resolver function

* update package changelog and readme

packages/js/e2e-environment/CHANGELOG.md

@@ -5,6 +5,8 @@
 - Added quotes around `WORDPRESS_TITLE` value in .env file to address issue with docker compose 2 "key cannot contain a space" error.
 - Added `LATEST_WP_VERSION_MINUS` that allows setting a number to subtract from the current WordPress version for the WordPress Docker image.
 - Support for PHP_VERSION, MARIADB_VERSION environment variables for built in container initialization
+- `resolveLocalE2ePath` to resolve path to local E2E file
+- `WC_E2E_FOLDER` for mapping plugin root to path within repo
 
 ## Fixed
 

packages/js/e2e-environment/bin/docker-compose.js

@@ -10,6 +10,7 @@ const {
 	getAppRoot,
 	getAppName,
 	getTestConfig,
+	resolveLocalE2ePath,
 } = require( '../utils' );
 
 const dockerArgs = [];
@@ -56,10 +57,7 @@ if ( appPath ) {
 
 		const appInitFile = customInitFile
 			? customInitFile
-			: path.resolve(
-					appPath,
-					'plugins/woocommerce/tests/e2e/docker/initialize.sh'
-			  );
+			: resolveLocalE2ePath( 'docker/initialize.sh' );
 		// If found, copy it into the wp-cli Docker context so
 		// it gets picked up by the entrypoint script.
 		if ( fs.existsSync( appInitFile ) ) {
@@ -84,11 +82,6 @@ if ( ! process.env.WC_E2E_FOLDER_MAPPING ) {
 		'/var/www/html/wp-content/plugins/' + getAppBase();
 }
 
-// Set some environment variables
-if ( ! process.env.WC_CORE_PATH ) {
-	envVars.WC_CORE_PATH = 'plugins/woocommerce';
-}
-
 if ( ! process.env.WORDPRESS_PORT ) {
 	process.env.WORDPRESS_PORT = testConfig.port;
 }

packages/js/e2e-environment/bin/e2e-test-integration.js

@@ -4,7 +4,7 @@ const { spawnSync } = require( 'child_process' );
 const program = require( 'commander' );
 const path = require( 'path' );
 const fs = require( 'fs' );
-const { getAppRoot } = require( '../utils' );
+const { getAppRoot, resolveLocalE2ePath } = require( '../utils' );
 const {
 	WC_E2E_SCREENSHOTS,
 	JEST_PUPPETEER_CONFIG,
@@ -21,10 +21,7 @@ const appPath = getAppRoot();
 
 // clear the screenshots folder before running tests.
 if ( WC_E2E_SCREENSHOTS ) {
-	const screenshotPath = path.resolve(
-		appPath,
-		'plugins/woocommerce/tests/e2e/screenshots'
-	);
+	const screenshotPath = resolveLocalE2ePath( 'screenshots' );
 	if ( fs.existsSync( screenshotPath ) ) {
 		fs.readdirSync( screenshotPath ).forEach( ( file, index ) => {
 			const filename = path.join( screenshotPath, file );
@@ -36,9 +33,7 @@ if ( WC_E2E_SCREENSHOTS ) {
 const nodeConfigDirs = [ path.resolve( __dirname, '../config' ) ];
 
 if ( appPath ) {
-	nodeConfigDirs.unshift(
-		path.resolve( appPath, 'plugins/woocommerce/tests/e2e/config' )
-	);
+	nodeConfigDirs.unshift( resolveLocalE2ePath( 'config' ) );
 }
 
 const testEnvVars = {
@@ -55,10 +50,7 @@ if ( DEFAULT_TIMEOUT_OVERRIDE ) {
 if ( ! JEST_PUPPETEER_CONFIG ) {
 	// Use local Puppeteer config if there is one.
 	// Load test configuration file into an object.
-	const localJestConfigFile = path.resolve(
-		appPath,
-		'tests/e2e/config/jest-puppeteer.config.js'
-	);
+	const localJestConfigFile = resolveLocalE2ePath( 'config/jest-puppeteer.config.js' );
 	const jestConfigFile = path.resolve(
 		__dirname,
 		'../config/jest-puppeteer.config.js'
@@ -100,10 +92,7 @@ let configPath = path.resolve( __dirname, '../config/jest.config.js' );
 
 // Look for a Jest config in the dependent app's path.
 if ( appPath ) {
-	const appConfig = path.resolve(
-		appPath,
-		'plugins/woocommerce/tests/e2e/config/jest.config.js'
-	);
+	const appConfig = resolveLocalE2ePath( 'config/jest.config.js' );
 
 	if ( fs.existsSync( appConfig ) ) {
 		configPath = appConfig;

packages/js/e2e-environment/bin/wc-e2e.sh

@@ -33,6 +33,18 @@ SCRIPTPATH=$(dirname "$0")
 REALPATH=$(readlink "$0")
 cd "$SCRIPTPATH/$(dirname "$REALPATH")/.."
 
+# Set a flag to distinguish between the development repo and npm package
+DEV_PATH=$(echo $0 | rev | cut -f4 -d/ | rev)
+if [ "$DEV_PATH" != "node_modules" ]; then
+	export WC_E2E_WOOCOMMERCE_DEV='true'
+	export WC_E2E_FOLDER='plugins/woocommerce'
+else
+	export WC_E2E_WOOCOMMERCE_DEV=''
+	if [ -z $WC_E2E_FOLDER ]; then
+		export WC_E2E_FOLDER=''
+	fi
+fi
+
 # Run scripts
 case $1 in
 	'docker:up')

packages/js/e2e-environment/builtin.md

@@ -119,7 +119,12 @@ You can override these in `/tests/e2e/config/default.json`.
 
 ### Folder Mapping
 
-The built in container defaults to mapping the root folder of the repository to a folder in the `plugins` folder. For example `woocommerce` is mapped to `/var/www/html/wp-content/plugins/woocommerce`. Use the `WC_E2E_FOLDER_MAPPING` environment variable to override this mapping.
+The built in container defaults to mapping the root folder of the repository to a folder in the `plugins` folder. Use the environment variables `WC_E2E_FOLDER` and `WC_E2E_FOLDER_MAPPING` to override this mapping. The `WC_E2E_FOLDER` is a path relative to the root of the project. For example, in the  `woocommerce` repository this mapping is:
+
+- `WC_E2E_FOLDER=plugins/woocommerce`
+- `WC_E2E_FOLDER_MAPPING=/var/www/html/wp-content/plugins/woocommerce`
+
+Other repository examples:
 
 - Storefront Theme - ```WC_E2E_FOLDER_MAPPING=/var/www/html/wp-content/themes/storefront npx wc-e2e docker:up```
 - Site Project - ```WC_E2E_FOLDER_MAPPING=/var/www/html/wp-content npx wc-e2e docker:up```

packages/js/e2e-environment/config/jest.config.js

@@ -9,7 +9,7 @@ const fs = require( 'fs' );
 /**
  * Internal Dependencies
  */
-const { getAppRoot } = require( '../utils' );
+const { resolveLocalE2ePath } = require( '../utils' );
 
 const failureSetup = [];
 if ( WC_E2E_SCREENSHOTS ) {
@@ -23,11 +23,10 @@ const setupFilesAfterEnv = [
 	'expect-puppeteer',
 ];
 
-const appPath = getAppRoot();
-const localJestSetupFile = path.resolve(
-	appPath,
-	'plugins/woocommerce/tests/e2e/config/jest.setup.js'
-);
+const localJestSetupFile = resolveLocalE2ePath( 'config/jest.setup.js' );
+const moduleNameMap = resolveLocalE2ePath( '$1' );
+const testSpecs = resolveLocalE2ePath( 'specs' );
+
 if ( fs.existsSync( localJestSetupFile ) ) {
 	setupFilesAfterEnv.push( localJestSetupFile );
 }
@@ -35,7 +34,7 @@ if ( fs.existsSync( localJestSetupFile ) ) {
 const combinedConfig = {
 	...jestConfig,
 	moduleNameMapper: {
-		'@woocommerce/e2e/tests/(.*)': appPath + 'tests/e2e/$1',
+		'@woocommerce/e2e/tests/(.*)': moduleNameMap,
 	},
 
 	setupFiles: [ '<rootDir>/config/env.setup.js' ],
@@ -52,7 +51,7 @@ const combinedConfig = {
 		...jestConfig.transformIgnorePatterns,
 		'node_modules/(?!(woocommerce)/)',
 	],
-	roots: [ appPath + 'tests/e2e/specs' ],
+	roots: [ testSpecs ],
 };
 
 if ( process.env.jest_test_spec ) {

packages/js/e2e-environment/docker-compose.yaml

@@ -35,7 +35,7 @@ services:
       WORDPRESS_DEBUG: 1
     volumes:
       - wordpress:/var/www/html
-      - "../../../${WC_CORE_PATH}:${WC_E2E_FOLDER_MAPPING}"
+      - "../../../${WC_E2E_FOLDER}:${WC_E2E_FOLDER_MAPPING}"
 
   wordpress-cli:
     container_name: "${APP_NAME}_wordpress-cli"
@@ -60,7 +60,7 @@ services:
 
     volumes:
       - wordpress:/var/www/html
-      - "../../../plugins/woocommerce:${WC_E2E_FOLDER_MAPPING}"
+      - "../../../${WC_E2E_FOLDER}:${WC_E2E_FOLDER_MAPPING}"
 
 volumes:
   db:

packages/js/e2e-environment/utils/index.js

@@ -1,6 +1,6 @@
 const getAppRoot = require( './app-root' );
 const { getAppName, getAppBase } = require( './app-name' );
-const { getTestConfig, getAdminConfig } = require( './test-config' );
+const { getTestConfig, getAdminConfig, resolveLocalE2ePath } = require( './test-config' );
 const { getRemotePluginZip, getLatestReleaseZipUrl } = require('./get-plugin-zip');
 const takeScreenshotFor = require( './take-screenshot' );
 const updateReadyPageStatus = require('./update-ready-page');
@@ -12,6 +12,7 @@ module.exports = {
 	getAppName,
 	getTestConfig,
 	getAdminConfig,
+	resolveLocalE2ePath,
 	getRemotePluginZip,
 	getLatestReleaseZipUrl,
 	takeScreenshotFor,

packages/js/e2e-environment/utils/take-screenshot.js

@@ -1,6 +1,6 @@
 const path = require( 'path' );
 const mkdirp = require( 'mkdirp' );
-const getAppRoot = require( './app-root' );
+const { resolveLocalE2ePath } = require( './test-config' );
 
 /**
  * Take a screenshot if browser context exists.
@@ -10,11 +10,7 @@ const getAppRoot = require( './app-root' );
  */
 const takeScreenshotFor = async ( message ) => {
 	const title = message.replace( /\.$/, '' );
-	const appPath = getAppRoot();
-	const savePath = path.resolve(
-		appPath,
-		'plugins/woocommerce/tests/e2e/screenshots'
-	);
+	const savePath = resolveLocalE2ePath( 'screenshots' );
 	const filePath = path.join(
 		savePath,
 		`${ title }.png`.replace( /[^a-z0-9.-]+/gi, '-' )

packages/js/e2e-environment/utils/test-config.js

@@ -2,12 +2,27 @@ const path = require( 'path' );
 const fs = require( 'fs' );
 const getAppRoot = require( './app-root' );
 
-// Copy local test configuration file if it exists.
 const appPath = getAppRoot();
-const localTestConfigFile = path.resolve(
-	appPath,
-	'plugins/woocommerce/tests/e2e/config/default.json'
-);
+
+/**
+ * Resolve a local E2E file.
+ *
+ * @param {string} filename Filename to append to the path.
+ * @return {string}
+ */
+const resolveLocalE2ePath = ( filename = '' ) => {
+	const { WC_E2E_FOLDER } = process.env;
+	const localPath = `${WC_E2E_FOLDER}/tests/e2e/${filename}`;
+	const resolvedPath = path.resolve(
+		appPath,
+		localPath.indexOf( '/' ) == 0 ? localPath.slice( 1 ) : localPath
+	);
+
+	return resolvedPath;
+}
+
+// Copy local test configuration file if it exists.
+const localTestConfigFile = resolveLocalE2ePath( 'config/default.json' );
 const defaultConfigFile = path.resolve(
 	__dirname,
 	'../config/default/default.json'
@@ -78,4 +93,5 @@ const getAdminConfig = () => {
 module.exports = {
 	getTestConfig,
 	getAdminConfig,
+	resolveLocalE2ePath,
 };

pnpm-lock.yaml

@@ -6007,7 +6007,7 @@ packages:
   /@wordpress/deprecated/2.12.3:
     resolution: {integrity: sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==}
     dependencies:
-      '@babel/runtime': 7.15.4
+      '@babel/runtime': 7.16.3
       '@wordpress/hooks': 2.12.3
     dev: false