From e0e4167fd6054d12cff45410b454cd618650dfb6 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 2 Feb 2026 23:06:42 -0800 Subject: [PATCH] Test: 10 more widget components (C) --- src/widgets/customapi/component.test.jsx | 79 ++++++++++++++ src/widgets/deluge/component.test.jsx | 84 ++++++++++++++ src/widgets/develancacheui/component.test.jsx | 44 ++++++++ src/widgets/diskstation/component.test.jsx | 61 +++++++++++ src/widgets/dispatcharr/component.test.jsx | 54 +++++++++ src/widgets/docker/component.test.jsx | 61 +++++++++++ src/widgets/dockhand/component.test.jsx | 61 +++++++++++ .../downloadstation/component.test.jsx | 62 +++++++++++ src/widgets/emby/component.test.jsx | 103 ++++++++++++++++++ src/widgets/esphome/component.test.jsx | 57 ++++++++++ vitest.setup.js | 2 + 11 files changed, 668 insertions(+) create mode 100644 src/widgets/customapi/component.test.jsx create mode 100644 src/widgets/deluge/component.test.jsx create mode 100644 src/widgets/develancacheui/component.test.jsx create mode 100644 src/widgets/diskstation/component.test.jsx create mode 100644 src/widgets/dispatcharr/component.test.jsx create mode 100644 src/widgets/docker/component.test.jsx create mode 100644 src/widgets/dockhand/component.test.jsx create mode 100644 src/widgets/downloadstation/component.test.jsx create mode 100644 src/widgets/emby/component.test.jsx create mode 100644 src/widgets/esphome/component.test.jsx diff --git a/src/widgets/customapi/component.test.jsx b/src/widgets/customapi/component.test.jsx new file mode 100644 index 000000000..5eb8ec963 --- /dev/null +++ b/src/widgets/customapi/component.test.jsx @@ -0,0 +1,79 @@ +// @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/customapi/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders placeholder blocks for the first 4 mappings while loading (block display)", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: undefined }); + + const service = { + widget: { + type: "customapi", + mappings: [{ label: "a" }, { label: "b" }, { label: "c" }, { label: "d" }, { label: "e" }], + }, + }; + + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("a")).toBeInTheDocument(); + expect(screen.getByText("b")).toBeInTheDocument(); + expect(screen.getByText("c")).toBeInTheDocument(); + expect(screen.getByText("d")).toBeInTheDocument(); + expect(screen.queryByText("e")).toBeNull(); + }); + + it("renders list display, including additionalField and adaptive color", () => { + useWidgetAPI.mockReturnValue({ + data: { foo: { bar: 10 }, delta: -1 }, + error: undefined, + }); + + const service = { + widget: { + type: "customapi", + display: "list", + mappings: [ + { + label: "Value", + field: "foo.bar", + format: "number", + prefix: "$", + additionalField: { field: "delta", color: "adaptive" }, + }, + ], + }, + }; + + renderWithProviders(, { settings: { hideErrors: false } }); + + expect(screen.getByText("Value")).toBeInTheDocument(); + expect(screen.getByText("$ 10")).toBeInTheDocument(); + + const delta = screen.getByText("-1"); + expect(delta.className).toContain("text-rose-300"); + }); + + it("shows error UI when widget API errors and mappings do not treat error as data", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: { message: "nope" } }); + + renderWithProviders( + , + { settings: { hideErrors: false } }, + ); + + expect(screen.getByText("nope")).toBeInTheDocument(); + }); +}); diff --git a/src/widgets/deluge/component.test.jsx b/src/widgets/deluge/component.test.jsx new file mode 100644 index 000000000..bdda50f02 --- /dev/null +++ b/src/widgets/deluge/component.test.jsx @@ -0,0 +1,84 @@ +// @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/deluge/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(4); + expect(screen.getByText("deluge.leech")).toBeInTheDocument(); + expect(screen.getByText("deluge.download")).toBeInTheDocument(); + expect(screen.getByText("deluge.seed")).toBeInTheDocument(); + expect(screen.getByText("deluge.upload")).toBeInTheDocument(); + }); + + it("computes leech/seed counts and upload/download rates, and renders leech progress entries", () => { + useWidgetAPI.mockReturnValue({ + data: { + torrents: { + a: { download_payload_rate: 10, upload_payload_rate: 1, total_remaining: 0, state: "Seeding", progress: 100 }, + b: { + download_payload_rate: 5, + upload_payload_rate: 2, + total_remaining: 5, + state: "Downloading", + progress: 50, + eta: 60, + name: "B", + }, + c: { + download_payload_rate: 0, + upload_payload_rate: 3, + total_remaining: 10, + state: "Downloading", + progress: 10, + eta: 120, + name: "C", + }, + }, + }, + error: undefined, + }); + + const service = { widget: { type: "deluge", enableLeechProgress: true } }; + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + // keys=3, completed=1 => leech=2 + expectBlockValue(container, "deluge.leech", 2); + expectBlockValue(container, "deluge.seed", 1); + expectBlockValue(container, "deluge.download", 15); + expectBlockValue(container, "deluge.upload", 6); + + // Only downloading torrents get QueueEntry. + expect(screen.getAllByTestId("queue-entry").map((el) => el.textContent)).toEqual(["B", "C"]); + }); +}); diff --git a/src/widgets/develancacheui/component.test.jsx b/src/widgets/develancacheui/component.test.jsx new file mode 100644 index 000000000..5ed29b935 --- /dev/null +++ b/src/widgets/develancacheui/component.test.jsx @@ -0,0 +1,44 @@ +// @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/develancacheui/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(2); + expect(screen.getByText("develancacheui.cachehitbytes")).toBeInTheDocument(); + expect(screen.getByText("develancacheui.cachemissbytes")).toBeInTheDocument(); + }); + + it("renders byte totals when loaded", () => { + useWidgetAPI.mockReturnValue({ + data: { totalCacheHitBytes: 100, totalCacheMissBytes: 200 }, + error: undefined, + }); + + renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(screen.getByText("100")).toBeInTheDocument(); + expect(screen.getByText("200")).toBeInTheDocument(); + }); +}); diff --git a/src/widgets/diskstation/component.test.jsx b/src/widgets/diskstation/component.test.jsx new file mode 100644 index 000000000..449c4a619 --- /dev/null +++ b/src/widgets/diskstation/component.test.jsx @@ -0,0 +1,61 @@ +// @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/diskstation/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders placeholders while loading", () => { + useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined })); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("diskstation.uptime")).toBeInTheDocument(); + expect(screen.getByText("diskstation.volumeAvailable")).toBeInTheDocument(); + expect(screen.getByText("resources.cpu")).toBeInTheDocument(); + expect(screen.getByText("resources.mem")).toBeInTheDocument(); + }); + + it("computes uptime days, volume free bytes, and CPU/memory usage", () => { + useWidgetAPI + .mockReturnValueOnce({ data: { data: { up_time: "48:00:00" } }, error: undefined }) + .mockReturnValueOnce({ + data: { data: { vol_info: [{ name: "vol1", used_size: "20", total_size: "100" }] } }, + error: undefined, + }) + .mockReturnValueOnce({ + data: { data: { cpu: { user_load: "10", system_load: "5" }, memory: { real_usage: "25" } } }, + error: undefined, + }); + + const { container } = renderWithProviders( + , + { settings: { hideErrors: false } }, + ); + + expectBlockValue(container, "diskstation.uptime", "2 diskstation.days"); + expectBlockValue(container, "diskstation.volumeAvailable", 80); + expectBlockValue(container, "resources.cpu", 15); + expectBlockValue(container, "resources.mem", 25); + }); +}); diff --git a/src/widgets/dispatcharr/component.test.jsx b/src/widgets/dispatcharr/component.test.jsx new file mode 100644 index 000000000..85f237b33 --- /dev/null +++ b/src/widgets/dispatcharr/component.test.jsx @@ -0,0 +1,54 @@ +// @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/dispatcharr/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders placeholders while loading", () => { + useWidgetAPI.mockImplementation(() => ({ data: undefined, error: undefined })); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(2); + expect(screen.getByText("dispatcharr.channels")).toBeInTheDocument(); + expect(screen.getByText("dispatcharr.streams")).toBeInTheDocument(); + }); + + it("renders counts and stream entries when enabled", () => { + useWidgetAPI.mockReturnValueOnce({ data: [{}, {}, {}], error: undefined }).mockReturnValueOnce({ + data: { + count: 1, + channels: [{ stream_name: "Stream1", clients: [{}, {}], avg_bitrate: "1000kbps" }], + }, + error: undefined, + }); + + const service = { widget: { type: "dispatcharr", enableActiveStreams: true } }; + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + expectBlockValue(container, "dispatcharr.channels", 3); + expectBlockValue(container, "dispatcharr.streams", 1); + expect(screen.getByText(/Stream1 - Clients: 2/)).toBeInTheDocument(); + expect(screen.getByText("1000kbps")).toBeInTheDocument(); + }); +}); diff --git a/src/widgets/docker/component.test.jsx b/src/widgets/docker/component.test.jsx new file mode 100644 index 000000000..9fdffc539 --- /dev/null +++ b/src/widgets/docker/component.test.jsx @@ -0,0 +1,61 @@ +// @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 { useSWR } = vi.hoisted(() => ({ useSWR: vi.fn() })); + +vi.mock("swr", () => ({ + default: useSWR, +})); + +import Component from "./component"; + +describe("widgets/docker/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders offline status when container is not running", () => { + useSWR + .mockReturnValueOnce({ data: { status: "exited" }, error: undefined }) // status + .mockReturnValueOnce({ data: undefined, error: undefined }); // stats + + renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(screen.getByText("widget.status")).toBeInTheDocument(); + expect(screen.getByText("docker.offline")).toBeInTheDocument(); + }); + + it("renders cpu/mem/rx/tx values when stats are available", () => { + useSWR + .mockReturnValueOnce({ data: { status: "running" }, error: undefined }) // status + .mockReturnValueOnce({ + data: { + stats: { + cpu_stats: { cpu_usage: { total_usage: 200 }, system_cpu_usage: 2000, online_cpus: 2 }, + precpu_stats: { cpu_usage: { total_usage: 100 }, system_cpu_usage: 1000 }, + memory_stats: { usage: 1000, total_inactive_file: 100 }, + networks: { eth0: { rx_bytes: 1, tx_bytes: 2 }, eth1: { rx_bytes: 3, tx_bytes: 4 } }, + }, + }, + error: undefined, + }); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + // cpu: (100/1000)*2*100=20 + expect(container.textContent).toContain("20"); + // mem used: 1000-100=900 + expect(container.textContent).toContain("900"); + // rx=4, tx=6 + expect(container.textContent).toContain("4"); + expect(container.textContent).toContain("6"); + }); +}); diff --git a/src/widgets/dockhand/component.test.jsx b/src/widgets/dockhand/component.test.jsx new file mode 100644 index 000000000..f3ca02fc4 --- /dev/null +++ b/src/widgets/dockhand/component.test.jsx @@ -0,0 +1,61 @@ +// @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/dockhand/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("defaults fields and filters to 4 blocks while loading", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: undefined }); + + const service = { widget: { type: "dockhand" } }; + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + expect(service.widget.fields).toEqual(["running", "total", "cpu", "memory"]); + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("dockhand.running")).toBeInTheDocument(); + expect(screen.getByText("dockhand.total")).toBeInTheDocument(); + expect(screen.getByText("dockhand.cpu")).toBeInTheDocument(); + expect(screen.getByText("dockhand.memory")).toBeInTheDocument(); + }); + + it("renders environment-specific values when widget.environment matches", () => { + useWidgetAPI.mockReturnValue({ + data: [ + { + id: "1", + name: "Prod", + containers: { running: 2, total: 5, paused: 1, pendingUpdates: 3 }, + metrics: { cpuPercent: 10, memoryPercent: 20 }, + }, + ], + error: undefined, + }); + + const service = { widget: { type: "dockhand", environment: "prod" } }; + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expectBlockValue(container, "dockhand.running", 2); + expectBlockValue(container, "dockhand.total", 5); + expectBlockValue(container, "dockhand.cpu", 10); + expectBlockValue(container, "dockhand.memory", 20); + }); +}); diff --git a/src/widgets/downloadstation/component.test.jsx b/src/widgets/downloadstation/component.test.jsx new file mode 100644 index 000000000..5e25f7e3e --- /dev/null +++ b/src/widgets/downloadstation/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/downloadstation/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders placeholders while tasks are missing", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: undefined }); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("downloadstation.leech")).toBeInTheDocument(); + expect(screen.getByText("downloadstation.download")).toBeInTheDocument(); + expect(screen.getByText("downloadstation.seed")).toBeInTheDocument(); + expect(screen.getByText("downloadstation.upload")).toBeInTheDocument(); + }); + + it("computes leech/seed counts and total upload/download rates", () => { + useWidgetAPI.mockReturnValue({ + data: { + data: { + tasks: [ + { size: 10, additional: { transfer: { size_downloaded: 10, speed_download: 5, speed_upload: 1 } } }, + { size: 20, additional: { transfer: { size_downloaded: 5, speed_download: 6, speed_upload: 2 } } }, + ], + }, + }, + error: undefined, + }); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + // completed = 1, leech = 1 + expectBlockValue(container, "downloadstation.seed", 1); + expectBlockValue(container, "downloadstation.leech", 1); + expectBlockValue(container, "downloadstation.download", 11); + expectBlockValue(container, "downloadstation.upload", 3); + }); +}); diff --git a/src/widgets/emby/component.test.jsx b/src/widgets/emby/component.test.jsx new file mode 100644 index 000000000..a57d67ad6 --- /dev/null +++ b/src/widgets/emby/component.test.jsx @@ -0,0 +1,103 @@ +// @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"; + +function baseSession(overrides = {}) { + return { + Id: "s1", + UserName: "Alice", + NowPlayingItem: { + Type: "Episode", + Name: "Pilot", + SeriesName: "Show", + ParentIndexNumber: 1, + IndexNumber: 2, + RunTimeTicks: 100000000, + }, + PlayState: { PositionTicks: 50000000, IsPaused: true, IsMuted: true }, + TranscodingInfo: { IsVideoDirect: true, VideoDecoderIsHardware: true, VideoEncoderIsHardware: true }, + ...overrides, + }; +} + +describe("widgets/emby/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("renders loading skeleton when sessions/count are missing", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: undefined, mutate: vi.fn() }); + + const { container } = renderWithProviders( + , + { settings: { hideErrors: false } }, + ); + + // CountBlocks placeholders should be present. + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("emby.movies")).toBeInTheDocument(); + expect(screen.getByText("emby.series")).toBeInTheDocument(); + expect(screen.getByText("emby.episodes")).toBeInTheDocument(); + expect(screen.getByText("emby.songs")).toBeInTheDocument(); + }); + + it("renders single-session view with expanded two rows and stream title with user + episode number", () => { + useWidgetAPI + .mockReturnValueOnce({ data: [baseSession()], error: undefined, mutate: vi.fn() }) // Sessions + .mockReturnValueOnce({ + data: { MovieCount: 1, SeriesCount: 2, EpisodeCount: 3, SongCount: 4 }, + error: undefined, + }); // Count + + renderWithProviders( + , + { settings: { hideErrors: false } }, + ); + + expect(screen.getByText("Show: S01 ยท E02 - Pilot (Alice)")).toBeInTheDocument(); + expect(screen.getByText(/00:05/)).toBeInTheDocument(); + expect(screen.getByText(/00:10/)).toBeInTheDocument(); + }); + + it("renders no_active when there are no sessions playing", () => { + useWidgetAPI + .mockReturnValueOnce({ + data: [{ Id: "s2", PlayState: { PositionTicks: 0 }, UserName: "Bob" }], + error: undefined, + mutate: vi.fn(), + }) + .mockReturnValueOnce({ + data: { MovieCount: 0, SeriesCount: 0, EpisodeCount: 0, SongCount: 0 }, + error: undefined, + }); + + renderWithProviders( + , + { settings: { hideErrors: false } }, + ); + + expect(screen.getByText("emby.no_active")).toBeInTheDocument(); + }); +}); diff --git a/src/widgets/esphome/component.test.jsx b/src/widgets/esphome/component.test.jsx new file mode 100644 index 000000000..41991c1dc --- /dev/null +++ b/src/widgets/esphome/component.test.jsx @@ -0,0 +1,57 @@ +// @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/esphome/component", () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it("defaults fields and filters placeholders to 4 blocks while loading", () => { + useWidgetAPI.mockReturnValue({ data: undefined, error: undefined }); + + const service = { widget: { type: "esphome" } }; + const { container } = renderWithProviders(, { settings: { hideErrors: false } }); + + expect(service.widget.fields).toEqual(["online", "offline", "offline_alt", "total"]); + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expect(screen.getByText("esphome.online")).toBeInTheDocument(); + expect(screen.getByText("esphome.offline")).toBeInTheDocument(); + expect(screen.getByText("esphome.offline_alt")).toBeInTheDocument(); + expect(screen.getByText("esphome.total")).toBeInTheDocument(); + expect(screen.queryByText("esphome.unknown")).toBeNull(); + }); + + it("computes online/offline/unknown and filters to default fields", () => { + useWidgetAPI.mockReturnValue({ + data: { a: true, b: false, c: null }, + error: undefined, + }); + + const { container } = renderWithProviders(, { + settings: { hideErrors: false }, + }); + + expect(container.querySelectorAll(".service-block")).toHaveLength(4); + expectBlockValue(container, "esphome.online", 1); + expectBlockValue(container, "esphome.offline", 1); + // offline_alt is count of not-true, i.e. false+null = 2 + expectBlockValue(container, "esphome.offline_alt", 2); + expectBlockValue(container, "esphome.total", 3); + }); +}); diff --git a/vitest.setup.js b/vitest.setup.js index 8d5165b5a..264ea83d2 100644 --- a/vitest.setup.js +++ b/vitest.setup.js @@ -18,8 +18,10 @@ vi.mock("next-i18next", () => ({ if (key === "common.bytes") return String(opts?.value ?? ""); if (key === "common.bbytes") return String(opts?.value ?? ""); if (key === "common.byterate") return String(opts?.value ?? ""); + if (key === "common.bitrate") return String(opts?.value ?? ""); if (key === "common.duration") return String(opts?.value ?? ""); if (key === "common.ms") return String(opts?.value ?? ""); + if (key === "common.date") return String(opts?.value ?? ""); if (key === "common.relativeDate") return String(opts?.value ?? ""); return key; },