Switching to playwright (#4341)

* switching to playwright * wip * wip * wip * lots of work ahead * wip * rename * auth wip * wip * progress * use --rootDir * change rootdir * wip * wip * install-deps * try this * kumascript tests * ignore accordingly * wip * wip * CONTENT_ROOT * CONTENT_ROOT * debugging * debugging * debugging * try this * debugging * debugging * debugging * debugging * correct browser name * correct browser name * config file * hopefully make tests a bit more reliable * tidying up some more * tidying up more * simplifying more * hopefully a bit better * start on the search page * yarn lock update * rewrite README about testing * networkidle
mdn · Aug 5, 2021 · 2b3289d · 2b3289d
1 parent da803d3
commit 2b3289d
Show file tree

Hide file tree

Showing 33 changed files with 1,149 additions and 1,306 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -17,14 +17,6 @@ updates:
       # We don't use storybook at the moment.
       - dependency-name: "@storybook/*"
 
-      # In https://github.com/mdn/yari/issues/3694 we discovered that
-      # installing puppeteer 9.1.0 seems to have made the tests flaky
-      # when jest starts up. See the issue for more detail.
-      # After this, we can keep an eye on puppeteer to see if the tests
-      # get better later with new versions.
-      - dependency-name: "puppeteer"
-        versions: ["9.1.x"]
-
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
@@ -71,8 +71,6 @@ jobs:
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: yarn --frozen-lockfile
 
       - name: Install Python

diff --git a/.github/workflows/developing.yml b/.github/workflows/developing.yml
@@ -19,21 +19,19 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: "12"
+          cache: "yarn"
 
       - name: Cache node_modules
         uses: actions/[email protected]
         id: cached-node_modules
         with:
           path: |
             node_modules
-          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('.github/workflows/developing.yml') }}
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
-        run: |
-          yarn --frozen-lockfile
+        run: yarn --frozen-lockfile
 
       - name: Setup kernel for react native, increase watchers
         run: |
@@ -72,11 +70,9 @@ jobs:
           # This will make sure the tests in `testing/tests/*.test.js` only run
           # if the development server is up and ready to be tested.
           TESTING_DEVELOPING: true
-          # Use local chrome installs since we skip downloading it as part
-          # of the yarn installs above
-          PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome
+          CONTENT_ROOT: mdn/content/files
         run: |
-          yarn test:testing developing
+          yarn test:developing
 
       - name: Debug server's stdout and stderr if tests failed
         if: failure()

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -35,8 +35,6 @@ jobs:
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: yarn --frozen-lockfile
 
       - name: Build the build

diff --git a/.github/workflows/npm-published-simulation.yml b/.github/workflows/npm-published-simulation.yml
@@ -24,19 +24,18 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: "12"
+          cache: "yarn"
 
       - name: Cache node_modules
         uses: actions/[email protected]
         id: cached-node_modules
         with:
           path: |
             node_modules
-          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('.github/workflows/npm-published-simulation.yml') }}
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: yarn --frozen-lockfile
 
       - name: Setup kernel for react native, increase watchers
@@ -87,16 +86,19 @@ jobs:
           # This will make sure the tests in `testing/tests/*.test.js` only run
           # if the development server is up and ready to be tested.
           TESTING_DEVELOPING: true
-          # Use local chrome installs since we skip downloading it as part
-          # of the yarn installs above
-          PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome
           # When running Yari from within mdn/content it only starts 1 server;
           # the one on localhost:5000. No React dev server; the one
           # on localhost:3000.
           # Testing that dev server is not relevant or important in this context.
           DEVELOPING_SKIP_DEV_URL: true
+          CONTENT_ROOT: mdn/content/files
+        run: |
+          yarn test:developing
+
+      - name: SSR build a page
+        working-directory: mdn/content
         run: |
-          yarn test:testing developing
+          yarn build files/en-us/mdn/kitchensink/index.html
 
       - name: Debug server's stdout and stderr if tests failed
         if: failure()
@@ -106,8 +108,3 @@ jobs:
           echo ""
           echo "STDERR..................................................."
           cat /tmp/stderr.log
-
-      - name: SSR build a page
-        working-directory: mdn/content
-        run: |
-          yarn build files/en-us/mdn/kitchensink/index.html
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
@@ -39,8 +39,6 @@ jobs:
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: |
           yarn --frozen-lockfile
 

