web: provide a test framework

As is typical of a system where a new build engine is involved, this thing is sadly fragile. Use the
wrong import style in wdio.conf.js and it breaks; there are several notes in tsconfig.test.conf and
wdio.conf.ts to tell eslint or tsc not to complain, it's just a different build with different
criteria, the native criteria don't apply.

On the other hand, writing tests is easy and predictable. We can test behaviors at the unit and
component scale in a straightforward manner, and validate our expectations that things work the way
we believe they should.

web/src/elements/EmptyState.test.ts

@@ -0,0 +1,63 @@
+import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";
+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");
+    });
+});