Test: 10 more widget components (D)

src/widgets/evcc/component.test.jsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/evcc/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "evcc", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("evcc.pv_power")).toBeInTheDocument();
+    expect(screen.getByText("evcc.grid_power")).toBeInTheDocument();
+    expect(screen.getByText("evcc.home_power")).toBeInTheDocument();
+    expect(screen.getByText("evcc.charge_power")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(4);
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "evcc", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders computed kilowatt values (including result wrapper, grid fallback, and loadpoint sum)", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        result: {
+          pvPower: 1000,
+          grid: { power: 2000 },
+          homePower: 3000,
+          loadpoints: [{ chargePower: 500 }, { chargePower: 1500 }],
+        },
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "evcc", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "evcc.pv_power", "1 evcc.kilowatt");
+    expectBlockValue(container, "evcc.grid_power", "2 evcc.kilowatt");
+    expectBlockValue(container, "evcc.home_power", "3 evcc.kilowatt");
+    expectBlockValue(container, "evcc.charge_power", "2 evcc.kilowatt");
+  });
+});

src/widgets/filebrowser/component.test.jsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/filebrowser/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "filebrowser", url: "http://x" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("filebrowser.available")).toBeInTheDocument();
+    expect(screen.getByText("filebrowser.used")).toBeInTheDocument();
+    expect(screen.getByText("filebrowser.total")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(3);
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "filebrowser", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders computed available/used/total bytes", () => {
+    useWidgetAPI.mockReturnValue({ data: { total: 100, used: 40 }, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "filebrowser", url: "http://x" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expectBlockValue(container, "filebrowser.available", 60);
+    expectBlockValue(container, "filebrowser.used", 40);
+    expectBlockValue(container, "filebrowser.total", 100);
+  });
+});

src/widgets/fileflows/component.test.jsx

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/fileflows/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "fileflows", url: "http://x" } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("fileflows.queue")).toBeInTheDocument();
+    expect(screen.getByText("fileflows.processing")).toBeInTheDocument();
+    expect(screen.getByText("fileflows.processed")).toBeInTheDocument();
+    expect(screen.getByText("fileflows.time")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(4);
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "fileflows", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders values and falls back time to 0:00", () => {
+    useWidgetAPI.mockReturnValue({
+      data: { queue: 1, processing: 2, processed: 3, time: "" },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "fileflows", url: "http://x" } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    expectBlockValue(container, "fileflows.queue", 1);
+    expectBlockValue(container, "fileflows.processing", 2);
+    expectBlockValue(container, "fileflows.processed", 3);
+    expectBlockValue(container, "fileflows.time", "0:00");
+  });
+});

src/widgets/flood/component.test.jsx

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/flood/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "flood", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("nope")).toBeInTheDocument();
+  });
+
+  it("renders a helpful error when the API returns no torrent data", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    renderWithProviders(<Component service={{ widget: { type: "flood", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("No torrent data returned")).toBeInTheDocument();
+  });
+
+  it("renders computed leech/seed counts and up/down rates", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        torrents: {
+          a: { downRate: 10, upRate: 20, status: ["downloading"] },
+          b: { downRate: 5, upRate: 0, status: ["complete"] },
+          c: { downRate: 0, upRate: 1, status: ["complete", "downloading"] },
+        },
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "flood", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "flood.leech", 2);
+    expectBlockValue(container, "flood.download", 15);
+    expectBlockValue(container, "flood.seed", 2);
+    expectBlockValue(container, "flood.upload", 21);
+  });
+});

src/widgets/freshrss/component.test.jsx

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/freshrss/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "freshrss", url: "http://x" } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(2);
+    expect(screen.getByText("freshrss.unread")).toBeInTheDocument();
+    expect(screen.getByText("freshrss.subscriptions")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(2);
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "freshrss", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders unread and subscription counts", () => {
+    useWidgetAPI.mockReturnValue({ data: { unread: 7, subscriptions: 3 }, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "freshrss", url: "http://x" } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    expectBlockValue(container, "freshrss.unread", 7);
+    expectBlockValue(container, "freshrss.subscriptions", 3);
+  });
+});

