Create npm workspace for E2E tests

.github/workflows/e2e-tests.yml

@@ -101,6 +101,12 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'npm'
 
+      # nvm@7 is the minimum version required for npm workspace support.
+      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
+      # This can be removed once our node base version comes with nvm@7 or greater.
+      - name: Install npm Globally
+        run: npm run install-global-npm
+
       - name: npm install
         run: npm ci
 

.github/workflows/js-css-lint-test.yml

@@ -57,6 +57,13 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
+
+      # nvm@7 is the minimum version required for npm workspace support.
+      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
+      # This can be removed once our node base version comes with nvm@7 or greater.
+      - name: Install npm Globally
+        run: npm run install-global-npm
+
       - name: npm install
         run: npm ci
         env:

.github/workflows/visual-regression.yml

@@ -45,6 +45,13 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
+
+      # nvm@7 is the minimum version required for npm workspace support.
+      # This is needed to prevent js lint failures due to module resolution to the workspace packages.
+      # This can be removed once our node base version comes with nvm@7 or greater.
+      - name: Install npm Globally
+        run: npm run install-global-npm
+
       - name: npm install
         run: npm ci
       - name: Run Backstopjs

assets/js/modules/sign-in-with-google/components/setup/SetupForm.js

@@ -81,9 +81,8 @@ export default function SetupForm() {
 
 		if (
 			currentClientID === '' &&
-			global._googlesitekitModulesData?.[ 'sign-in-with-google' ]?.[
-				'existingClientID'
-			]
+			global._googlesitekitModulesData?.[ 'sign-in-with-google' ]
+				?.existingClientID
 		) {
 			setExistingClientID(
 				global._googlesitekitModulesData[ 'sign-in-with-google' ]

package.json

@@ -30,11 +30,10 @@
 		"test:js": "cross-env BABEL_ENV=test NODE_ENV=test jest --config=tests/js/jest.config.js --passWithNoTests",
 		"test:js:watch": "npm run test:js -- --watch",
 		"test:storybook": "npm run test:js -- --testMatch '<rootDir>/.storybook/*.test.js'",
-		"pretest:e2e": "./bin/local-env/env-check.sh && ./tests/e2e/bin/test-docker-connectivity",
-		"test:e2e": "cross-env WP_BASE_URL=http://localhost:9002 ./tests/e2e/script.js",
-		"test:e2e:interactive": "npm run test:e2e -- --puppeteer-interactive",
-		"test:e2e:watch": "npm run test:e2e -- --watch",
-		"test:e2e:watch:interactive": "npm run test:e2e -- --watch --puppeteer-interactive",
+		"test:e2e": "npm run test:e2e -w ./tests/e2e",
+		"test:e2e:interactive": "npm run test:e2e:interactive -w ./tests/e2e",
+		"test:e2e:watch": "npm run test:e2e:watch -w ./tests/e2e",
+		"test:e2e:watch:interactive": "npm run test:e2e:watch:interactive -w ./tests/e2e",
 		"storybook": "start-storybook -p 9001 -c .storybook --no-version-updates",
 		"storybook:vrt": "npm run storybook -- --ci --quiet",
 		"backstopjs": "./bin/backstop",
@@ -43,9 +42,10 @@
 		"lint:js-fix": "prettier --write --config .prettierrc.js --ignore-path .prettierignore \"**/*.{js,jsx,ts,tsx,.yml,.yaml}\"",
 		"lint:css": "stylelint ./assets/sass ./.storybook/assets/sass",
 		"lint:css-fix": "stylelint ./assets/sass ./.storybook/assets/sass --fix",
-		"env:start": "./bin/local-env/start.sh",
-		"env:stop": "./bin/local-env/stop.sh",
-		"env:reset-site": "./bin/local-env/install-wordpress.sh --reset-site",
+		"env:start": "npm run env:start -w ./tests/e2e",
+		"env:stop": "npm run env:stop -w ./tests/e2e",
+		"env:reset-site": "npm run env:reset-site -w ./tests/e2e",
+		"install-global-npm": "npm install -g npm@7.24.2",
 		"postinstall": "patch-package"
 	},
 	"browserslist": [
@@ -186,9 +186,7 @@
 		"@testing-library/react-hooks": "^3.3.0",
 		"@wordpress/babel-preset-default": "^4.17.0",
 		"@wordpress/browserslist-config": "^5.40.0",
-		"@wordpress/e2e-test-utils": "^4.11.0",
 		"@wordpress/eslint-plugin": "^7.1.0",
-		"@wordpress/jest-console": "^3.9.0",
 		"@wordpress/jest-preset-default": "7.1.1",
 		"@wordpress/prettier-config": "^2.0",
 		"@wordpress/stylelint-config": "^21.0.0",
@@ -214,7 +212,6 @@
 		"eslint-plugin-sitekit": "file:packages/eslint-plugin",
 		"eslint-scope": "^5.1.0",
 		"eslint-webpack-plugin": "^2.5.1",
-		"expect-puppeteer": "^4.4.0",
 		"faker": "^5.5.3",
 		"fetch-mock": "^9.10.3",
 		"fetch-mock-jest": "^1.3.0",
@@ -227,7 +224,6 @@
 		"husky": "^3.1.0",
 		"jest": "^26.6.3",
 		"jest-localstorage-mock": "^2.4.2",
-		"jest-puppeteer": "^4.4.0",
 		"jsdom": "^16.5.0",
 		"jsdom-testing-mocks": "^1.6.0",
 		"lint-staged": "^10.2.11",
@@ -260,5 +256,8 @@
 		"webpack-manifest-plugin": "^2.2.0",
 		"webpack-stream": "^5.2.1",
 		"webpackbar": "^4.0.0"
-	}
+	},
+	"workspaces": [
+		"tests/e2e"
+	]
 }

