Provide unit test accessibility to Firefox and Safari; wrap calls to …

…manipulate test DOMs directly in a browser.exec call so they run in the proper context and be await()ed properly
goauthentik · Aug 22, 2024 · 484ebe9 · 484ebe9
1 parent 198dc69
commit 484ebe9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 47 deletions.
diff --git a/web/src/elements/ak-table/tests/ak-select-table.test.ts b/web/src/elements/ak-table/tests/ak-select-table.test.ts
@@ -61,12 +61,12 @@ describe("Select Table", () => {
     afterEach(async () => {
         await browser.execute(() => {
             document.body.querySelector("ak-select-table")?.remove();
-        });
-        // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-        if (document.body["_$litPart$"]) {
             // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-            delete document.body["_$litPart$"];
-        }
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                delete document.body["_$litPart$"];
+            }
+        });
     });
 });
 
@@ -132,11 +132,11 @@ describe("Multiselect Table", () => {
     afterEach(async () => {
         await browser.execute(() => {
             document.body.querySelector("ak-select-table")?.remove();
-        });
-        // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-        if (document.body["_$litPart$"]) {
             // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-            delete document.body["_$litPart$"];
-        }
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                delete document.body["_$litPart$"];
+            }
+        });
     });
 });
diff --git a/web/src/elements/ak-table/tests/ak-simple-table.test.ts b/web/src/elements/ak-table/tests/ak-simple-table.test.ts
@@ -34,11 +34,13 @@ describe("Simple Table", () => {
     });
 
     afterEach(async () => {
-        await document.body.querySelector("ak-simple-table")?.remove();
-        // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-        if (document.body["_$litPart$"]) {
+        await browser.execute(() => {
+            document.body.querySelector("ak-simple-table")?.remove();
             // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-            delete document.body["_$litPart$"];
-        }
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                delete document.body["_$litPart$"];
+            }
+        });
     });
 });
diff --git a/web/src/elements/forms/SearchSelect/tests/ak-search-select-view.test.ts b/web/src/elements/forms/SearchSelect/tests/ak-search-select-view.test.ts
@@ -93,12 +93,14 @@ describe("Search select: Test Input Field", () => {
     });
 
     afterEach(async () => {
-        await document.body.querySelector("#a-separate-component")?.remove();
-        await document.body.querySelector("ak-search-select-view")?.remove();
-        // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-        if (document.body["_$litPart$"]) {
+        await browser.execute(() => {
+            document.body.querySelector("#a-separate-component")?.remove();
+            document.body.querySelector("ak-search-select-view")?.remove();
             // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-            delete document.body["_$litPart$"];
-        }
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                delete document.body["_$litPart$"];
+            }
+        });
     });
 });
diff --git a/web/src/elements/forms/SearchSelect/tests/ak-search-select.test.ts b/web/src/elements/forms/SearchSelect/tests/ak-search-select.test.ts
@@ -102,11 +102,13 @@ describe("Search select: event driven startup", () => {
     });
 
     afterEach(async () => {
-        await document.body.querySelector("ak-mock-search-group")?.remove();
-        // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-        if (document.body["_$litPart$"]) {
+        await browser.execute(() => {
+            document.body.querySelector("ak-mock-search-group")?.remove();
             // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-            delete document.body["_$litPart$"];
-        }
+            if (document.body["_$litPart$"]) {
+                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
+                delete document.body["_$litPart$"];
+            }
+        });
     });
 });
diff --git a/web/wdio.conf.ts b/web/wdio.conf.ts
@@ -9,6 +9,39 @@ import tsconfigPaths from "vite-tsconfig-paths";
 const isProdBuild = process.env.NODE_ENV === "production";
 const apiBasePath = process.env.AK_API_BASE_PATH || "";
 const runHeadless = process.env.CI !== undefined;
+const testSafari = process.env.WDIO_TEST_SAFARI !== undefined;
+const testFirefox = process.env.WDIO_TEST_FIREFOX !== undefined;
+const skipChrome = process.env.WDIO_SKIP_CHROME !== undefined;
+
+const capabilities = [];
+
+const MAX_INSTANCES = 10;
+
+if (!skipChrome) {
+    capabilities.push({
+        // capabilities for local browser web tests
+        browserName: "chrome", // or "firefox", "microsoftedge", "safari"
+        ...(runHeadless
+            ? {
+                  "goog:chromeOptions": {
+                      args: ["headless", "disable-gpu"],
+                  },
+              }
+            : {}),
+    });
+}
+
+if (testSafari) {
+    capabilities.push({
+        browserName: "safari", // or "firefox", "microsoftedge", "safari"
+    });
+}
+
+if (testFirefox) {
+    capabilities.push({
+        browserName: "firefox", // or "firefox", "microsoftedge", "safari"
+    });
+}
 
 export const config: Options.Testrunner = {
     //
@@ -19,18 +52,16 @@ export const config: Options.Testrunner = {
     runner: [
         "browser",
         {
-            viteConfig: (config: UserConfig = { plugins: [] }) => ({
-                ...config,
+            viteConfig: (userConfig: UserConfig = { plugins: [] }) => ({
+                ...userConfig,
                 plugins: [
                     replace({
-                        "process.env.NODE_ENV": JSON.stringify(
-                            isProdBuild ? "production" : "development",
-                        ),
+                        "process.env.NODE_ENV": JSON.stringify(isProdBuild ? "production" : "development"),
                         "process.env.CWD": JSON.stringify(cwd()),
                         "process.env.AK_API_BASE_PATH": JSON.stringify(apiBasePath),
                         "preventAssignment": true,
                     }),
-                    ...(config?.plugins ?? []),
+                    ...(userConfig?.plugins ?? []),
                     // @ts-ignore
                     postcssLit(),
                     tsconfigPaths(),
@@ -83,26 +114,13 @@ export const config: Options.Testrunner = {
     // and 30 processes will get spawned. The property handles how many capabilities
     // from the same test should run tests.
     //
-    maxInstances: 10,
+    maxInstances: runHeadless ? MAX_INSTANCES : 1,
     //
     // If you have trouble getting all important capabilities together, check out the
     // Sauce Labs platform configurator - a great tool to configure your capabilities:
     // https://saucelabs.com/platform/platform-configurator
     //
-    capabilities: [
-        {
-            // capabilities for local browser web tests
-            browserName: "chrome", // or "firefox", "microsoftedge", "safari"
-            ...(runHeadless
-                ? {
-                      "goog:chromeOptions": {
-                          args: ["headless", "disable-gpu"],
-                      },
-                  }
-                : {}),
-        },
-    ],
-
+    capabilities,
     //
     // ===================
     // Test Configurations