src/widgets/frigate/component.test.jsx

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/frigate/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({ data: undefined, error: undefined }) // stats
+      .mockReturnValueOnce({ data: undefined, error: undefined }); // events
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "frigate", url: "http://x" } }} />,
+      {
+        settings: { hideErrors: false },
+      },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("frigate.cameras")).toBeInTheDocument();
+    expect(screen.getByText("frigate.uptime")).toBeInTheDocument();
+    expect(screen.getByText("frigate.version")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(3);
+  });
+
+  it("renders error UI when either endpoint errors", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({ data: undefined, error: { message: "nope" } })
+      .mockReturnValueOnce({ data: undefined, error: undefined });
+
+    renderWithProviders(<Component service={{ widget: { type: "frigate", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("nope")).toBeInTheDocument();
+  });
+
+  it("renders stats and recent events when enabled", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({
+        data: { num_cameras: 2, uptime: 3600, version: "1.0.0" },
+        error: undefined,
+      })
+      .mockReturnValueOnce({
+        data: [{ id: "e1", camera: "Cam1", label: "Person", score: 0.5, start_time: 123 }],
+        error: undefined,
+      });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "frigate", url: "http://x", enableRecentEvents: true } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expectBlockValue(container, "frigate.cameras", 2);
+    expectBlockValue(container, "frigate.uptime", 3600);
+    expectBlockValue(container, "frigate.version", "1.0.0");
+
+    // The event text is composed of multiple text nodes; match on the element's full textContent.
+    expect(
+      screen.getByText((_, el) => el?.classList?.contains("absolute") && el.textContent?.includes("Cam1 (Person 50)")),
+    ).toBeInTheDocument();
+    expect(screen.getByText("123")).toBeInTheDocument();
+  });
+});

src/widgets/fritzbox/component.test.jsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component, { fritzboxDefaultFields } from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/fritzbox/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("defaults fields and filters to 4 blocks while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "fritzbox", url: "http://x" } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(fritzboxDefaultFields);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("fritzbox.connectionStatus")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.uptime")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.maxDown")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.maxUp")).toBeInTheDocument();
+    expect(screen.queryByText("fritzbox.externalIPAddress")).toBeNull();
+  });
+
+  it("caps widget.fields at 4 entries", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = {
+      widget: {
+        type: "fritzbox",
+        fields: ["down", "up", "received", "sent", "externalIPAddress", "externalIPv6Prefix"],
+      },
+    };
+
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["down", "up", "received", "sent"]);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expect(screen.getByText("fritzbox.down")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.up")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.received")).toBeInTheDocument();
+    expect(screen.getByText("fritzbox.sent")).toBeInTheDocument();
+    expect(screen.queryByText("fritzbox.externalIPAddress")).toBeNull();
+  });
+
+  it("renders computed values when loaded", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        connectionStatus: 1,
+        uptime: 100,
+        maxDown: 8000,
+        maxUp: 16000,
+        down: 80,
+        up: 40,
+        received: 1024,
+        sent: 2048,
+        externalIPAddress: "1.2.3.4",
+        externalIPv6Address: "::1",
+        externalIPv6Prefix: "abcd::/64",
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "fritzbox", url: "http://x" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+    expectBlockValue(container, "fritzbox.connectionStatus", "fritzbox.connectionStatus1");
+    expectBlockValue(container, "fritzbox.uptime", 100);
+    expectBlockValue(container, "fritzbox.maxDown", 1000); // 8000/8
+    expectBlockValue(container, "fritzbox.maxUp", 2000); // 16000/8
+  });
+});

src/widgets/gamedig/component.test.jsx

@@ -0,0 +1,72 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/gamedig/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("defaults fields and filters blocks while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const service = { widget: { type: "gamedig", url: "http://x" } };
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["map", "currentPlayers", "ping"]);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("gamedig.map")).toBeInTheDocument();
+    expect(screen.getByText("gamedig.currentPlayers")).toBeInTheDocument();
+    expect(screen.getByText("gamedig.ping")).toBeInTheDocument();
+    expect(screen.queryByText("gamedig.status")).toBeNull();
+  });
+
+  it("caps fields at 4 and renders online values", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        online: true,
+        name: "Server1",
+        map: "MapA",
+        players: 5,
+        maxplayers: 10,
+        bots: 1,
+        ping: 42,
+      },
+      error: undefined,
+    });
+
+    const service = {
+      widget: {
+        type: "gamedig",
+        url: "http://x",
+        fields: ["status", "name", "map", "currentPlayers", "ping"],
+      },
+    };
+
+    const { container } = renderWithProviders(<Component service={service} />, { settings: { hideErrors: false } });
+
+    expect(service.widget.fields).toEqual(["status", "name", "map", "currentPlayers"]);
+    expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+
+    expectBlockValue(container, "gamedig.status", "gamedig.online");
+    expectBlockValue(container, "gamedig.name", "Server1");
+    expectBlockValue(container, "gamedig.map", "MapA");
+    expectBlockValue(container, "gamedig.currentPlayers", "5 / 10");
+    expect(screen.queryByText("gamedig.ping")).toBeNull();
+  });
+});

