web: provide a test framework

.github/workflows/ci-web.yml

@@ -128,3 +128,21 @@ jobs:
       - name: build
         working-directory: web/
         run: npm run build
+  test:
+    needs:
+      - ci-web-mark
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: web/package.json
+          cache: "npm"
+          cache-dependency-path: web/package-lock.json
+      - working-directory: web/
+        run: npm ci
+      - name: Generate API
+        run: make gen-client-ts
+      - name: test
+        working-directory: web/
+        run: npm run test

web/package.json

@@ -18,6 +18,7 @@
         "lint:precommit": "bun scripts/eslint-precommit.mjs",
         "lint:spelling": "node scripts/check-spelling.mjs",
         "lit-analyse": "lit-analyzer src",
+        "postinstall": "bash scripts/patch-spotlight.sh",
         "precommit": "npm-run-all --parallel tsc lit-analyse lint:spelling --sequential lint:precommit prettier",
         "prequick": "run-s tsc:execute lit-analyse lint:precommit lint:spelling",
         "prettier-check": "prettier --check .",
@@ -27,7 +28,10 @@
         "tsc": "run-s build-locales tsc:execute",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "cross-env NODE_OPTIONS='--max_old_space_size=8192' storybook build",
-        "storybook:build-import-map": "node scripts/build-storybook-import-maps.mjs"
+        "storybook:build-import-map": "node scripts/build-storybook-import-maps.mjs",
+        "test": "npx wdio run ./wdio.conf.ts --logLevel=warn --autoCompileOpts.tsNodeOpts.project=tsconfig.test.json",
+        "test-view": "npx wdio run ./wdio.conf.ts --autoCompileOpts.tsNodeOpts.project=tsconfig.test.json",
+        "test-watch": "npx wdio run ./wdio.conf.ts --autoCompileOpts.tsNodeOpts.project=tsconfig.test.json --watch"
     },
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
@@ -96,6 +100,10 @@
         "@types/showdown": "^2.0.6",
         "@typescript-eslint/eslint-plugin": "^7.14.0",
         "@typescript-eslint/parser": "^7.14.0",
+        "@wdio/browser-runner": "^8.36.1",
+        "@wdio/cli": "^8.36.1",
+        "@wdio/mocha-framework": "^8.36.1",
+        "@wdio/spec-reporter": "^8.36.1",
         "babel-plugin-macros": "^3.1.0",
         "babel-plugin-tsconfig-paths": "^1.0.3",
         "chokidar": "^3.6.0",
@@ -120,10 +128,12 @@
         "storybook": "^8.1.10",
         "storybook-addon-mock": "^5.0.0",
         "ts-lit-plugin": "^2.0.2",
+        "ts-node": "^10.9.2",
         "tslib": "^2.6.3",
         "turnstile-types": "^1.2.1",
         "typescript": "^5.5.2",
-        "vite-tsconfig-paths": "^4.3.2"
+        "vite-tsconfig-paths": "^4.3.2",
+        "wdio-wait-for": "^3.0.11"
     },
     "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.21.4",

