Merge pull request #27679 from woocommerce/packages/e2e/config-functions

add eslint & babel config functions to e2e-environment

.eslintrc.js

@@ -1,17 +1,14 @@
 /** @format */
-const baseConfig = require( '@woocommerce/e2e-environment' ).esLintConfig;
+const { useE2EEsLintConfig } = require( '@woocommerce/e2e-environment' );
 
-module.exports = {
-	...baseConfig,
+module.exports = useE2EEsLintConfig( {
 	root: true,
 	env: {
-		...baseConfig.env,
 		browser: true,
 		es6: true,
 		node: true
 	},
 	globals: {
-		...baseConfig.globals,
 		wp: true,
 		wpApiSettings: true,
 		wcSettings: true,
@@ -32,4 +29,4 @@ module.exports = {
 			jsx: true
 		}
 	},
-};
+} );

babel.config.js

@@ -1,4 +1,4 @@
-const e2eBabelConfig = require( '@woocommerce/e2e-environment' ).babelConfig;
+const { e2eBabelConfig } = require( '@woocommerce/e2e-environment' );
 
 module.exports = function( api ) {
 	api.cache( true );

tests/e2e/env/README.md

@@ -18,19 +18,16 @@ The `@woocommerce/e2e-environment` package exports configuration objects that ca
 Make sure you `npm install @babel/preset-env --save` if you have not already done so. Afterwards, extend your project's `babel.config.js` to contain the expected presets for E2E testing.
 
 ```js
-const { babelConfig: e2eBabelConfig } = require( '@woocommerce/e2e-environment' );
+const { useE2EBabelConfig } = require( '@woocommerce/e2e-environment' );
 
 module.exports = function( api ) {
 	api.cache( true );
 
-	return {
-		...e2eBabelConfig,
+	return useE2EBabelConfig( {
 		presets: [
-			...e2eBabelConfig.presets,
 			'@wordpress/babel-preset-default',
 		],
-		....
-	};
+	} );
 };
 ```
 
@@ -39,34 +36,22 @@ module.exports = function( api ) {
 The E2E environment uses Puppeteer for headless browser testing, which uses certain globals variables. Avoid ES Lint errors by extending the config.
 
 ```js
-const { esLintConfig: baseConfig } = require( '@woocommerce/e2e-environment' );
+const { useE2EEsLintConfig } = require( '@woocommerce/e2e-environment' );
 
-module.exports = {
-	...baseConfig,
+module.exports = useE2EEsLintConfig( {
 	root: true,
-	parser: 'babel-eslint',
-	extends: [
-		...baseConfig.extends,
-		'wpcalypso/react',
-		'plugin:jsx-a11y/recommended',
-	],
-	plugins: [
-		...baseConfig.plugins,
-		'jsx-a11y',
-	],
 	env: {
-		...baseConfig.env,
 		browser: true,
-		node: true,
+		es6: true,
+		node: true
 	},
 	globals: {
-		...baseConfig.globals,
 		wp: true,
 		wpApiSettings: true,
 		wcSettings: true,
+		es6: true
 	},
-	....
-};
+} );
 ```
 
 ### Jest Config

tests/e2e/env/config/index.js

@@ -1,10 +1,20 @@
+/**
+ * Internal dependencies
+ */
 const jestConfig = require( './jest.config' );
 const jestPuppeteerConfig = require( './jest-puppeteer.config' );
-const { useE2EJestConfig, useE2EJestPuppeteerConfig } = require( './use-config' );
+const {
+	useE2EBabelConfig,
+	useE2EEsLintConfig,
+	useE2EJestConfig,
+	useE2EJestPuppeteerConfig
+} = require( './use-config' );
 
 module.exports = {
 	jestConfig,
 	jestPuppeteerConfig,
+	useE2EBabelConfig,
+	useE2EEsLintConfig,
 	useE2EJestConfig,
 	useE2EJestPuppeteerConfig,
 };

tests/e2e/env/config/use-config.js

@@ -1,5 +1,64 @@
 const jestConfig = require( './jest.config.js' );
 const jestPuppeteerConfig = require( './jest-puppeteer.config.js' );
+const babelConfig = require( '../babel.config' );
+const esLintConfig = require( '../.eslintrc.js' );
+
+const useE2EBabelConfig = function( customBabelConfig ) {
+	const combinedBabelConfig = {
+		...babelConfig,
+		...customBabelConfig,
+	};
+
+	// These only need to be merged if both exist.
+	if ( babelConfig.plugins && customBabelConfig.plugins ) {
+		combinedBabelConfig.plugins = [
+			...babelConfig.plugins,
+			...customBabelConfig.plugins,
+		];
+	}
+	if ( babelConfig.presets && customBabelConfig.presets ) {
+		combinedBabelConfig.presets = [
+			...babelConfig.presets,
+			...customBabelConfig.presets,
+		];
+	}
+
+	return combinedBabelConfig;
+};
+
+const useE2EEsLintConfig = function( customEsLintConfig ) {
+	let combinedEsLintConfig = {
+		...esLintConfig,
+		...customEsLintConfig,
+	};
+
+	// These only need to be merged if both exist.
+	if ( esLintConfig.extends && customEsLintConfig.extends ) {
+		combinedEsLintConfig.extends = [
+			...esLintConfig.extends,
+			...customEsLintConfig.extends,
+		];
+	}
+	if ( esLintConfig.env && customEsLintConfig.env ) {
+		combinedEsLintConfig.env = {
+			...esLintConfig.env,
+			...customEsLintConfig.env,
+		};
+	}
+	if ( esLintConfig.globals && customEsLintConfig.globals ) {
+		combinedEsLintConfig.globals = {
+			...esLintConfig.globals,
+			...customEsLintConfig.globals,
+		};
+	}
+	if ( esLintConfig.plugins && customEsLintConfig.plugins ) {
+		combinedEsLintConfig.plugins = [
+			...esLintConfig.plugins,
+			...customEsLintConfig.plugins,
+		];
+	}
+	return combinedEsLintConfig;
+};
 
 const useE2EJestConfig = function( customConfig ) {
 	const combinedConfig = {
@@ -25,4 +84,9 @@ const useE2EJestPuppeteerConfig = function( customPuppeteerConfig ) {
 	return combinedPuppeteerConfig;
 };
 
-module.exports = { useE2EJestConfig, useE2EJestPuppeteerConfig };
+module.exports = {
+	useE2EBabelConfig,
+	useE2EEsLintConfig,
+	useE2EJestConfig,
+	useE2EJestPuppeteerConfig,
+};

tests/e2e/env/index.js

@@ -1,9 +1,13 @@
-// Internal dependencies
+/**
+ * Internal dependencies
+  */
 const babelConfig = require( './babel.config' );
 const esLintConfig = require( './.eslintrc.js' );
 const {
 	jestConfig,
 	jestPuppeteerConfig,
+	useE2EBabelConfig,
+	useE2EEsLintConfig,
 	useE2EJestConfig,
 	useE2EJestPuppeteerConfig,
 } = require( './config' );
@@ -15,6 +19,8 @@ module.exports = {
 	esLintConfig,
 	jestConfig,
 	jestPuppeteerConfig,
+	useE2EBabelConfig,
+	useE2EEsLintConfig,
 	useE2EJestConfig,
 	useE2EJestPuppeteerConfig,
 	getAppRoot,