Migrate Puppeteer test action from Blocks repo (#42733)

* Migrate Puppeteer test action from Blocks repo

* Update file path

* Use pnpm

* Use npm

* Updates based on feedback

* Comment out paths for testing

* Fix paths with working directory

* Use pnpm

* Fix missing pnpms

* npm instead

* Do use pnpm

* Update command

* Blocks wp-env config

* Update paths, config files

* Run test commands from blocks

* Config update

* Uncomment paths so that e2e checks only run on Blocks

---------

Co-authored-by: Jon Lane <jon.lane@automattic.com>

.github/workflows/blocks-e2e.yml

@@ -0,0 +1,105 @@
+name: Run Blocks E2E Tests
+
+on:
+    pull_request:
+        paths:
+            - 'plugins/woocommerce-blocks/**'
+            - 'plugins/woocommerce/src/Blocks/**'
+            - 'plugins/woocommerce/templates/**'
+            - 'plugins/woocommerce/patterns/**'
+
+jobs:
+    JSE2EWithGutenberg:
+        if: ${{ false }} # disable until we've fixed failing tests.
+        strategy:
+            fail-fast: false
+            matrix:
+                part: [1, 2, 3, 4, 5]
+        name: JavaScript E2E Tests (WP latest with Gutenberg plugin)
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: plugins/woocommerce-blocks
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Setup WooCommerce Monorepo
+              uses: ./.github/actions/setup-woocommerce-monorepo
+              with:
+                  install: '@woocommerce/plugin-woocommerce...'
+                  build: '@woocommerce/plugin-woocommerce'
+
+            - name: Install Jest
+              run: pnpm install -g jest
+
+            - name: E2E Tests (WP latest with Gutenberg plugin)
+              env:
+                  WOOCOMMERCE_BLOCKS_PHASE: 3
+              run: |
+                  node ./bin/wp-env-with-gutenberg.js
+                  npm run wp-env start
+                  npm run wp-env:config && npx cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --listTests > ~/.jest-e2e-tests
+                  npx cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
+
+            - name: Upload artifacts on failure
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3.1.2
+              with:
+                  name: e2e-with-gutenberg-test-report-${{matrix.part}}
+                  path: reports/e2e
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@v3.1.2
+              if: always()
+              with:
+                  name: flaky-tests-report-${{ matrix.part }}
+                  path: flaky-tests
+                  if-no-files-found: ignore
+
+    JSE2ETests:
+        name: JavaScript E2E Tests (latest)
+        strategy:
+            fail-fast: false
+            matrix:
+                part: [1, 2, 3, 4, 5]
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: plugins/woocommerce-blocks
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Setup WooCommerce Monorepo
+              uses: ./.github/actions/setup-woocommerce-monorepo
+              with:
+                  install: '@woocommerce/plugin-woocommerce...'
+                  build: '@woocommerce/plugin-woocommerce'
+
+            - name: Install Jest
+              run: pnpm install -g jest
+
+            - name: E2E Tests (WP latest)
+              env:
+                  WOOCOMMERCE_BLOCKS_PHASE: 3
+              run: |
+                  node ./bin/wp-env-with-wp-641.js
+                  pnpm --filter='@woocommerce/block-library' wp-env start
+                  pnpm wp-env:config
+                  pnpm --filter='@woocommerce/block-library' exec cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --listTests > ~/.jest-e2e-tests
+                  pnpm --filter='@woocommerce/block-library' exec cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests ) --listTests
+                  pnpm --filter='@woocommerce/block-library' exec cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js cross-env NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --runInBand --runTestsByPath $( awk 'NR % 5 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
+
+            - name: Upload artifacts on failure
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3.1.2
+              with:
+                  name: e2e-test-report-${{matrix.part}}
+                  path: reports/e2e
+
+            - name: Archive flaky tests report
+              uses: actions/upload-artifact@v3.1.2 # v2.2.2
+              if: always()
+              with:
+                  name: flaky-tests-report-${{ matrix.part }}
+                  path: flaky-tests
+                  if-no-files-found: ignore

bin/wp-env-with-wp-641.js

@@ -0,0 +1,19 @@
+const fs = require( 'fs' );
+const path = require( 'path' );
+
+const wpEnvRaw = fs.readFileSync(
+	path.join( __dirname, '../plugins/woocommerce-blocks/.wp-env.json' )
+);
+const wpEnv = JSON.parse( wpEnvRaw );
+
+// Pin the core version to 6.2.2 for Jest E2E test so we can keep the test
+// passing when new WordPress versions are released. We do this because we're
+// moving to Playwright and will abandon the Jest E2E tests once the migration
+// is complete.
+wpEnv.core = 'WordPress/WordPress#6.4.1';
+
+// We write the new file to .wp-env.override.json (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#wp-env-override-json)
+fs.writeFileSync(
+	path.join( __dirname, '..', '.wp-env.override.json' ),
+	JSON.stringify( wpEnv )
+);

plugins/woocommerce-blocks/.wp-env.json

@@ -12,7 +12,8 @@
 				"wp-content/mu-plugins": "./node_modules/@wordpress/e2e-tests/mu-plugins",
 				"wp-content/plugins/gutenberg-test-plugins": "./node_modules/@wordpress/e2e-tests/plugins",
 				"wp-cli.yml": "./wp-cli.yml",
-				"custom-plugins" : "./tests/e2e/mocks/custom-plugins"
+				"custom-plugins": "./tests/e2e/mocks/custom-plugins",
+				"wp-content/plugins/woocommerce/blocks-bin": "./bin"
 			}
 		}
 	},

plugins/woocommerce-blocks/bin/wp-env-config.sh

@@ -21,7 +21,8 @@ wp wc customer update 1 --user=1 --billing='{"first_name":"John","last_name":"Do
 ## Prepare translation for the test suite
 wp language core install nl_NL
 wp language plugin install woocommerce nl_NL
-wp plugin activate woocommerce-blocks
+## No need to install the plugin anymore
+# wp plugin activate woocommerce-blocks
 ## We download a full version of .po (that has translation for js files as well).
 curl https://translate.wordpress.org/projects/wp-plugins/woo-gutenberg-products-block/stable/nl/default/export-translations/ --output ./wp-content/languages/plugins/woo-gutenberg-products-block-nl_NL.po
 sleep 5

plugins/woocommerce-blocks/bin/wp-env-pre-config.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 BASENAME=$(basename "`pwd`")
 # We need to pass the blocks plugin folder name to the script, the name can change depending on your local env and we can't hardcode it.
-npm run wp-env run tests-cli './wp-content/plugins/'$BASENAME'/bin/wp-env-config.sh' $BASENAME
+npm run wp-env run tests-cli './wp-content/plugins/woocommerce/blocks-bin/wp-env-config.sh' woocommerce

plugins/woocommerce-blocks/tests/e2e-jest/config/jest.config.js

@@ -37,7 +37,7 @@ module.exports = {
 	],
 	transformIgnorePatterns: [
 		'node_modules/?!(simple-html-tokenizer|is-plain-obj|is-plain-object|memize)',
-		'node_modules/@woocommerce/e2e-utils/node_modules/config',
+		'node_modules/config',
 	],
 	testMatch: [ '**/?(*.)+(spec|test).[jt]s?(x)' ],
 };