Replace Karma with Playwright in fast-web-utilities

change/@microsoft-fast-foundation-a9be4fed-9aa5-45ad-b8a9-cd48d8e8c0e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "upgrade to Storybook 8",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}

packages/utilities/fast-web-utilities/.eslintrc.json

@@ -1,9 +1,14 @@
 {
     "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
     "rules": {
-        "import/extensions": [
-            "error",
-            "always"
-        ]
-    }
+        "import/extensions": ["error", "always"]
+    },
+    "overrides": [
+        {
+            "files": ["*.mjs"],
+            "env": {
+                "node": true
+            }
+        }
+    ]
 }

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

@@ -23,54 +23,19 @@
   "scripts": {
     "build": "tsc -p ./tsconfig.build.json",
     "clean:dist": "node ../../../build/clean.js dist",
+    "eslint": "eslint . --ext .ts",
+    "eslint:fix": "yarn eslint --fix",
     "prepare": "yarn clean:dist && yarn build",
     "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
-    "test": "yarn eslint && yarn build && yarn test-chrome:verbose",
-    "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.ts --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.ts --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.ts --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.ts --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.ts --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
-    "test-chrome:verbose:debugger": "karma start karma.conf.ts --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.ts --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.ts --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha",
-    "test-firefox:watch": "karma start karma.conf.ts --browsers=FirefoxHeadless   --coverage --watch-extensions js",
-    "eslint": "eslint . --ext .ts,.tsx",
-    "eslint:fix": "eslint . --ext .ts,.tsx --fix",
+    "pretest": "yarn eslint && yarn build",
+    "test": "playwright test",
     "watch": "yarn build -- -w --preserveWatchOutput"
   },
   "devDependencies": {
-    "@types/chai": "^4.2.11",
-    "@types/karma": "^6.3.3",
-    "@types/mocha": "^7.0.2",
+    "@playwright/test": "^1.41.2",
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
-    "chai": "^4.2.0",
-    "chai-spies": "^1.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-loader": "^4.0.0",
-    "istanbul": "^0.4.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "jsdom": "^16.2.2",
-    "jsdom-global": "3.0.2",
-    "karma": "^6.4.1",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.2",
-    "karma-coverage-istanbul-reporter": "^3.0.0",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-source-map-support": "^1.4.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^5.0.0",
-    "mocha": "^7.1.2",
-    "prettier": "2.8.8",
-    "ts-loader": "^4.0.1",
+    "express": "^4.19.2",
     "typescript": "^4.7.0"
-  },
-  "dependencies": {
-    "exenv-es6": "^1.1.1"
   }
 }

packages/utilities/fast-web-utilities/playwright.config.ts

@@ -0,0 +1,19 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const PORT = process.env.PORT ?? 9002;
+
+const config: PlaywrightTestConfig = {
+    reporter: "list",
+    testMatch: /.*\.spec\.ts$/,
+    retries: 3,
+    use: {
+        baseURL: `http://localhost:${PORT}`,
+    },
+    webServer: {
+        command: `node ./test/server.mjs --port=${PORT}`,
+        reuseExistingServer: !process.env.CI,
+        url: `http://localhost:${PORT}`,
+    },
+};
+
+export default config;

packages/utilities/fast-web-utilities/src/aria.spec.ts

@@ -1,9 +1,28 @@
-import { expect } from "chai";
-import { Orientation } from "./aria.js";
+import { expect, test } from "@playwright/test";
+import type { Orientation as OrientationType } from "./aria.js";
 
