feat: add Web Test Runner framework and tooling (#1538)

* Web Test Runner POC

* Removes old test files and adds new test

* Updates generator for new tests

* Adds new test script and generator for new tests

* Adds new tooling to run tests

* Updates docs and wtr scripts.

* Updates readme to show test generator

* Fixes test script for pfe-select element

* Updates wtr glob so it doesn't select node_modules tests

* Adds caching for ms-playright

* Resolves merge conflicts

* Updates old react and vue tests to use a CDN instead of local libraries

* chore: Update builds to run in parallel; fix watch error (#1535)

* chore: Update builds to run in parallel; fix watch error

* chore: Add async support for watch tasks

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* docs: migrate 11ty config to the root of the project (#1542)

* chore: Update builds to run in parallel; fix watch error

* chore: Add async support for watch tasks

* docs: Resolve storybook error; migrate 11ty templates

* docs: Abstracting header and footer

* docs: Working through rendering issue

* docs: Remove build script

* docs: Update mkdir logic

* docs: Clean up templates

* docs: Update templates for imports

* docs: Updating the config

* docs: Remove doc-listing-inject for now

* docs: Update doc listing logic

* docs: Add a way to render the TODOS are JSON

* docs: Apply design suggestions from Dan

* docs: Updating READMEs

* docs: Updating CDN references

* docs: Update package and remove spandx config

* docs: Adjusting the watch script

* docs: Update build script

* docs: Adjust how packages are brought in so they are loaded in the head

* docs: Temporarily remove packages

* docs: Run build before storybook and docs

* docs: Update build flow

* docs: Change mkdir logic

* docs: Update script for build

* docs: Maintain link to demo pages in footer of production

* docs: Fix parallelization in watch task

* docs: Update README

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Fixes typo

* Updates per code review

* Updates the test echo now that we support single element watching

* Updates pfe-select test command to match the generator

* Adds changelong

* Changelog update

Co-authored-by: Zack Hawkins <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 4 people

.github/workflows/tests.yml

@@ -50,7 +50,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [10]
+        node: ['12.x']
     # Confirm that the PR is not in draft
     if: |
       (
@@ -90,6 +90,7 @@ jobs:
           path: |
             ~/.npm
             **/node_modules
+            ~/.cache/ms-playwright
           key: ${{ steps.hash.outputs.HASH }}
 
       - name: Install dependencies
@@ -108,15 +109,12 @@ jobs:
           path: elements/*/dist/*
           if-no-files-found: error
 
-  # Test command can run concurrent with e2e so it downloads the
+  # Test command can run concurrent with e2e and test-wtr so it downloads the
   # compiled assets from the build and uses those instead of reinstalling.
   test:
-    name: Run test suite (wct)
+    name: Run test suite (Web Component Tester)
     needs: build
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [10]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
@@ -156,6 +154,57 @@ jobs:
       - name: Run tests
         run: npm test -- --nobuild
 
+  # Test command can run concurrent with e2e and wct so it downloads the
+  # compiled assets from the build and uses those instead of reinstalling.
+  test-wtr:
+    name: Run test suite (Web Test Runner)
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Configures the node version used on GitHub-hosted runners.
+      - name: Configure node version
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      # Set up cross-browser testing on Chromium, WebKit and Firefox with Playwright.
+      - name: Set up Playwright
+        uses: microsoft/playwright-github-action@v1
+
+      # Caching speeds up the npm install step.
+      - name: Access cached node modules
+        id: get-node-cache
+        uses: actions/cache@v2
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: |
+            ~/.npm
+            **/node_modules
+            ~/.cache/ms-playwright
+          key: ${{ needs.build.outputs.CACHE_KEY }}
+
+      - name: Install dependencies
+        if: steps.get-node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Access compiled assets
+        uses: actions/download-artifact@v2
+        id: download-compiled-assets
+        with:
+          name: compiled-assets
+          path: elements
+
+      - name: Retry build if it failed
+        if: failure()
+        run: npm run build
+
+      - name: Run tests
+        run: npm run test:ci
+
   # E2E command can run concurrent with test so it downloads the
   # compiled assets from the build and uses those instead of reinstalling.
   # Only run visual tests if the PR is labeled "ready to merge" or "run e2e"
@@ -168,9 +217,6 @@ jobs:
       contains(github.event.pull_request.user.login, 'dependabot') ||
       contains(github.event.pull_request.user.login, 'dependabot-preview')
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [10]
     steps:
       - name: BrowserStack environment setup
         uses: "browserstack/github-actions/setup-env@master"

.nvmrc

@@ -1 +1 @@
-v12.16.3
+v12.18.2

CHANGELOG-1.x.md

@@ -1,6 +1,8 @@
-# 1.6.1 (2021)
+# 1.7.0 (2021)
+
+- [20cb906](https://github.com/patternfly/patternfly-elements/commit/20cb906b5bf3d9340097170d6be7bdacbb4b12a5) fix: Updating PFElement.log (aka this.log) so it logs arrays and objects, instead of converting them to strings
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Adds Web Test Runner which will eventually replace Web Component Tester
 
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Updating PFElement.log (aka this.log) so it logs arrays and objects, instead of converting them to strings
 
 # 1.6.0 (2021-04-23)
 

README.md

@@ -62,6 +62,47 @@ npm run dev [component-name(s)]
 
 ### Testing
 
+#### ✨ New tests ([Web Test Runner](https://modern-web.dev/docs/test-runner/overview/))
+
+```shell
+# Run all tests in watch mode.
+npm run test:watch
+
+# Run a single test in watch mode.
+npm run test:watch --element="pfe-select"
+# Or multiple:
+npm run test:watch --element="{pfe-select,pfe-card}"
+
+# Run all tests using a React wrapper in watch mode.
+npm run test:watch --group="with-react"
+
+# Run all tests using a Vue wrapper in watch mode.
+npm run test:watch --group="with-vue"
+
+# Build all elements then run all tests in "watch" mode.
+npm run test:build:watch
+
+# Build specific elements then run those tests in "watch" mode.
+npm run test:build:watch --element="pfe-select"
+# Or multiple:
+npm run test:build:watch --element="{pfe-select,pfe-card}"
+
+# Run all tests with and without React and Vue wrappers.
+# This is run on pull request within CI.
+npm run test:ci
+```
+
+Generate a new test file for an existing element by using:
+
+```shell
+npm run new:test -- [name-of-element]
+
+# Example:
+npm run new:test -- pfe-tabs
+```
+
+#### 🕸 Legacy tests ([Web Component Tester](https://github.com/Polymer/web-component-tester))
+
 ```shell
 # Build and run tests on all components
 npm run test

docs/docs/develop/testing.md

@@ -185,7 +185,7 @@ Lastly, we can run the test command below to see how we did. I've added the `-p`
 npm test pfe-cool-element -- -p
 ```
 
-This command performs a build, starts up web component tester, and provides us a URL that we can copy and paste into the browser. The command line will give you a URL like this: 
+This command performs a build, starts up web component tester, and provides us a URL that we can copy and paste into the browser. The command line will give you a URL like this:
 
 ![npm test command](/images/develop/develop-testing-npm-test.png)
 
@@ -298,4 +298,4 @@ That's it for testing! Now that we've created our `pfe-cool-element` and all of
 <pfe-cta>
   <a href="../pull-request">Next up: Open a pull request</a>
 </pfe-cta>
-:::
+:::

elements/pfe-accordion/test/old-test/pfe-accordion_react_test.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script src="/components/web-component-tester/browser.js"></script>
-    <script src="/components/react/umd/react.production.min.js"></script>
-    <script src="/components/react-dom/umd/react-dom.production.min.js"></script>
-    <script src="/components/babel-standalone/babel.min.js"></script>
+    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
     <script type="module" src="../../dist/pfe-accordion.js"></script>
     <script type="text/babel">
       function TestSuite() {

elements/pfe-accordion/test/old-test/pfe-accordion_vue_test.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script src="/components/web-component-tester/browser.js"></script>
-    <script src="/components/vue/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js" crossorigin></script>
     <script type="module" src="../../dist/pfe-accordion.js"></script>
   </head>
   <body>

elements/pfe-accordion/test/pfe-accordion_react_test.html

@@ -6,9 +6,9 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="/components/web-component-tester/browser.js"></script>
-  <script src="/components/react/umd/react.production.min.js"></script>
-  <script src="/components/react-dom/umd/react-dom.production.min.js"></script>
-  <script src="/components/babel-standalone/babel.min.js"></script>
+  <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
   <script type="module" src="../dist/pfe-accordion.js"></script>
   <script type="text/babel">
     function TestSuite() {

elements/pfe-accordion/test/pfe-accordion_vue_test.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="/components/web-component-tester/browser.js"></script>
-  <script src="/components/vue/dist/vue.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js" crossorigin></script>
   <script type="module" src="../dist/pfe-accordion.js"></script>
 </head>
 

elements/pfe-autocomplete/test/pfe-autocomplete_vue_test.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <script src="/components/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script src="/components/web-component-tester/browser.js"></script>
-  <script src="/components/vue/dist/vue.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" crossorigin></script>
   <script type="module" src="../dist/pfe-autocomplete.js"></script>
 </head>