diff --git a/.github/workflows/pr-kumascript.yml b/.github/workflows/pr-kumascript.yml
@@ -34,12 +34,10 @@ jobs:
         with:
           path: |
             node_modules
-          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('.github/workflows/pr-kumascript.yml') }}
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: |
           yarn --frozen-lockfile
 

diff --git a/.github/workflows/prod-build.yml b/.github/workflows/prod-build.yml
@@ -94,8 +94,6 @@ jobs:
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: yarn --frozen-lockfile
 
       - name: Install Python

diff --git a/.github/workflows/stage-build.yml b/.github/workflows/stage-build.yml
@@ -94,8 +94,6 @@ jobs:
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: yarn --frozen-lockfile
 
       - name: Install Python

diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -20,19 +20,18 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: "12"
+          cache: "yarn"
 
       - name: Cache node_modules
         uses: actions/[email protected]
         id: cached-node_modules
         with:
           path: |
             node_modules
-          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}-${{ hashFiles('.github/workflows/testing.yml') }}
 
       - name: Install all yarn packages
         if: steps.cached-node_modules.outputs.cache-hit != 'true'
-        env:
-          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
         run: |
           yarn --frozen-lockfile
 
@@ -45,26 +44,27 @@ jobs:
       - name: Unit testing client
         run: yarn test:client
 
-      - name: Functional testing
+      - name: Build and start server
         env:
-          # Make this env var explicit for GitHub Actions because in local
-          # dev/debug you're encouraged to start it yourself in a separate
-          # terminal.
-          TESTING_START_SERVER: true
-          # Use local chrome installs since we skip downloading it as part
-          # of the yarn installs above
-          PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome
+          ENV_FILE: testing/.env
         run: |
-          # Needed for the puppeteer tests that start a static Express server,
-          # but it starts it from within the testing/ path.
-          echo "CONTENT_ROOT=content/files" >> .env
+          yarn prepare-build
+          yarn build
+
+          yarn start:static-server > /tmp/stdout.log 2> /tmp/stderr.log &
+          sleep 1
+          curl --retry-connrefused --retry 5 http://localhost:5000 > /dev/null
 
-          # In terms of the --maxWorkers option, it's not yet clear which
-          # is best.
-          # See https://jestjs.io/docs/en/troubleshooting#tests-are-extremely-slow-on-docker-andor-continuous-integration-ci-server
-          # and https://www.peterbe.com/plog/ideal-number-of-workers-in-jest-maxWorkers
-          # CI tends to have fewer CPUs than laptops so let's stay conservative
-          # for now.
-          # Also note that `--runInBand` is the same as `--maxWorkers=1`
+      - name: Functional testing
+        run: |
+          yarn test:testing
+          yarn test:headless
 
-          ./testing/scripts/functional-test.sh --runInBand
+      - name: Debug server's stdout and stderr if tests failed
+        if: failure()
+        run: |
+          echo "STDOUT..................................................."
+          cat /tmp/stdout.log
+          echo ""
+          echo "STDERR..................................................."
+          cat /tmp/stderr.log
diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -15,10 +15,6 @@ export const CRUD_MODE_HOSTNAMES = (
   .map((x) => x.trim())
   .filter(Boolean);
 
-export const AUTOCOMPLETE_SEARCH_WIDGET = JSON.parse(
-  process.env.REACT_APP_AUTOCOMPLETE_SEARCH_WIDGET || JSON.stringify(CRUD_MODE)
-);
-
 // Remember to keep this in sync with the list inside the Node code.
 // E.g. libs/constants.js
 // Hardcoding the list in both places is most convenient and most performant.

diff --git a/client/src/ui/organisms/header/index.scss b/client/src/ui/organisms/header/index.scss
@@ -73,11 +73,12 @@
   }
 
   @media #{$mq-large-desktop-and-up} {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 2fr 1fr 70px;
   }
 
   .main-nav,
-  .header-search {
+  .header-search,
+  .auth-container {
     grid-column: 1/2;
   }
 
@@ -89,6 +90,10 @@
     grid-row: 1/2;
   }
 
