Ok, make a reusable testing component

src/components/services/widget/block.test.jsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+
+import Block from "./block";
+import { BlockHighlightContext } from "./highlight-context";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+
+describe("components/services/widget/block", () => {
+  it("renders a placeholder when value is undefined", () => {
+    const { container } = renderWithProviders(<Block label="some.label" />, { settings: {} });
+
+    // Value slot is rendered as "-" while loading.
+    expect(container.textContent).toContain("-");
+    expect(container.textContent).toContain("some.label");
+  });
+
+  it("sets highlight metadata when a rule matches", () => {
+    const highlightConfig = {
+      levels: { danger: "danger-class" },
+      fields: {
+        foo: {
+          numeric: { when: "gt", value: 10, level: "danger" },
+        },
+      },
+    };
+
+    const { container } = renderWithProviders(
+      <BlockHighlightContext.Provider value={highlightConfig}>
+        <Block label="foo.label" field="foo" value="11" />
+      </BlockHighlightContext.Provider>,
+      { settings: {} },
+    );
+
+    const el = container.querySelector(".service-block");
+    expect(el).not.toBeNull();
+    expect(el.getAttribute("data-highlight-level")).toBe("danger");
+    expect(el.className).toContain("danger-class");
+  });
+});

src/components/services/widget/container.test.jsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+
+import Container from "./container";
+
+function Dummy({ label }) {
+  return <div data-testid={label} />;
+}
+
+describe("components/services/widget/container", () => {
+  it("filters children based on widget.fields (auto-namespaced by widget type)", () => {
+    renderWithProviders(
+      <Container service={{ widget: { type: "omada", fields: ["connectedAp", "alerts"] } }}>
+        <Dummy label="omada.connectedAp" />
+        <Dummy label="omada.alerts" />
+        <Dummy label="omada.activeUser" />
+      </Container>,
+      { settings: {} },
+    );
+
+    expect(screen.getByTestId("omada.connectedAp")).toBeInTheDocument();
+    expect(screen.getByTestId("omada.alerts")).toBeInTheDocument();
+    expect(screen.queryByTestId("omada.activeUser")).toBeNull();
+  });
+
+  it("accepts widget.fields as a JSON string", () => {
+    renderWithProviders(
+      <Container service={{ widget: { type: "omada", fields: JSON.stringify(["alerts"]) } }}>
+        <Dummy label="omada.connectedAp" />
+        <Dummy label="omada.alerts" />
+      </Container>,
+      { settings: {} },
+    );
+
+    expect(screen.getByTestId("omada.alerts")).toBeInTheDocument();
+    expect(screen.queryByTestId("omada.connectedAp")).toBeNull();
+  });
+
+  it("supports aliased widget types when filtering (hoarder -> karakeep)", () => {
+    renderWithProviders(
+      <Container service={{ widget: { type: "hoarder", fields: ["hoarder.count"] } }}>
+        <Dummy label="karakeep.count" />
+      </Container>,
+      { settings: {} },
+    );
+
+    expect(screen.getByTestId("karakeep.count")).toBeInTheDocument();
+  });
+});

src/test-utils/render-with-providers.jsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+
+import { SettingsContext } from "utils/contexts/settings";
+
+export function renderWithProviders(ui, { settings = {} } = {}) {
+  const value = {
+    settings,
+    // Most tests don't need to mutate settings; this keeps Container happy.
+    setSettings: () => {},
+  };
+
+  return render(<SettingsContext.Provider value={value}>{ui}</SettingsContext.Provider>);
+}

src/widgets/omada/component.test.jsx

@@ -1,40 +1,27 @@
 // @vitest-environment jsdom
 