bin/local-env/docker-compose.yml → tests/e2e/bin/local-env/docker-compose.yml

@@ -17,9 +17,9 @@ services:
         define( 'WP_AUTO_UPDATE_CORE', false );
     volumes:
       - wordpress_data:/var/www/html
-      - ../../:/var/www/html/wp-content/plugins/google-site-kit
-      - ../../tests/e2e/plugins:/var/www/html/wp-content/plugins/google-site-kit-test-plugins
-      - ../../tests/e2e/mu-plugins:/var/www/html/wp-content/mu-plugins
+      - ../../../../:/var/www/html/wp-content/plugins/google-site-kit
+      - ../../plugins:/var/www/html/wp-content/plugins/google-site-kit-test-plugins
+      - ../../mu-plugins:/var/www/html/wp-content/mu-plugins
     depends_on:
       - mysql
 
@@ -35,8 +35,8 @@ services:
     volumes:
       - wordpress_data:/var/www/html
       - ./wp-cli-php.ini:/usr/local/etc/php/conf.d/wp-cli-php.ini
-      - ../../:/var/www/html/wp-content/plugins/google-site-kit
-      - ../../tests/e2e/mu-plugins:/var/www/html/wp-content/mu-plugins
+      - ../../../../:/var/www/html/wp-content/plugins/google-site-kit
+      - ../../mu-plugins:/var/www/html/wp-content/mu-plugins
     depends_on:
       - mysql
       - wordpress

tests/e2e/package.json

@@ -0,0 +1,32 @@
+{
+  "scripts": {
+    "pretest:e2e": "./bin/local-env/env-check.sh && ./bin/test-docker-connectivity",
+    "test:e2e": "cross-env WP_BASE_URL=http://localhost:9002 ./script.js",
+    "test:e2e:interactive": "npm run test:e2e -- --puppeteer-interactive",
+    "test:e2e:watch": "npm run test:e2e -- --watch",
+    "test:e2e:watch:interactive": "npm run test:e2e -- --watch --puppeteer-interactive",
+    "env:start": "./bin/local-env/start.sh",
+    "env:stop": "./bin/local-env/stop.sh",
+    "env:reset-site": "./bin/local-env/install-wordpress.sh --reset-site"
+  },
+  "config": {
+    "puppeteer": {
+      "skip": {
+        "download": true
+      }
+    }
+  },
+  "dependencies": {
+    "@wordpress/babel-preset-default": "^4.17.0",
+    "@wordpress/e2e-test-utils": "^4.11.0",
+    "@wordpress/jest-console": "^3.9.0",
+    "amphtml-validator": "^1.0.35",
+    "babel-jest": "^26.6.3",
+    "dockerode": "^4.0.2",
+    "expect-puppeteer": "^4.4.0",
+    "jest": "^26.6.3",
+    "jest-puppeteer": "^6.0.1",
+    "jsdom": "^16.5.0",
+    "puppeteer": "^10.4.0"
+  }
+}

tests/e2e/script.js

@@ -63,7 +63,7 @@ if ( result.status > 0 ) {
 	process.exit( result.status );
 }
 
-const config = [ '--config=tests/e2e/jest.config.js' ];
+const config = [ '--config=jest.config.js' ];
 
 const hasRunInBand = hasArgInCLI( '--runInBand' ) || hasArgInCLI( '-i' );
 const runInBand = ! hasRunInBand ? [ '--runInBand' ] : [];