-describe("aria-orientation", () => {
-    it("should correctly return orientation values", () => {
-        expect(Orientation.horizontal).to.equal("horizontal");
-        expect(Orientation.vertical).to.equal("vertical");
+declare const Orientation: OrientationType;
+
+test.describe("aria-orientation", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/");
+
+        await page.addScriptTag({
+            type: "module",
+            content: `
+                import { Orientation } from "/dist/aria.js";
+                globalThis.Orientation = Orientation;
+            `,
+        });
+
+        await page.waitForFunction(() => "Orientation" in globalThis);
+    });
+
+    test("should correctly return orientation values", async ({ page }) => {
+        const orientation = await page.evaluate(() => Orientation);
+
+        expect(orientation).toHaveProperty("horizontal", "horizontal");
+
+        expect(orientation).toHaveProperty("vertical", "vertical");
     });
 });

packages/utilities/fast-web-utilities/src/array.spec.ts

@@ -1,30 +1,58 @@
-import { expect } from "chai";
+import { expect, test } from "@playwright/test";
 import { findLastIndex } from "./array.js";
 
-describe("findLastIndex", (): void => {
-    it("should return -1 when array is empty", (): void => {
-        expect(findLastIndex([], () => true)).to.equal(-1);
+test.describe("findLastIndex", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/");
+
+        await page.addScriptTag({
+            type: "module",
+            content: `
+                import { findLastIndex } from "/dist/array.js";
+                globalThis.findLastIndex = findLastIndex;
+            `,
+        });
+
+        await page.waitForFunction(() => "findLastIndex" in globalThis);
+    });
+
+    test("should return -1 when array is empty", async ({ page }) => {
+        expect(
+            await page.evaluate(() => {
+                return findLastIndex([], () => true);
+            })
+        ).toBe(-1);
     });
 
-    it("should return the last valid item that matches the predicate", (): void => {
+    test("should return the last valid item that matches the predicate", async ({
+        page,
+    }) => {
         const array = [
             { value: true },
             { value: false },
             { value: true },
             { value: false },
         ];
 
-        expect(findLastIndex(array, v => v.value)).to.equal(2);
+        const result = await page.evaluate(array => {
+            return findLastIndex(array, v => v.value);
+        }, array);
+
+        expect(result).toBe(2);
     });
 
-    it("should return -1 when no items match the predicate", (): void => {
+    test("should return -1 when no items match the predicate", async ({ page }) => {
         const array = [
             { value: false },
             { value: false },
             { value: false },
             { value: false },
         ];
 
-        expect(findLastIndex(array, v => v.value)).to.equal(-1);
+        const result = await page.evaluate(array => {
+            return findLastIndex(array, v => v.value);
+        }, array);
+
+        expect(result).toBe(-1);
     });
 });

packages/utilities/fast-web-utilities/src/class-names.spec.ts

@@ -1,72 +1,105 @@
-import { expect } from "chai";
-import { classNames } from "./class-names.js";
-
-describe("classNames", (): void => {
-    it("should return a string when invalid values are provided", (): void => {
-        expect(classNames()).to.equal("");
-        expect(classNames(undefined as any)).to.equal("");
-        expect(classNames(null as any)).to.equal("");
-        expect(classNames(NaN as any)).to.equal("");
-        expect(classNames(Infinity as any)).to.equal("");
-        expect(classNames(new Date() as any)).to.equal("");
-        expect(classNames(1 as any)).to.equal("");
-        expect(classNames([undefined as any, true])).to.equal("");
-        expect(classNames([null as any, true])).to.equal("");
-        expect(classNames([NaN as any, true])).to.equal("");
-        expect(classNames([Infinity as any, true])).to.equal("");
-        expect(classNames([new Date() as any, true])).to.equal("");
-        expect(classNames([1 as any, true])).to.equal("");
+import { expect, test } from "@playwright/test";
+import type { classNames as classNamesType } from "./class-names.js";
+
+declare const classNames: typeof classNamesType;
+test.describe("classNames", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/");
+
+        await page.addScriptTag({
+            type: "module",
+            content: `
+                import { classNames } from "/dist/class-names.js";
+                globalThis.classNames = classNames;
+            `,
+        });
+
+        await page.waitForFunction(() => "classNames" in globalThis);
+    });
+
+    test("should return a string when invalid values are provided", async ({ page }) => {
+        const values = [undefined, null, NaN, Infinity, new Date(), 1];
+
+        expect(await page.evaluate(() => classNames())).toBe("");
+
+        for (const value of values) {
+            expect(await page.evaluate(v => classNames.call(null, v), value)).toBe("");
+
+            expect(
+                await page.evaluate(v => classNames.call(null, [v, true]), value)
+            ).toBe("");
+        }
     });
 
-    it("should return a single string argument unmodified", (): void => {
-        expect(classNames("hello")).to.equal("hello");
+    test("should return a single string argument unmodified", async ({ page }) => {
+        expect(await page.evaluate(() => classNames("hello"))).toBe("hello");
     });
 
-    it("should join multiple string arguments together", (): void => {
-        expect(classNames("hello", "world")).to.equal("hello world");
+    test("should join multiple string arguments together", async ({ page }) => {
+        expect(await page.evaluate(() => classNames("hello", "world"))).toBe(
+            "hello world"
+        );
     });
 
-    it("should return the return value of a single function", (): void => {
-        expect(classNames(() => "hello")).to.equal("hello");
+    test("should return the return value of a single function", async ({ page }) => {
+        expect(await page.evaluate(() => classNames(() => "hello"))).toBe("hello");
     });
 
-    it("should join the return value of a multiple functions", (): void => {
+    test("should join the return value of a multiple functions", async ({ page }) => {
         expect(
-            classNames(
-                () => "hello",
-                () => "world"
+            await page.evaluate(() =>
+                classNames(
+                    () => "hello",
+                    () => "world"
+                )
             )
-        ).to.equal("hello world");
+        ).toBe("hello world");
     });
 
-    it("should return a the first index of an array arg when the second index is truthy", (): void => {
-        expect(classNames(["foo", true])).to.equal("foo");
+    test("should return a the first index of an array arg when the second index is truthy", async ({
+        page,
+    }) => {
+        expect(await page.evaluate(() => classNames(["foo", true]))).toBe("foo");
     });
 
-    it("should return a single function return value of an array arg when the second index is truthy", (): void => {
-        expect(classNames([(): string => "foo", true])).to.equal("foo");
+    test("should return a single function return value of an array arg when the second index is truthy", async ({
+        page,
+    }) => {
+        expect(await page.evaluate(() => classNames([(): string => "foo", true]))).toBe(
+            "foo"
+        );
     });
 
-    it("should join multiple array index when all second indexes are true", (): void => {
-        expect(classNames(["foo", true], ["bar", true])).to.equal("foo bar");
+    test("should join multiple array index when all second indexes are true", async ({
+        page,
+    }) => {
+        expect(await page.evaluate(() => classNames(["foo", true], ["bar", true]))).toBe(
+            "foo bar"
+        );
     });
 
-    it("should omit first indexes of an array argument when the second index is falsey", (): void => {
-        expect(classNames(["foo", true], ["bar", false], ["bat", true])).to.equal(
-            "foo bat"
-        );
+    test("should omit first indexes of an array argument when the second index is falsey", async ({
+        page,
+    }) => {
+        expect(
+            await page.evaluate(() =>
+                classNames(["foo", true], ["bar", false], ["bat", true])
+            )
+        ).toBe("foo bat");
     });
 
-    it("should join string, function, and object arguments", (): void => {
+    test("should join string, function, and object arguments", async ({ page }) => {
         expect(
-            classNames(
-                "hello",
-                ["foo", true],
-                ["bar", false],
-                [(): string => "bat", true],
-                "world",
-                () => "earth"
+            await page.evaluate(() =>
+                classNames(
+                    "hello",
+                    ["foo", true],
+                    ["bar", false],
+                    [(): string => "bat", true],
+                    "world",
+                    () => "earth"
+                )
             )
-        ).to.equal("hello foo bat world earth");
+        ).toBe("hello foo bat world earth");
     });
 });