Chore: homepage tests (#6278)

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,86 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { useContext } from "react";
+import { describe, expect, it } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+
+import Container from "./container";
+import { BlockHighlightContext } from "./highlight-context";
+
+function Dummy({ label }) {
+  return <div data-testid={label} />;
+}
+
+function HighlightProbe() {
+  const value = useContext(BlockHighlightContext);
+  return <div data-testid="highlight-probe" data-highlight={value ? "yes" : "no"} />;
+}
+
+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();
+  });
+
+  it("returns null when errors are hidden via settings.hideErrors", () => {
+    const { container } = renderWithProviders(
+      <Container error="nope" service={{ widget: { type: "omada", hide_errors: false } }}>
+        <Dummy label="omada.alerts" />
+      </Container>,
+      { settings: { hideErrors: true } },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("skips the highlight provider when highlight levels are fully disabled", () => {
+    renderWithProviders(
+      <Container service={{ widget: { type: "omada" } }}>
+        <HighlightProbe />
+      </Container>,
+      {
+        settings: {
+          blockHighlights: { levels: { good: null, warn: null, danger: null } },
+        },
+      },
+    );
+
+    expect(screen.getByTestId("highlight-probe").getAttribute("data-highlight")).toBe("no");
+  });
+});

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

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import Error from "./error";
+
+describe("components/services/widget/error", () => {
+  it("normalizes string errors to an object with a message", () => {
+    render(<Error error="boom" />);
+
+    expect(screen.getByText((_, el) => el?.textContent === "widget.api_error:")).toBeInTheDocument();
+    expect(screen.getByText(/boom/)).toBeInTheDocument();
+  });
+
+  it("normalizes numeric errors to an object with a message", () => {
+    render(<Error error={500} />);
+
+    expect(screen.getByText(/Error 500/)).toBeInTheDocument();
+  });
+
+  it("unwraps nested response errors and renders raw/data sections", () => {
+    render(
+      <Error
+        error={{
+          message: "outer",
+          data: {
+            error: {
+              message: "inner",
+              url: "https://example.com",
+              rawError: ["oops", { code: 1 }],
+              data: { type: "Buffer", data: [97, 98] },
+            },
+          },
+        }}
+      />,
+    );
+
+    expect(screen.getByText(/inner/)).toBeInTheDocument();
+    expect(screen.getByText("https://example.com")).toBeInTheDocument();
+    expect(screen.getByText(/\"code\": 1/)).toBeInTheDocument();
+    // Buffer.from({type:"Buffer",data:[97,98]}).toString() === "ab"
+    expect(screen.getByText(/ab/)).toBeInTheDocument();
+  });
+});

src/components/services/widget/highlight-context.test.jsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useContext } from "react";
+
+import { BlockHighlightContext } from "./highlight-context";
+
+function Reader() {
+  const value = useContext(BlockHighlightContext);
+  return <div data-testid="value">{value === null ? "null" : value}</div>;
+}
+
+describe("components/services/widget/highlight-context", () => {
+  it("defaults to null", () => {
+    render(<Reader />);
+    expect(screen.getByTestId("value")).toHaveTextContent("null");
+  });
+
+  it("provides a value to consumers", () => {
+    render(
+      <BlockHighlightContext.Provider value="on">
+        <Reader />
+      </BlockHighlightContext.Provider>,
+    );
+    expect(screen.getByTestId("value")).toHaveTextContent("on");
+  });
+});