Migrate from Jest to Playwright (#62)

The Jest tests have been completely replaced by e2e tests written using
Playwright.

Jest is not well suited for testing the behavior of this website. Too
much of the code-under-test was related to DOM/browser behavior that is
not adequately mocked by Jest's `jsdom` environment, and there was no
way to fully reset in between each test to prevent them from
interfering with each other. As a result, most of the functionality was
not being tested.

We should now have nearly complete coverage. The tests have been split
into modules, one for each use-case.

The dependency `http-server` was added to serve the site locally during
development, and in CI.

The README has been updated with some basic instructions, but there is
still much room for improvement there.

The Playwright config was auto-generated by Playwright's setup command,
with minimal changes made. The change from default were:
* Set a `baseURL`
* Uncomment Edge and Google Chrome
* Set the `webServer` config

.eslintrc.js

@@ -19,18 +19,6 @@ module.exports = {
       },
       extends: ['@metamask/eslint-config-nodejs'],
     },
-
-    {
-      files: ['*.test.ts'],
-      extends: ['@metamask/eslint-config-jest'],
-      parserOptions: {
-        sourceType: 'module',
-      },
-      rules: {
-        // disabled to allow use of Jest tags to set inline test environment options
-        'jsdoc/check-tag-names': 'off',
-      },
-    },
   ],
 
   ignorePatterns: [

.github/workflows/build-lint-test.yml

@@ -74,7 +74,8 @@ jobs:
           fi
 
   test:
-    name: Test
+    name: Run Playwright tests
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     needs:
       - prepare
@@ -89,7 +90,16 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
       - run: yarn --immutable --immutable-cache
-      - run: yarn test
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps chrome chromium firefox msedge
+      - name: Run Playwright tests
+        run: yarn test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
       - name: Require clean working directory
         shell: bash
         run: |

.gitignore

@@ -75,3 +75,8 @@ node_modules/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -13,12 +13,34 @@ This package is published to npm so that we can host it locally when running end
 - Install [Yarn v3](https://yarnpkg.com/getting-started/install)
 - Run `yarn install` to install dependencies and run any required post-install scripts
 
-### Testing and Linting
-
-Run `yarn test` to run the tests once. To run tests on file changes, run `yarn test:watch`.
+### Linting
 
 Run `yarn lint` to run the linter, or run `yarn lint:fix` to run the linter and fix any automatically fixable issues.
 
+### Testing
+
+#### Installing Playwright
+
+Before running tests using Playright, you will need to install the required browsers using `yarn playwright install [space-separated browsers]`. Use the `--with-deps` flag as well to prompt Playwright to install OS dependencies as well if possible, though be warned that this may require elevated privileges.
+
+The browsers we test with in CI are `chrome`, `chromium`, `firefox`, and `msedge`.
+
+To install all browsers we use on CI and any OS dependencies, run:
+
+```
+yarn playwright install --with-deps chrome chromium firefox msedge
+```
+
+You may want to consider using just one or two browsers for local testing to speed things up. These install steps are long and require a decent amount of disk space.
+
+#### Running tests
+
+Tests can be run using `yarn test`. This will run all tests using all browsers.
+
+To run with just a single browser, you'll need to use the flag `--project=[browser name]`. For example, `yarn test --project=chromium` to run all tests with Chromium. See the Playwright configuration (`playwright.config.ts`) to see the other project names.
+
+If you want to run a single test suite, pass in the test filename as a parameter. For example, `yarn test ./tests/defaults.spec.ts` will run just the "defaults" test suite.
+
 ### Release & Publishing
 
 The project follows the same release process as the other libraries in the MetaMask organization. The GitHub Actions [`action-create-release-pr`](https://github.com/MetaMask/action-create-release-pr) and [`action-publish-release`](https://github.com/MetaMask/action-publish-release) are used to automate the release process; see those repositories for more information about how they work.

package.json

@@ -19,8 +19,8 @@
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' '**/*.yml' '!.yarnrc.yml' --ignore-path .gitignore --no-error-on-unmatched-pattern",
     "prepack": "yarn build:prod && yarn lint && yarn test",
     "setup": "yarn install && yarn allow-scripts",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "start": "yarn build && yarn http-server ./dist",
+    "test": "yarn playwright test"
   },
   "dependencies": {
     "@metamask/design-tokens": "^1.6.0",
@@ -37,12 +37,11 @@
     "@lavamoat/allow-scripts": "^2.3.0",
     "@metamask/auto-changelog": "^3.0.0",
     "@metamask/eslint-config": "^9.0.0",
-    "@metamask/eslint-config-jest": "^9.0.0",
     "@metamask/eslint-config-nodejs": "^9.0.0",
     "@metamask/eslint-config-typescript": "^9.0.1",
+    "@playwright/test": "^1.30.0",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^26.0.13",
     "@types/node": "^17.0.23",
     "@types/pump": "^1.1.1",
     "@types/readable-stream": "^2.3.13",
@@ -53,19 +52,17 @@
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.5",
     "eslint-plugin-jsdoc": "^36.1.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "exorcist": "^2.0.0",
     "fs-extra": "^10.1.0",
-    "jest": "^28.0.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "http-server": "^14.1.1",
     "minify-stream": "^2.1.0",
+    "playwright": "^1.30.0",
     "prettier": "^2.6.2",
     "prettier-plugin-packagejson": "^2.2.17",
     "terser": "^5.13.1",
-    "ts-jest": "^28.0.1",
     "ts-node": "^10.7.0",
     "typescript": "~4.4.4",
     "workbox-build": "^6.5.3"
@@ -80,7 +77,8 @@
   },
   "lavamoat": {
     "allowScripts": {
-      "@lavamoat/preinstall-always-fail": false
+      "@lavamoat/preinstall-always-fail": false,
+      "playwright": false
     }
   }
 }