web/scripts/patch-spotlight.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+
+TARGET=$(find "./node_modules/@spotlightjs/overlay/dist/" -name "index-[0-9a-f]*.js");
+
+if ! grep -GL 'QX2 = ' "$TARGET" > /dev/null ; then
+patch --forward --no-backup-if-mismatch -p0 "$TARGET" <<EOF
+--- a/index-5682ce90.js	2024-06-13 16:19:28
++++ b/index-5682ce90.js	2024-06-13 16:20:23
+@@ -4958,11 +4958,10 @@
+     }
+   );
+ }
+-const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m));
++const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m)), QX2 = () => {};
+ function Gp({
+   data: n,
+-  onUpdateData: a = () => {
+-  },
++  onUpdateData: a = QX2,
+   editingEnabled: s = !1,
+   clipboardEnabled: o = !1,
+   displayDataTypes: c = !1,
+EOF
+else
+    echo "spotlight overlay.js patch already applied"
+fi

web/src/elements/EmptyState.test.ts

@@ -0,0 +1,63 @@
+import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
+import { $, expect } from "@wdio/globals";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html, render as litRender } from "lit";
+
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import "./EmptyState.js";
+
+const render = (body: TemplateResult) => {
+    document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        ensureCSSStyleSheet(PFBase),
+        ensureCSSStyleSheet(AKGlobal),
+    ];
+    return litRender(body, document.body);
+};
+
+describe("ak-empty-state", () => {
+    it("should render the default loader", async () => {
+        render(html`<ak-empty-state ?loading=${true} header=${msg("Loading")}> </ak-empty-state>`);
+
+        const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
+        await expect(empty).toExist();
+
+        const header = await $("ak-empty-state").$(">>>.pf-c-title");
+        await expect(header).toHaveText("Loading");
+    });
+
+    it("should handle standard boolean", async () => {
+        render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`);
+
+        const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
+        await expect(empty).toExist();
+
+        const header = await $("ak-empty-state").$(">>>.pf-c-title");
+        await expect(header).toHaveText("Loading");
+    });
+
+    it("should render a static empty state", async () => {
+        render(html`<ak-empty-state header=${msg("No messages found")}> </ak-empty-state>`);
+
+        const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
+        await expect(empty).toExist();
+        await expect(empty).toHaveClass("fa-question-circle");
+
+        const header = await $("ak-empty-state").$(">>>.pf-c-title");
+        await expect(header).toHaveText("No messages found");
+    });
+
+    it("should render a slotted message", async () => {
+        render(
+            html`<ak-empty-state header=${msg("No messages found")}>
+                <p slot="body">Try again with a different filter</p>
+            </ak-empty-state>`,
+        );
+
+        const message = await $("ak-empty-state").$(">>>.pf-c-empty-state__body").$(">>>p");
+        await expect(message).toHaveText("Try again with a different filter");
+    });
+});

web/tsconfig.json

@@ -2,16 +2,16 @@
     "extends": "./tsconfig.base.json",
     "compilerOptions": {
         "paths": {
-            "@goauthentik/admin/*": ["src/admin/*"],
-            "@goauthentik/common/*": ["src/common/*"],
-            "@goauthentik/components/*": ["src/components/*"],
+            "@goauthentik/admin/*": ["./src/admin/*"],
+            "@goauthentik/common/*": ["./src/common/*"],
+            "@goauthentik/components/*": ["./src/components/*"],
             "@goauthentik/docs/*": ["../website/docs/*"],
-            "@goauthentik/elements/*": ["src/elements/*"],
-            "@goauthentik/flow/*": ["src/flow/*"],
-            "@goauthentik/locales/*": ["src/locales/*"],
-            "@goauthentik/polyfill/*": ["src/polyfill/*"],
-            "@goauthentik/standalone/*": ["src/standalone/*"],
-            "@goauthentik/user/*": ["src/user/*"]
-        },
+            "@goauthentik/elements/*": ["./src/elements/*"],
+            "@goauthentik/flow/*": ["./src/flow/*"],
+            "@goauthentik/locales/*": ["./src/locales/*"],
+            "@goauthentik/polyfill/*": ["./src/polyfill/*"],
+            "@goauthentik/standalone/*": ["./src/standalone/*"],
+            "@goauthentik/user/*": ["./src/user/*"]
+        }
     }
 }

web/tsconfig.test.json

@@ -0,0 +1,34 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "types": ["node", "webdriverio/async", "@wdio/cucumber-framework", "expect-webdriverio"],
+        "target": "esnext",
+        "forceConsistentCasingInFileNames": true,
+        "experimentalDecorators": true,
+        "lib": [
+            "ES5",
+            "ES2015",
+            "ES2016",
+            "ES2017",
+            "ES2018",
+            "ES2019",
+            "ES2020",
+            "ESNext",
+            "DOM",
+            "DOM.Iterable",
+            "WebWorker"
+        ],
+        "paths": {
+            "@goauthentik/admin/*": ["./src/admin/*"],
+            "@goauthentik/common/*": ["./src/common/*"],
+            "@goauthentik/components/*": ["./src/components/*"],
+            "@goauthentik/docs/*": ["../website/docs/*"],
+            "@goauthentik/elements/*": ["./src/elements/*"],
+            "@goauthentik/flow/*": ["./src/flow/*"],
+            "@goauthentik/locales/*": ["./src/locales/*"],
+            "@goauthentik/polyfill/*": ["./src/polyfill/*"],
+            "@goauthentik/standalone/*": ["./src/standalone/*"],
+            "@goauthentik/user/*": ["./src/user/*"]
+        }
+    }
+}