Add E2E tests for merchant on-boarding (#7955)

Co-authored-by: Brian Borman <[email protected]>
Co-authored-by: Achyuth Ajoy <[email protected]>

Author: 3 people

.github/actions/e2e/run-log-tests/action.yml

@@ -39,6 +39,7 @@ runs:
       with:
           name: wp(${{ env.E2E_WP_VERSION }})-wc(${{ env.E2E_WC_VERSION }})-${{ env.E2E_GROUP }}-${{ env.E2E_BRANCH }}
           path: |
+            screenshots
             tests/e2e/screenshots
             tests/e2e/docker/wordpress/wp-content/debug.log
             ${{ env.E2E_RESULT_FILEPATH }}

changelog/e2e-7347-merchant-on-boarding

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E test - Merchant facing multi-currency on-boarding screen.

client/multi-currency-setup/tasks/add-currencies-task/index.js

@@ -173,13 +173,14 @@ const AddCurrenciesTask = () => {
 				);
 		  } );
 
-	const displayCurrencyCheckbox = ( code ) =>
+	const displayCurrencyCheckbox = ( code, testId = '' ) =>
 		availableCurrencyCodes.length && (
 			<EnabledCurrenciesModalCheckbox
 				key={ 'currency-checkbox-' + availableCurrencies[ code ].id }
 				checked={ selectedCurrencyCodes.includes( code ) }
 				onChange={ handleChange }
 				currency={ availableCurrencies[ code ] }
+				testId={ _.isString( testId ) ? testId : null }
 			/>
 		);
 
@@ -284,7 +285,11 @@ const AddCurrenciesTask = () => {
 												</h4>
 											</li>
 											{ visibleRecommendedCurrencyCodes.map(
-												displayCurrencyCheckbox
+												( code ) =>
+													displayCurrencyCheckbox(
+														code,
+														'recommended-currency'
+													)
 											) }
 											<li
 												className={

client/multi-currency-setup/tasks/add-currencies-task/test/__snapshots__/index.test.js.snap

@@ -110,6 +110,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"
@@ -171,6 +172,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"
@@ -232,6 +234,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"
@@ -293,6 +296,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"
@@ -354,6 +358,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"
@@ -415,6 +420,7 @@ exports[`Multi-Currency enabled currencies list add currencies task renders corr
                   </li>
                   <li
                     class="enabled-currency-checkbox"
+                    data-testid="recommended-currency"
                   >
                     <div
                       class="components-base-control components-checkbox-control css-wdf2ti-Wrapper ej5x27r4"

client/multi-currency/multi-currency-settings/enabled-currencies-list/modal-checkbox.js

@@ -11,6 +11,7 @@ const EnabledCurrenciesModalCheckbox = ( {
 	onChange,
 	checked = false,
 	currency: { flag, symbol, code, name },
+	testId = null,
 } ) => {
 	const handleChange = useCallback(
 		( enabled ) => {
@@ -20,7 +21,7 @@ const EnabledCurrenciesModalCheckbox = ( {
 	);
 
 	return (
-		<li className="enabled-currency-checkbox">
+		<li className="enabled-currency-checkbox" data-testid={ testId }>
 			<CheckboxControl
 				code={ code }
 				checked={ checked }

package.json

@@ -33,7 +33,7 @@
     "test:e2e-up": "./tests/e2e/env/up.sh",
     "test:e2e-cleanup": "./tests/e2e/env/cleanup.sh",
     "test:e2e-reset": "npm run test:e2e-down && npm run test:e2e-cleanup",
-    "test:e2e": "NODE_CONFIG_DIR='tests/e2e/config' wp-scripts test-e2e --config tests/e2e/config/jest.config.js",
+    "test:e2e": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer-headless.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js",
     "test:e2e-dev": "NODE_CONFIG_DIR='tests/e2e/config' JEST_PUPPETEER_CONFIG='tests/e2e/config/jest-puppeteer.config.js' wp-scripts test-e2e --config tests/e2e/config/jest.config.js --puppeteer-interactive",
     "test:e2e-performance": "NODE_CONFIG_DIR='tests/e2e/config' wp-scripts test-e2e --config tests/e2e/config/jest.performance.config.js",
     "test:update-snapshots": "npm run test:js -- --updateSnapshot",

tests/e2e/config/jest-puppeteer-headless.config.js

@@ -0,0 +1,17 @@
+const { jestPuppeteerConfig } = require( '@woocommerce/e2e-environment' );
+
+// Add arg to allow accessing the payments iframes in interactive mode ({ headles: false }).
+// https://github.com/puppeteer/puppeteer/issues/4960#issuecomment-535729011
+jestPuppeteerConfig.launch.args.push( '--disable-features=site-per-process' );
+jestPuppeteerConfig.launch.args.push( '--disable-web-security' );
+jestPuppeteerConfig.launch.args.push( '--disable-features=IsolateOrigins' );
+jestPuppeteerConfig.launch.args.push( '--disable-site-isolation-trials' );
+
+// Set a real User Agent so the "Add block" button isn't disabled in Gutenberg during -dev tests.
+// Also keeping the "puppeteer-debug" value coming from @automattic.puppeteer
+jestPuppeteerConfig.launch.args.push(
+	// eslint-disable-next-line max-len
+	'--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 puppeteer-debug'
+);
+
+module.exports = jestPuppeteerConfig;