+  .auth-container {
+    grid-row: 3/4;
+  }
+
   @media #{$mq-tablet-and-up} {
     .main-nav {
       grid-column: 1/3;
@@ -99,11 +104,18 @@
       grid-column: 1/2;
       grid-row: 2/3;
     }
+
+    .auth-container {
+      grid-column: 2/3;
+      grid-row: 2/3;
+      justify-self: flex-end;
+    }
   }
 
   @media #{$mq-large-desktop-and-up} {
     .main-nav,
-    .header-search {
+    .header-search,
+    .auth-container {
       grid-row: 1/2;
     }
 
@@ -114,6 +126,10 @@
     .header-search {
       grid-column: 2/3;
     }
+
+    .auth-container {
+      grid-column: 3/4;
+    }
   }
 }
 

diff --git a/client/src/ui/organisms/header/index.tsx b/client/src/ui/organisms/header/index.tsx
@@ -1,5 +1,6 @@
 import { useRef, useState } from "react";
 
+import Login from "../../molecules/login";
 import { Logo } from "../../atoms/logo";
 import MainMenu from "../../molecules/main-menu";
 import { Search } from "../../molecules/search";
@@ -95,6 +96,9 @@ export function Header() {
             toggleMainMenu();
           }}
         />
+        <div className="auth-container">
+          <Login />
+        </div>
       </div>
     </header>
   );

diff --git a/docs/envvars.md b/docs/envvars.md
@@ -205,31 +205,6 @@ This is the port for the WebSocket server, which is started when you run `yarn s
 
 If you want to serve static files some a completely different directory.
 
-## Testing
-
-### `TESTING_OPEN_BROWSER`
-
-**Default: `false`**
-
-When running the `jest-puppeteer` test suites, if you set this to `true`,
-it will open a browser on every page navigation.
-
-It might just flash by too quickly, so consider putting in
-`await jestPuppeteer.debug()` inside the test function to slow it down.
-
-### `TESTING_START_SERVER`
-
-**Default: `false`**
-
-When `jest-puppeteer` starts the `jest` tests, if this variable is set
-to `true` it will execute `node ../server/index.js` to start the `server`
-on `localhost:5000`.
-
-In most cases, on your laptop it's better to start the server yourself
-in a separate terminal and then run the headless tests in another.
-
-For more information, see the `testing/README.md`.
-
 ## Client
 
 NOTE! Due to a quirk of how we build the client, anything `REACT_APP_*` environment

diff --git a/package.json b/package.json
@@ -25,12 +25,20 @@
     "test": "yarn prettier-check && yarn test:client && yarn test:kumascript && yarn test:content && yarn test:testing",
     "test:client": "cd client && tsc --noEmit && react-scripts test --env=jest-environment-jsdom-sixteen",
     "test:content": "jest content",
+    "test:headless": "playwright test headless",
+    "test:developing": "playwright test developing",
     "test:kumascript": "jest kumascript",
-    "test:testing": "cd testing && jest",
+    "test:testing": "jest --rootDir testing",
     "tool": "node tool/cli.js",
     "watch:ssr": "cd ssr && webpack --mode=production --watch",
     "prepare": "husky install"
   },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "headless*",
+      "developing.spec.js"
+    ]
+  },
   "resolutions": {
     "@typescript-eslint/typescript-estree": ">=4.15.2",
     "babel-loader": "8.1.0",
@@ -108,6 +116,7 @@
     "@babel/core": "^7.15.0",
     "@mdn/dinocons": "^0.3.4",
     "@mdn/minimalist": "^2.0.2",
+    "@playwright/test": "1.13.0",
     "@storybook/addon-a11y": "^6.3.4",
     "@storybook/addon-essentials": "^6.3.4",
     "@storybook/preset-create-react-app": "^3.2.0",
@@ -140,14 +149,12 @@
     "ignore-loader": "^0.1.2",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "jest-junit-reporter": "^1.1.0",
-    "jest-puppeteer": "5.0.4",
     "jsdom": "^16.7.0",
     "node-dev": "7.0.0",
     "pegjs": "^0.10.0",
     "prettier": "2.3.2",
     "prettier-plugin-packagejson": "^2.2.11",
     "pretty-quick": "3.1.1",
-    "puppeteer": "9.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-is": "^17.0.2",