Packages: Move e2e-tests to new structure (GoogleForCreators#6305)

Co-authored-by: Pascal Birchler <pascalb@google.com>

.eslintrc

@@ -333,7 +333,7 @@
     {
       "files": [
         "packages/e2e-test-utils/**/*.js",
-        "tests/e2e/**/*.js"
+        "packages/e2e-tests/src/**/*.js"
       ],
       "extends": [
         "plugin:jest/all"
@@ -356,7 +356,7 @@
       }
     },
     {
-      "files": ["tests/e2e/specs/**/*.js"],
+      "files": ["packages/e2e-tests/src/specs/**/*.js"],
       "rules": {
         "jsdoc/require-jsdoc": "off"
       }
@@ -373,8 +373,8 @@
         ".storybook/*.cjs",
         ".storybook/*.js",
         "tests/js/*.js",
-        "tests/e2e/*.js",
-        "tests/e2e/config/*.js",
+        "packages/e2e-tests/src/*.js",
+        "packages/e2e-tests/src/config/*.js",
         "assets/src/dashboard/karma-tests.cjs",
         "assets/src/edit-story/karma-tests.cjs",
         "packages/migration/src/**/*.js",

bin/local-env/docker-compose.yml

@@ -18,8 +18,8 @@ services:
       - wordpress_data:/var/www/html
       - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
       - ../../:/var/www/html/wp-content/plugins/web-stories
-      - ../../tests/e2e/plugins:/var/www/html/wp-content/plugins/web-stories-test-plugins
-      - ../../tests/e2e/assets:/var/www/html/wp-content/e2e-assets
+      - ../../packages/e2e-tests/src/plugins:/var/www/html/wp-content/plugins/web-stories-test-plugins
+      - ../../packages/e2e-tests/src/assets:/var/www/html/wp-content/e2e-assets
     depends_on:
       - mysql
 
@@ -29,7 +29,7 @@ services:
     volumes:
       - wordpress_data:/var/www/html
       - ../../:/var/www/html/wp-content/plugins/web-stories
-      - ../../tests/e2e/assets:/var/www/html/wp-content/e2e-assets
+      - ../../packages/e2e-tests/src/assets:/var/www/html/wp-content/e2e-assets
     depends_on:
       - mysql
       - wordpress

docs/e2e-tests.md

@@ -78,6 +78,6 @@ This will launch the browser with the devtools already open. Breakpoints can the
 
 Sometimes one might want to test additional scenarios that aren't possible in a WordPress installation out of the box. The tests setup allows adding some utility plugins that can be activated during E2E tests.
 
-These plugins can be added to `tests/e2e/plugins` and then activated via the WordPress admin.
+These plugins can be added to `packages/e2e-tests/src/plugins` and then activated via the WordPress admin.
 
-Test utilities like `createNewStory()` reside in the `tests/e2e/utils` folder.
+Test utilities like `createNewStory()` reside in the `packages/e2e-test-utils/src` folder.

package.json

@@ -100,7 +100,6 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@percy/puppeteer": "^1.1.0",
     "@prettier/plugin-xml": "^0.13.0",
     "@storybook/addon-a11y": "^6.1.14",
     "@storybook/addon-actions": "^6.1.14",
@@ -118,13 +117,10 @@
     "@testing-library/react": "^11.2.3",
     "@testing-library/react-hooks": "^3.7.0",
     "@testing-library/user-event": "^12.6.0",
-    "@web-stories-wp/e2e-test-utils": "*",
+    "@web-stories-wp/e2e-tests": "*",
     "@wordpress/babel-plugin-import-jsx-pragma": "^2.7.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^2.9.0",
-    "@wordpress/e2e-test-utils": "^4.16.1",
     "@wordpress/eslint-plugin": "^7.4.0",
-    "@wordpress/jest-console": "^4.0.1",
-    "@wordpress/jest-puppeteer-axe": "^3.0.1",
     "axe-core": "^4.1.1",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
@@ -161,7 +157,6 @@
     "jest-extended": "^0.11.5",
     "jest-fetch-mock": "^3.0.3",
     "jest-matcher-deep-close-to": "^2.0.1",
-    "jest-puppeteer": "^4.4.0",
     "jest-silent-reporter": "^0.4.0",
     "karma": "^6.1.0",
     "karma-chrome-launcher": "^3.1.0",
@@ -245,15 +240,15 @@
     "test:php": "vendor/bin/phpunit",
     "test:php:multisite": "vendor/bin/phpunit -c phpunit-multisite.xml.dist",
     "test:php:help": "npm run test:php -- --help",
-    "test:e2e": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs jest --runInBand --config=tests/e2e/jest.config.js",
+    "test:e2e": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs jest --runInBand --config=packages/e2e-tests/src/jest.config.js",
     "test:e2e:help": "npm run test:e2e -- --help",
     "test:e2e:percy": "percy exec --config=percy.config.yml -- npm run test:e2e",
     "test:e2e:watch": "npm run test:e2e -- --watch",
     "test:e2e:interactive": "PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test:e2e",
-    "test:e2e:debug": "PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs node --inspect-brk node_modules/.bin/jest --runInBand --config=tests/e2e/jest.config.js",
+    "test:e2e:debug": "PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs node --inspect-brk node_modules/.bin/jest --runInBand --config=packages/e2e-tests/src/jest.config.js",
     "test:e2e:firefox": "PUPPETEER_PRODUCT=firefox npm run test:e2e",
     "test:e2e:firefox:interactive": "PUPPETEER_PRODUCT=firefox npm run test:e2e:interactive",
-    "test:e2e:firefox:debug": "PUPPETEER_PRODUCT=firefox PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true node --inspect-brk node_modules/.bin/jest --runInBand --config=tests/e2e/jest.config.js",
+    "test:e2e:firefox:debug": "PUPPETEER_PRODUCT=firefox PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true node --inspect-brk node_modules/.bin/jest --runInBand --config=packages/e2e-tests/src/jest.config.js",
     "percy": "percy snapshot --config=percy.config.yml .test_artifacts/karma_snapshots/",
     "workflow:assets-version": "commander assets-version",
     "workflow:version": "commander version",

packages/e2e-test-utils/src/uploadFile.js

@@ -25,7 +25,7 @@ import { v4 as uuid } from 'uuid';
 /**
  * Uploads a file to the Media Library, and awaits its upload.
  *
- * The file should reside in tests/e2e/assets/.
+ * The file should reside in packages/e2e-tests/src/assets/.
  *
  * @param {string|null} file The file name to upload, for example 'foo.mp4'.
  * @param {boolean} checkUpload Check upload was successfully.
@@ -35,7 +35,10 @@ async function uploadFile(file, checkUpload = true) {
   const fileExtension = extname(file);
   await page.setDefaultTimeout(10000);
 
-  const testMediaPath = resolve(process.cwd(), 'tests/e2e/assets/' + file);
+  const testMediaPath = resolve(
+    process.cwd(),
+    `packages/e2e-tests/src/assets/${file}`
+  );
 
   // Copy file to <newname>.ext for upload.
   const newBaseName = uuid();

packages/e2e-tests/README.md

@@ -0,0 +1,3 @@
+# E2E tests
+
+A set of e2e test for web stories editor, dashboard and integrations with plugins.