src/widgets/gatus/component.test.jsx

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/gatus/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "gatus", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("gatus.up")).toBeInTheDocument();
+    expect(screen.getByText("gatus.down")).toBeInTheDocument();
+    expect(screen.getByText("gatus.uptime")).toBeInTheDocument();
+    expect(screen.getAllByText("-")).toHaveLength(3);
+  });
+
+  it("renders error UI when widget API errors", () => {
+    useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } });
+
+    renderWithProviders(<Component service={{ widget: { type: "gatus", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+  });
+
+  it("renders computed up/down site counts and uptime percent", () => {
+    useWidgetAPI.mockReturnValue({
+      data: {
+        site1: { results: [{ success: true }, { success: false }] }, // last: down
+        site2: { results: [{ success: true }] }, // last: up
+      },
+      error: undefined,
+    });
+
+    const { container } = renderWithProviders(<Component service={{ widget: { type: "gatus", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expectBlockValue(container, "gatus.up", 1);
+    expectBlockValue(container, "gatus.down", 1);
+    expectBlockValue(container, "gatus.uptime", "66.7");
+  });
+});

src/widgets/ghostfolio/component.test.jsx

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+function expectBlockValue(container, label, value) {
+  const block = findServiceBlockByLabel(container, label);
+  expect(block, `missing block for ${label}`).toBeTruthy();
+  expect(block.textContent).toContain(String(value));
+}
+
+describe("widgets/ghostfolio/component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders placeholders while loading (no net worth by default)", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({ data: undefined, error: undefined }) // today
+      .mockReturnValueOnce({ data: undefined, error: undefined }) // year
+      .mockReturnValueOnce({ data: undefined, error: undefined }) // max
+      .mockReturnValueOnce({ data: undefined, error: undefined }); // userInfo (disabled)
+
+    const { container } = renderWithProviders(
+      <Component service={{ widget: { type: "ghostfolio", url: "http://x" } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+    expect(screen.getByText("ghostfolio.gross_percent_today")).toBeInTheDocument();
+    expect(screen.getByText("ghostfolio.gross_percent_1y")).toBeInTheDocument();
+    expect(screen.getByText("ghostfolio.gross_percent_max")).toBeInTheDocument();
+    expect(screen.queryByText("ghostfolio.net_worth")).toBeNull();
+  });
+
+  it("renders error UI when the today endpoint returns 401", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({ data: { statusCode: 401, message: "Unauthorized" }, error: undefined })
+      .mockReturnValueOnce({ data: undefined, error: undefined })
+      .mockReturnValueOnce({ data: undefined, error: undefined })
+      .mockReturnValueOnce({ data: undefined, error: undefined });
+
+    renderWithProviders(<Component service={{ widget: { type: "ghostfolio", url: "http://x" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getAllByText(/widget\.api_error/i).length).toBeGreaterThan(0);
+    expect(screen.getByText("Unauthorized")).toBeInTheDocument();
+  });
+
+  it("renders performance percent ranges and net worth when enabled", () => {
+    useWidgetAPI
+      .mockReturnValueOnce({
+        data: { performance: { netPerformancePercentageWithCurrencyEffect: 0.1, currentNetWorth: 123.456 } },
+        error: undefined,
+      })
+      .mockReturnValueOnce({
+        data: { performance: { grossPerformancePercentage: -0.05 } },
+        error: undefined,
+      })
+      .mockReturnValueOnce({
+        data: { performance: { currentGrossPerformancePercent: 0 } },
+        error: undefined,
+      })
+      .mockReturnValueOnce({ data: { settings: { currency: "USD" } }, error: undefined });
+
+    const { container } = renderWithProviders(
+      <Component
+        service={{
+          widget: {
+            type: "ghostfolio",
+            url: "http://x",
+            fields: ["gross_percent_today", "gross_percent_1y", "gross_percent_max", "net_worth"],
+          },
+        }}
+      />,
+      { settings: { hideErrors: false } },
+    );
+
+    expectBlockValue(container, "ghostfolio.gross_percent_today", "+10");
+    expectBlockValue(container, "ghostfolio.gross_percent_1y", "-5");
+    expectBlockValue(container, "ghostfolio.gross_percent_max", "0");
+    expectBlockValue(container, "ghostfolio.net_worth", "123.46 USD");
+  });
+});