web: Fix css loading in unit tests, remove unneeded dot paths (#11629)

* Adding the aliases to Vite helped, but now why are the E2E tests failing?

* web: fix CSS loading with unit tests

- Fix the CSS loader and replace the cut-and-paste loader with a standardized one.
- Fix the aliasing for Wdio's "browser"-based unit testing (Vite)
  - With the aliasing fixed, remove all of the dotted paths in tests.
- Update the End-to-End tests to run in Firefox and Safari.
- Put an (optional) pause at the end of each unit test so we can visually confirm the CSS works.
  - Environment flag is `WDIO_LEMME_SEE=true`
- Reduce the verbosity of the tests to level `warn` or higher

* This change was due to a misunderstanding. It is not needed in 9.

* Fix the Oauth2 Provider test.

web/src/elements/EmptyState.test.ts

@@ -1,22 +1,10 @@
 import { $, expect } from "@wdio/globals";
 
 import { msg } from "@lit/localize";
-import { TemplateResult, html, render as litRender } from "lit";
-
-import AKGlobal from "../common/styles/authentik.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import { html } from "lit";
 
 import "./EmptyState.js";
-import { ensureCSSStyleSheet } from "./utils/ensureCSSStyleSheet.js";
-
-const render = (body: TemplateResult) => {
-    document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        ensureCSSStyleSheet(PFBase),
-        ensureCSSStyleSheet(AKGlobal),
-    ];
-    return litRender(body, document.body);
-};
+import { render } from "./tests/utils.js";
 
 describe("ak-empty-state", () => {
     it("should render the default loader", async () => {

web/src/elements/ak-table/tests/ak-select-table.test.ts

@@ -1,7 +1,8 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $, browser } from "@wdio/globals";
 import { slug } from "github-slugger";
 
-import { html, render } from "lit";
+import { html } from "lit";
 
 import "../ak-select-table.js";
 import { nutritionDbUSDA as unsortedNutritionDbUSDA } from "../stories/sample_nutrition_db.js";

web/src/elements/ak-table/tests/ak-simple-table.test.ts

@@ -1,7 +1,8 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $ } from "@wdio/globals";
 import { slug } from "github-slugger";
 
-import { html, render } from "lit";
+import { html } from "lit";
 
 import "../ak-simple-table.js";
 import { nutritionDbUSDA } from "../stories/sample_nutrition_db.js";

web/src/elements/cards/tests/AggregateCard.test.ts

@@ -1,22 +1,10 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $, expect } from "@wdio/globals";
 
-import { TemplateResult, html, render as litRender } from "lit";
+import { html } from "lit";
 
-import AKGlobal from "../../../common/styles/authentik.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import { ensureCSSStyleSheet } from "../../utils/ensureCSSStyleSheet.js";
 import "../AggregateCard.js";
 
-const render = (body: TemplateResult) => {
-    document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        ensureCSSStyleSheet(PFBase),
-        ensureCSSStyleSheet(AKGlobal),
-    ];
-    return litRender(body, document.body);
-};
-
 describe("ak-aggregate-card", () => {
     it("should render the standard card without an icon, link, or subtext", async () => {
         render(

web/src/elements/cards/tests/AggregatePromiseCard.test.ts

@@ -1,22 +1,10 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $, expect } from "@wdio/globals";
 
-import { TemplateResult, html, render as litRender } from "lit";
+import { html } from "lit";
 
-import AKGlobal from "../../../common/styles/authentik.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import { ensureCSSStyleSheet } from "../../utils/ensureCSSStyleSheet.js";
 import "../AggregatePromiseCard.js";
 
-const render = (body: TemplateResult) => {
-    document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        ensureCSSStyleSheet(PFBase),
-        ensureCSSStyleSheet(AKGlobal),
-    ];
-    return litRender(body, document.body);
-};
-
 const DELAY = 1000; // milliseconds
 
 describe("ak-aggregate-card-promise", () => {

web/src/elements/cards/tests/QuickActionCard.test.ts

@@ -1,23 +1,11 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $, expect } from "@wdio/globals";
 
-import { TemplateResult, html, render as litRender } from "lit";
+import { html } from "lit";
 
-import AKGlobal from "../../../common/styles/authentik.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import { ensureCSSStyleSheet } from "../../utils/ensureCSSStyleSheet.js";
 import { QuickAction } from "../QuickActionsCard.js";
 import "../QuickActionsCard.js";
 
-const render = (body: TemplateResult) => {
-    document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        ensureCSSStyleSheet(PFBase),
-        ensureCSSStyleSheet(AKGlobal),
-    ];
-    return litRender(body, document.body);
-};
-
 const ACTIONS: QuickAction[] = [
     ["Create a new application", "/core/applications"],
     ["Check the logs", "/events/log"],

web/src/elements/forms/SearchSelect/tests/ak-search-select-view.test.ts

@@ -1,8 +1,9 @@
+import { render } from "@goauthentik/elements/tests/utils.js";
 import { $, browser, expect } from "@wdio/globals";
 import { slug } from "github-slugger";
 import { Key } from "webdriverio";
 
-import { html, render } from "lit";
+import { html } from "lit";
 
 import "../ak-search-select-view.js";
 import { sampleData } from "../stories/sampleData.js";

web/src/elements/forms/SearchSelect/tests/ak-search-select.test.ts

@@ -1,14 +1,15 @@
 /* eslint-env jest */
+import { AKElement } from "@goauthentik/elements/Base.js";
+import { bound } from "@goauthentik/elements/decorators/bound.js";
+import { render } from "@goauthentik/elements/tests/utils.js";
+import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
 import { $, browser, expect } from "@wdio/globals";
 import { slug } from "github-slugger";
 
-import { html, render } from "lit";
+import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { property, query } from "lit/decorators.js";
 
-import { AKElement } from "../../../../elements/Base.js";
-import { bound } from "../../../../elements/decorators/bound.js";
-import { CustomListenerElement } from "../../../../elements/utils/eventEmitter";
 import "../ak-search-select.js";
 import { SearchSelect } from "../ak-search-select.js";
 import { type ViewSample, sampleData } from "../stories/sampleData.js";

web/src/elements/tests/utils.ts

@@ -0,0 +1,19 @@
+import { TemplateResult, render as litRender } from "lit";
+
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { ensureCSSStyleSheet } from "../utils/ensureCSSStyleSheet.js";
+
+// A special version of render that ensures our style sheets will always be available
+// to all elements under test.  Ensures they look right during testing, and that any
+// CSS-based checks for visibility will return correct values.
+
+export const render = (body: TemplateResult) => {
+    document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        ensureCSSStyleSheet(PFBase),
+        ensureCSSStyleSheet(AKGlobal),
+    ];
+    return litRender(body, document.body);
+};