Tweak modules to be disabled if config is missing (#33806)

* Consolidate modules vitest coverage

* Use vite-common as base for modules vitest config

* Make knip happier

* Fix coverage paths

* Place modules unit tests alongside src

* Switch to defineProject for better type safety

* Consolidate vitest CI & coverage

Kills off vite-common

* Update comment

* Update lockfile

* Fix shared-components vitest config

* Soften eslint config for tests in modules

* Run eslint on modules/playwright dir too

* Make tsc happy

* Tweak modules to be disabled if config is missing

* Restore blank line

* Improve coverage

* Potential fix for pull request finding 'Unused variable, import, function or class'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

modules/widget-toggles/e2e/widget-toggles.spec.ts

@@ -90,12 +90,28 @@ test.describe("widget-toggles", () => {
         },
     });
 
-    test("should error if config is missing", async ({ page }) => {
-        await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
-        await expect(page.getByText("Errors in module configuration")).toBeVisible();
+    test("should not error if config is missing", async ({ page }) => {
+        await expect(page.getByText("Your Element is misconfigured")).not.toBeVisible();
+        await expect(page.getByText("Errors in module configuration")).not.toBeVisible();
         // We don't take a screenshot as we don't want to assert Element's styling, only our own
     });
 
+    test.describe("with invalid config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.widget-toggles": {
+                    foo: "bar",
+                },
+            },
+        });
+
+        test("should render error", async ({ page }) => {
+            await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
+            await expect(page.getByText("Errors in module configuration")).toBeVisible();
+            // We don't take a screenshot as we don't want to assert Element's styling, only our own
+        });
+    });
+
     test.describe("with correct config", () => {
         test.use({
             config: {

modules/widget-toggles/src/config.ts

@@ -22,6 +22,6 @@ export const CONFIG_KEY = "io.element.element-web-modules.widget-toggles";
 
 declare module "@element-hq/element-web-module-api" {
     export interface Config {
-        [CONFIG_KEY]: input<WidgetTogglesConfig>;
+        [CONFIG_KEY]?: input<WidgetTogglesConfig>;
     }
 }

modules/widget-toggles/src/index.tsx

@@ -11,6 +11,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import { CONFIG_KEY, WidgetTogglesConfig } from "./config";
 import { WidgetToggle } from "./toggle";
+import { name as ModuleName } from "../package.json";
 
 class WidgetToggleModule implements Module {
     public static readonly moduleApiVersion = "^1.12.0";
@@ -19,8 +20,14 @@ class WidgetToggleModule implements Module {
     public constructor(private api: Api) {}
 
     public async load(): Promise<void> {
+        const rawConfig = this.api.config.get(CONFIG_KEY);
+        if (!rawConfig) {
+            console.debug(`No configuration found for module "${ModuleName}", skipping initialization.`);
+            return;
+        }
+
         try {
-            this.config = WidgetTogglesConfig.parse(this.api.config.get(CONFIG_KEY));
+            this.config = WidgetTogglesConfig.parse(rawConfig);
         } catch (e) {
             console.error("Failed to init module", e);
             throw new Error(`Errors in module configuration for widget toggles module`);