-import { render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
-import { SettingsContext } from "utils/contexts/settings";
+import { renderWithProviders } from "test-utils/render-with-providers";
 
 const { useWidgetAPI } = vi.hoisted(() => ({
   useWidgetAPI: vi.fn(),
 }));
 
-vi.mock("next-i18next", () => ({
-  useTranslation: () => ({
-    t: (key, opts) => {
-      if (key === "common.number") return String(opts?.value ?? "");
-      return key;
-    },
-  }),
-}));
-
 vi.mock("../../utils/proxy/use-widget-api", () => ({
   default: useWidgetAPI,
 }));
 
 import Component from "./component";
 
-function renderWithSettings(ui) {
-  return render(
-    <SettingsContext.Provider value={{ settings: {}, setSettings: () => {} }}>{ui}</SettingsContext.Provider>,
-  );
-}
-
 describe("widgets/omada/component", () => {
   it("renders error UI when widget API errors", () => {
     useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
 
-    renderWithSettings(<Component service={{ widget: { type: "omada", url: "http://x" } }} />);
+    renderWithProviders(<Component service={{ widget: { type: "omada", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
 
     expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
   });
@@ -42,7 +29,9 @@ describe("widgets/omada/component", () => {
   it("renders placeholders while loading and defaults fields to 4 visible blocks", () => {
     useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
 
-    const { container } = renderWithSettings(<Component service={{ widget: { type: "omada", url: "http://x" } }} />);
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "omada", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
 
     // Default fields do not include connectedSwitches, so Container filters it out.
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
@@ -68,7 +57,9 @@ describe("widgets/omada/component", () => {
       error: undefined,
     });
 
-    const { container } = renderWithSettings(<Component service={{ widget: { type: "omada", url: "http://x" } }} />);
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "omada", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
 
     expect(container.querySelectorAll(".service-block")).toHaveLength(4);
     expect(screen.getByText("1")).toBeInTheDocument();

src/widgets/pihole/component.test.jsx

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+
+const { useWidgetAPI } = vi.hoisted(() => ({
+  useWidgetAPI: vi.fn(),
+}));
+
+vi.mock("utils/proxy/use-widget-api", () => ({
+  default: useWidgetAPI,
+}));
+
+import Component from "./component";
+
+describe("widgets/pihole/component", () => {
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "pihole", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders placeholders while loading and defaults fields (3 visible blocks)", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pihole", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    // Default fields are queries/blocked/gravity; blocked_percent is present in JSX but filtered out by Container.
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("pihole.queries")).toBeInTheDocument();
+    expect(screen.getByText("pihole.blocked")).toBeInTheDocument();
+    expect(screen.getByText("pihole.gravity")).toBeInTheDocument();
+    expect(screen.queryByText("pihole.blocked_percent")).toBeNull();
+
+    expect(screen.getAllByText("-")).toHaveLength(3);
+  });
+
+  it("renders values and appends percent to blocked when blocked_percent is not a field", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        ads_blocked_today: "5",
+        ads_percentage_today: "12.345",
+        dns_queries_today: "99",
+        domains_being_blocked: "123",
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "pihole", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+
+    // common.number/common.percent are formatted by the test i18n stub in vitest.setup.js
+    expect(screen.getByText("99")).toBeInTheDocument();
+    expect(screen.getByText("123")).toBeInTheDocument();
+    expect(screen.getByText("5 (12.3)")).toBeInTheDocument();
+  });
+
+  it("renders blocked_percent as its own block when configured", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        ads_blocked_today: "5",
+        ads_percentage_today: "12.345",
+        dns_queries_today: "99",
+        domains_being_blocked: "123",
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(
+      <Component
+        service={{
+          widget: { type: "pihole", url: "http://x", fields: ["queries", "blocked", "blocked_percent", "gravity"] },
+        }}
+      />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("5")).toBeInTheDocument(); // blocked (no percent appended)
+    expect(screen.getByText("12.3")).toBeInTheDocument(); // blocked_percent
+  });
+});

vitest.config.mjs

@@ -10,6 +10,7 @@ export default defineConfig({
   resolve: {
     alias: {
       components: fileURLToPath(new URL("./src/components", import.meta.url)),
+      "test-utils": fileURLToPath(new URL("./src/test-utils", import.meta.url)),
       utils: fileURLToPath(new URL("./src/utils", import.meta.url)),
       widgets: fileURLToPath(new URL("./src/widgets", import.meta.url)),
     },

vitest.setup.js

@@ -1 +1,19 @@
 import "@testing-library/jest-dom/vitest";
+
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+// implement a couple of common formatters mocked in next-i18next
+vi.mock("next-i18next", () => ({
+  useTranslation: () => ({
+    t: (key, opts) => {
+      if (key === "common.number") return String(opts?.value ?? "");
+      if (key === "common.percent") return String(opts?.value ?? "");
+      return key;
+    },
+  }),
+}));