From aa3c8fe0e05016f74b1bb94c6f5d9b3dc3ff006b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 3 Feb 2026 12:24:38 -0800
Subject: [PATCH] Add widget component tests (scrutiny..tailscale)
---
src/widgets/scrutiny/component.test.jsx | 69 +++++++++++++++++++++
src/widgets/slskd/component.test.jsx | 75 +++++++++++++++++++++++
src/widgets/sonarr/component.test.jsx | 74 ++++++++++++++++++++++
src/widgets/speedtest/component.test.jsx | 52 ++++++++++++++++
src/widgets/spoolman/component.test.jsx | 63 +++++++++++++++++++
src/widgets/stash/component.test.jsx | 59 ++++++++++++++++++
src/widgets/stocks/component.test.jsx | 43 +++++++++++++
src/widgets/strelaysrv/component.test.jsx | 53 ++++++++++++++++
src/widgets/suwayomi/component.test.jsx | 55 +++++++++++++++++
src/widgets/tailscale/component.test.jsx | 63 +++++++++++++++++++
10 files changed, 606 insertions(+)
create mode 100644 src/widgets/scrutiny/component.test.jsx
create mode 100644 src/widgets/slskd/component.test.jsx
create mode 100644 src/widgets/sonarr/component.test.jsx
create mode 100644 src/widgets/speedtest/component.test.jsx
create mode 100644 src/widgets/spoolman/component.test.jsx
create mode 100644 src/widgets/stash/component.test.jsx
create mode 100644 src/widgets/stocks/component.test.jsx
create mode 100644 src/widgets/strelaysrv/component.test.jsx
create mode 100644 src/widgets/suwayomi/component.test.jsx
create mode 100644 src/widgets/tailscale/component.test.jsx
diff --git a/src/widgets/scrutiny/component.test.jsx b/src/widgets/scrutiny/component.test.jsx
new file mode 100644
index 000000000..68b0d85bd
--- /dev/null
+++ b/src/widgets/scrutiny/component.test.jsx
@@ -0,0 +1,69 @@
+// @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/scrutiny/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+ expect(screen.getByText("scrutiny.passed")).toBeInTheDocument();
+ expect(screen.getByText("scrutiny.failed")).toBeInTheDocument();
+ expect(screen.getByText("scrutiny.unknown")).toBeInTheDocument();
+ });
+
+ it("counts passed/failed/unknown based on status_threshold", () => {
+ useWidgetAPI.mockImplementation((_widget, endpoint) => {
+ if (endpoint === "settings") {
+ return { data: { settings: { metrics: { status_threshold: 2 } } }, error: undefined };
+ }
+ if (endpoint === "summary") {
+ return {
+ data: {
+ data: {
+ summary: {
+ // passed=0, failed_smart=1, failed_scrutiny=2, unknown=99
+ a: { device: { device_status: 0 } },
+ b: { device: { device_status: 2 } },
+ c: { device: { device_status: 99 } },
+ },
+ },
+ },
+ error: undefined,
+ };
+ }
+ return { data: undefined, error: undefined };
+ });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "scrutiny.passed", 1);
+ expectBlockValue(container, "scrutiny.failed", 1);
+ expectBlockValue(container, "scrutiny.unknown", 1);
+ });
+});
diff --git a/src/widgets/slskd/component.test.jsx b/src/widgets/slskd/component.test.jsx
new file mode 100644
index 000000000..2888c6917
--- /dev/null
+++ b/src/widgets/slskd/component.test.jsx
@@ -0,0 +1,75 @@
+// @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/slskd/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("defaults fields to 4 and renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const service = { widget: { type: "slskd" } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(service.widget.fields).toEqual(["slskStatus", "downloads", "uploads", "sharedFiles"]);
+ // Container filters children by widget.fields.
+ expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+ expect(screen.getByText("slskd.slskStatus")).toBeInTheDocument();
+ expect(screen.getByText("slskd.downloads")).toBeInTheDocument();
+ expect(screen.getByText("slskd.uploads")).toBeInTheDocument();
+ expect(screen.getByText("slskd.sharedFiles")).toBeInTheDocument();
+ expect(screen.queryByText("slskd.updateStatus")).toBeNull();
+ });
+
+ it("caps widget.fields at 4 entries", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const service = { widget: { type: "slskd", fields: ["a", "b", "c", "d", "e"] } };
+ renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(service.widget.fields).toEqual(["a", "b", "c", "d"]);
+ });
+
+ it("renders status and counts when loaded", () => {
+ useWidgetAPI.mockImplementation((_widget, endpoint) => {
+ if (endpoint === "application") {
+ return {
+ data: {
+ server: { isConnected: true },
+ version: { isUpdateAvailable: false },
+ shares: { files: 12 },
+ },
+ error: undefined,
+ };
+ }
+ if (endpoint === "downloads") return { data: [{ id: 1 }], error: undefined };
+ if (endpoint === "uploads") return { data: [{ id: 1 }, { id: 2 }], error: undefined };
+ return { data: undefined, error: undefined };
+ });
+
+ const service = { widget: { type: "slskd", fields: ["slskStatus", "downloads", "uploads", "sharedFiles"] } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expectBlockValue(container, "slskd.slskStatus", "slskd.connected");
+ expectBlockValue(container, "slskd.downloads", 1);
+ expectBlockValue(container, "slskd.uploads", 2);
+ expectBlockValue(container, "slskd.sharedFiles", 12);
+ });
+});
diff --git a/src/widgets/sonarr/component.test.jsx b/src/widgets/sonarr/component.test.jsx
new file mode 100644
index 000000000..4972cd31d
--- /dev/null
+++ b/src/widgets/sonarr/component.test.jsx
@@ -0,0 +1,74 @@
+// @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 }));
+
+vi.mock("../../components/widgets/queue/queueEntry", () => ({
+ default: ({ title }) => {title}
,
+}));
+
+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/sonarr/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+ expect(screen.getByText("sonarr.wanted")).toBeInTheDocument();
+ expect(screen.getByText("sonarr.queued")).toBeInTheDocument();
+ expect(screen.getByText("sonarr.series")).toBeInTheDocument();
+ });
+
+ it("renders counts and queue entries when enabled", () => {
+ useWidgetAPI.mockImplementation((_widget, endpoint) => {
+ if (endpoint === "wanted/missing") return { data: { totalRecords: 1 }, error: undefined };
+ if (endpoint === "queue") return { data: { totalRecords: 2 }, error: undefined };
+ if (endpoint === "series") return { data: [{ id: 10, title: "Show" }], error: undefined };
+ if (endpoint === "queue/details") {
+ return {
+ data: [
+ {
+ seriesId: 10,
+ episodeId: 1,
+ episodeTitle: "Ep",
+ sizeLeft: 50,
+ size: 100,
+ timeLeft: "1m",
+ trackedDownloadState: "importPending",
+ },
+ ],
+ error: undefined,
+ };
+ }
+ return { data: undefined, error: undefined };
+ });
+
+ const service = { widget: { type: "sonarr", enableQueue: true } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expectBlockValue(container, "sonarr.wanted", 1);
+ expectBlockValue(container, "sonarr.queued", 2);
+ expectBlockValue(container, "sonarr.series", 1);
+ expect(screen.getAllByTestId("queue-entry").map((el) => el.textContent)).toEqual(["Show: Ep"]);
+ });
+});
diff --git a/src/widgets/speedtest/component.test.jsx b/src/widgets/speedtest/component.test.jsx
new file mode 100644
index 000000000..87e9e83b1
--- /dev/null
+++ b/src/widgets/speedtest/component.test.jsx
@@ -0,0 +1,52 @@
+// @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/speedtest/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+ expect(screen.getByText("speedtest.download")).toBeInTheDocument();
+ expect(screen.getByText("speedtest.upload")).toBeInTheDocument();
+ expect(screen.getByText("speedtest.ping")).toBeInTheDocument();
+ });
+
+ it("renders values for version 2 endpoint (multiples by 8)", () => {
+ useWidgetAPI.mockReturnValue({
+ data: { data: { download: 10, upload: 20, ping: 3 } },
+ error: undefined,
+ });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "speedtest.download", 80);
+ expectBlockValue(container, "speedtest.upload", 160);
+ expectBlockValue(container, "speedtest.ping", 3);
+ });
+});
diff --git a/src/widgets/spoolman/component.test.jsx b/src/widgets/spoolman/component.test.jsx
new file mode 100644
index 000000000..1d467fe20
--- /dev/null
+++ b/src/widgets/spoolman/component.test.jsx
@@ -0,0 +1,63 @@
+// @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/spoolman/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders guessed loading blocks while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const service = { widget: { type: "spoolman", spoolIds: [1, 2] } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(2);
+ expect(screen.getAllByText("spoolman.loading")).toHaveLength(2);
+ });
+
+ it("renders no-spools message when API returns an empty list", () => {
+ useWidgetAPI.mockReturnValue({ data: [], error: undefined });
+
+ renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(screen.getByText("spoolman.noSpools")).toBeInTheDocument();
+ });
+
+ it("filters to selected spoolIds and caps at 4 entries", () => {
+ useWidgetAPI.mockReturnValue({
+ data: [
+ { id: 1, remaining_weight: 50, initial_weight: 100, filament: { name: "A" } },
+ { id: 2, remaining_weight: 25, initial_weight: 100, filament: { name: "B" } },
+ { id: 3, remaining_weight: 10, initial_weight: 100, filament: { name: "C" } },
+ { id: 4, remaining_weight: 10, initial_weight: 100, filament: { name: "D" } },
+ { id: 5, remaining_weight: 10, initial_weight: 100, filament: { name: "E" } },
+ ],
+ error: undefined,
+ });
+
+ const service = { widget: { type: "spoolman", spoolIds: [2, 3, 4, 5, 1] } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ // After filtering and capping to 4, we should see 4 blocks.
+ expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+ expectBlockValue(container, "A", 50);
+ expectBlockValue(container, "B", 25);
+ });
+});
diff --git a/src/widgets/stash/component.test.jsx b/src/widgets/stash/component.test.jsx
new file mode 100644
index 000000000..798ec6e17
--- /dev/null
+++ b/src/widgets/stash/component.test.jsx
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders } from "test-utils/render-with-providers";
+import { findServiceBlockByLabel } from "test-utils/widget-assertions";
+
+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/stash/component", () => {
+ const originalFetch = globalThis.fetch;
+
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ afterEach(() => {
+ globalThis.fetch = originalFetch;
+ });
+
+ it("renders placeholders initially, then renders stats after fetch", async () => {
+ globalThis.fetch = vi.fn(async () => ({
+ json: async () => ({
+ scene_count: 1,
+ scenes_played: 2,
+ total_play_count: 3,
+ total_play_duration: 4,
+ scenes_size: 5,
+ scenes_duration: 6,
+ image_count: 7,
+ images_size: 8,
+ gallery_count: 9,
+ performer_count: 10,
+ studio_count: 11,
+ movie_count: 12,
+ tag_count: 13,
+ total_o_count: 14,
+ }),
+ }));
+
+ const service = { widget: { type: "stash", url: "http://x", key: "k" } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(screen.getByText("stash.scenes")).toBeInTheDocument();
+ expect(screen.getByText("stash.images")).toBeInTheDocument();
+
+ await waitFor(() => {
+ expectBlockValue(container, "stash.scenes", 1);
+ expectBlockValue(container, "stash.images", 7);
+ });
+ });
+});
diff --git a/src/widgets/stocks/component.test.jsx b/src/widgets/stocks/component.test.jsx
new file mode 100644
index 000000000..1a8dc0da4
--- /dev/null
+++ b/src/widgets/stocks/component.test.jsx
@@ -0,0 +1,43 @@
+// @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";
+
+const { useWidgetAPI } = vi.hoisted(() => ({ useWidgetAPI: vi.fn() }));
+vi.mock("utils/proxy/use-widget-api", () => ({ default: useWidgetAPI }));
+
+import Component from "./component";
+
+describe("widgets/stocks/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders invalid configuration message when watchlist is empty", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(screen.getByText("stocks.invalidConfiguration")).toBeInTheDocument();
+ });
+
+ it("renders stock items for a valid watchlist", () => {
+ useWidgetAPI.mockImplementation((_widget, endpoint) => {
+ if (endpoint === "quote") return { data: { dp: 1.23, c: 100 }, error: undefined };
+ if (endpoint === "status") return { data: { isOpen: true }, error: undefined };
+ return { data: undefined, error: undefined };
+ });
+
+ renderWithProviders(
+ ,
+ { settings: { hideErrors: false } },
+ );
+
+ expect(screen.getByText("AAPL")).toBeInTheDocument();
+ expect(screen.getByText("1.23%")).toBeInTheDocument();
+ });
+});
diff --git a/src/widgets/strelaysrv/component.test.jsx b/src/widgets/strelaysrv/component.test.jsx
new file mode 100644
index 000000000..578a17062
--- /dev/null
+++ b/src/widgets/strelaysrv/component.test.jsx
@@ -0,0 +1,53 @@
+// @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/strelaysrv/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+ expect(screen.getByText("strelaysrv.numActiveSessions")).toBeInTheDocument();
+ expect(screen.getByText("strelaysrv.numConnections")).toBeInTheDocument();
+ expect(screen.getByText("strelaysrv.bytesProxied")).toBeInTheDocument();
+ });
+
+ it("renders metrics when loaded", () => {
+ useWidgetAPI.mockReturnValue({
+ data: { numActiveSessions: 1, numConnections: 2, bytesProxied: 3, kbps10s1m5m15m30m60m: [0, 0, 0, 0, 0, 123] },
+ error: undefined,
+ });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "strelaysrv.numActiveSessions", 1);
+ expectBlockValue(container, "strelaysrv.numConnections", 2);
+ expectBlockValue(container, "strelaysrv.dataRelayed", 3);
+ expectBlockValue(container, "strelaysrv.transferRate", 123);
+ });
+});
diff --git a/src/widgets/suwayomi/component.test.jsx b/src/widgets/suwayomi/component.test.jsx
new file mode 100644
index 000000000..3945be219
--- /dev/null
+++ b/src/widgets/suwayomi/component.test.jsx
@@ -0,0 +1,55 @@
+// @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/suwayomi/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("defaults fields while loading and renders placeholders", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const service = { widget: { type: "suwayomi" } };
+ const { container } = renderWithProviders(, { settings: { hideErrors: false } });
+
+ expect(service.widget.fields).toEqual(["download", "nondownload", "read", "unread"]);
+ expect(container.querySelectorAll(".service-block")).toHaveLength(4);
+ expect(screen.getByText("suwayomi.download")).toBeInTheDocument();
+ expect(screen.getByText("suwayomi.nondownload")).toBeInTheDocument();
+ expect(screen.getByText("suwayomi.read")).toBeInTheDocument();
+ expect(screen.getByText("suwayomi.unread")).toBeInTheDocument();
+ });
+
+ it("renders mapped label blocks when loaded", () => {
+ useWidgetAPI.mockReturnValue({
+ data: [
+ { label: "suwayomi.download", count: 1 },
+ { label: "suwayomi.read", count: 2 },
+ ],
+ error: undefined,
+ });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "suwayomi.download", 1);
+ expectBlockValue(container, "suwayomi.read", 2);
+ });
+});
diff --git a/src/widgets/tailscale/component.test.jsx b/src/widgets/tailscale/component.test.jsx
new file mode 100644
index 000000000..d3214b06a
--- /dev/null
+++ b/src/widgets/tailscale/component.test.jsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+
+import { screen } from "@testing-library/react";
+import { afterEach, 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/tailscale/component", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date("2020-01-01T00:00:00Z"));
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ it("renders placeholders while loading", () => {
+ useWidgetAPI.mockReturnValue({ data: undefined, error: undefined });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expect(container.querySelectorAll(".service-block")).toHaveLength(3);
+ expect(screen.getByText("tailscale.address")).toBeInTheDocument();
+ expect(screen.getByText("tailscale.last_seen")).toBeInTheDocument();
+ expect(screen.getByText("tailscale.expires")).toBeInTheDocument();
+ });
+
+ it("renders address and expiry/last-seen strings when loaded", () => {
+ useWidgetAPI.mockReturnValue({
+ data: {
+ addresses: ["100.64.0.1"],
+ keyExpiryDisabled: true,
+ lastSeen: "2019-12-31T23:00:00Z",
+ expires: "2021-01-01T00:00:00Z",
+ },
+ error: undefined,
+ });
+
+ const { container } = renderWithProviders(, {
+ settings: { hideErrors: false },
+ });
+
+ expectBlockValue(container, "tailscale.address", "100.64.0.1");
+ expect(findServiceBlockByLabel(container, "tailscale.last_seen")?.textContent).toContain("tailscale.ago");
+ expectBlockValue(container, "tailscale.expires", "tailscale.never");
+ });
+});