add playwright harness script and configs (#4229)

package.json

@@ -24,7 +24,9 @@
       "**/@types/chai",
       "**/@types/jest",
       "**/@types/karma",
-      "**/@types/mocha"
+      "**/@types/mocha",
+      "**/@types/node",
+      "**/chai"
     ]
   },
   "repository": {

packages/web-components/fast-components/package.json

@@ -20,6 +20,7 @@
   "unpkg": "dist/fast-components.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
+    "clean:test": "node ../../../build/clean.js test/dist",
     "doc": "api-extractor run --local",
     "doc:ci": "api-extractor run",
     "build": "yarn generate-default-palettes && yarn build:tsc && yarn generate-open-ui-definition && yarn build:rollup && yarn doc",
@@ -49,7 +50,11 @@
     "test-chrome:verbose:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
     "test-chrome:verbose:debugger": "karma start karma.conf.js --browsers=ChromeDebugging --reporter=mocha",
     "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    "test-firefox:verbose": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha",
+    "test:build-tsc": "tsc -p ./test/tsconfig.json",
+    "test:build-rollup": "rollup -c ./test/rollup.config.js",
+    "test:mocha": "mocha --config ./test/.mocharc.json ./test/**/*.spec.js",
+    "test:playwright": "yarn clean:test && yarn test:build-tsc && yarn test:build-rollup && yarn test:mocha"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",
@@ -83,7 +88,8 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "lodash-es": "4.17.15",
-    "mocha": "^7.1.2",
+    "mocha": "^8.2.1",
+    "playwright": "^1.7.0",
     "prettier": "2.0.2",
     "rollup": "^2.7.6",
     "rollup-plugin-commonjs": "^10.1.0",

packages/web-components/fast-components/src/mocha-typings.d.ts

@@ -0,0 +1,8 @@
+import { Browser, Page } from "playwright";
+
+declare module "mocha" {
+    export interface Context {
+        browser: Browser;
+        page: Page;
+    }
+}

packages/web-components/fast-components/src/select/select.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from "chai";
+import { FASTSelect } from ".";
+import { FASTOption } from "../listbox-option";
+
+describe("FASTSelect", function () {
+    let setupHandle;
+
+    beforeEach(async function () {
+        if (!this.page && !this.browser) {
+            this.skip();
+        }
+
+        const documentHandle = await this.page.evaluateHandle(() => document);
+
+        // evaluate and evaluateHandle functions are run in the browser's
+        // context and can't use anything from any outer scope.
+        setupHandle = await this.page.evaluateHandle(document => {
+            const element = (document.createElement(
+                "fast-select"
+            ) as unknown) as FASTSelect;
+
+            for (let i = 1; i <= 3; i++) {
+                const option = document.createElement("fast-option") as FASTOption;
+                option.value = `${i}`;
+                option.textContent = `option ${i}`;
+                element.appendChild(option);
+            }
+
+            document.getElementById("root-provider")!.appendChild(element);
+        }, documentHandle);
+    });
+
+    afterEach(async function () {
+        if (setupHandle) {
+            await setupHandle.dispose();
+        }
+    });
+
+    it("should render on the page", async function () {
+        const element = await this.page.$("fast-select");
+
+        expect(element).to.exist;
+    });
+
+    it("should have a value of 'one'", async function () {
+        const element = await this.page.$("fast-select");
+        expect(
+            await element?.evaluate(node => ((node as unknown) as FASTSelect).value)
+        ).to.equal("1");
+    });
+
+    it("should have a text content of 'option 1'", async function () {
+        const element = await this.page.$("fast-select .selected-value");
+        expect(await element?.evaluate((node: HTMLElement) => node.innerText)).to.equal(
+            "option 1"
+        );
+    });
+});

packages/web-components/fast-components/test/.mocharc.json

@@ -0,0 +1,9 @@
+{
+  "colors": true,
+  "recursive": true,
+  "timeout": 5000,
+  "require": [
+    "esm",
+    "./test/harness.js"
+  ]
+}

packages/web-components/fast-components/test/fixtures/iife.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>FAST Components Test Harness</title>
+        <script src="/dist/fast-components.iife.js"></script>
+    </head>
+    <body>
+        <fast-design-system-provider
+            id="rootProvider"
+            use-defaults
+        ></fast-design-system-provider>
+    </body>
+</html>

packages/web-components/fast-components/test/fixtures/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>FAST Components Test Harness</title>
+        <script src="/dist/fast-components.js" type="module"></script>
+    </head>
+    <body>
+        <fast-design-system-provider
+            id="root-provider"
+            use-defaults
+        ></fast-design-system-provider>
+    </body>
+</html>

packages/web-components/fast-components/test/harness.js

@@ -0,0 +1,53 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+import path from "path";
+import express from "express";
+import { expect } from "chai";
+const { chromium, firefox, webkit } = require("playwright");
+
+const PLAYWRIGHT_BROWSER = process.env.PLAYWRIGHT_BROWSER || "chromium";
+const PORT = process.env.PORT || 7001;
+
+const app = express();
+const browser = { chromium, firefox, webkit }[PLAYWRIGHT_BROWSER];
+let server;
+
+app.use("/dist", express.static(path.resolve(__dirname, "dist")));
+app.use("/*", express.static(path.resolve(__dirname, "fixtures")));
+
+export function mochaGlobalSetup() {
+    server = app.listen(PORT, () => {
+        console.log(`Test harness server listening on port ${PORT}`);
+    });
+}
+
+export function mochaGlobalTeardown() {
+    server.close(() => {
+        console.log(`Test harness server on port ${PORT} closed`);
+    });
+}
+
+export const mochaHooks = {
+    async beforeAll() {
+        this.browser = await browser.launch();
+        console.log(`Launched ${PLAYWRIGHT_BROWSER} browser`);
+    },
+
+    async beforeEach() {
+        this.page = await this.browser.newPage();
+        // TODO: Add a way for tests to specify the fixture base
+        await this.page.goto("http://localhost:7001/index.html");
+
+        expect(await this.page.title()).to.equal("FAST Components Test Harness");
+    },
+
+    async afterEach() {
+        await this.page.close();
+    },
+
+    async afterAll() {
+        if (this.browser) {
+            await this.browser.close();
+        }
+    },
+};

packages/web-components/fast-components/test/rollup.config.js

@@ -0,0 +1,37 @@
+import path from "path";
+import commonJS from "rollup-plugin-commonjs";
+import resolve from "rollup-plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+
+const srcDir = path.resolve(__dirname, "..", "src");
+const distDir = path.resolve(__dirname, "dist");
+
+export default [
+    {
+        context: "this",
+        input: path.resolve(srcDir, "index-rollup.ts"),
+        output: [
+            {
+                file: path.resolve(distDir, "fast-components.js"),
+                format: "esm",
+                sourcemap: true,
+            },
+            {
+                file: path.resolve(distDir, "fast-components.iife.js"),
+                format: "iife",
+                sourcemap: true,
+            },
+        ],
+        plugins: [
+            resolve(),
+            commonJS(),
+            typescript({
+                tsconfigOverride: {
+                    compilerOptions: {
+                        declaration: false,
+                    },
+                },
+            }),
+        ],
+    },
+];

packages/web-components/fast-components/test/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "declarationDir": "dist/dts",
+        "target": "ES2017",
+        "outDir": "dist",
+        "types": [
+            "mocha",
+            "node"
+        ],
+    },
+    "include": ["../src/**/*.spec.ts"],
+    "exclude": ["../src/color"]
+}

packages/web-components/fast-components/tsconfig.json

@@ -10,6 +10,7 @@
         "allowJs": true,
         "importHelpers": true,
         "types": [
+            "node",
             "mocha",
             "webpack-env"
         ],