Test: 10 more widget components (C)

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(<Component service={service} />, { 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(<Component service={service} />, { 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(
+      <Component service={{ widget: { type: "customapi", mappings: [{ label: "x", field: "x" }] } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(screen.getByText("nope")).toBeInTheDocument();
+  });
+});

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 }) => <div data-testid="queue-entry">{title}</div>,
+}));
+
+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(<Component service={{ widget: { type: "deluge" } }} />, {
+      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(<Component service={service} />, { 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"]);
+  });
+});

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(<Component service={{ widget: { type: "develancacheui" } }} />, {
+      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(<Component service={{ widget: { type: "develancacheui" } }} />, {
+      settings: { hideErrors: false },
+    });
+
+    expect(screen.getByText("100")).toBeInTheDocument();
+    expect(screen.getByText("200")).toBeInTheDocument();
+  });
+});

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(<Component service={{ widget: { type: "diskstation" } }} />, {
+      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(
+      <Component service={{ widget: { type: "diskstation", volume: "vol1" } }} />,
+      { 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);
+  });
+});

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(<Component service={{ widget: { type: "dispatcharr" } }} />, {
+      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(<Component service={service} />, { 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();
+  });
+});

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(<Component service={{ widget: { type: "docker", container: "c" } }} />, {
+      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(<Component service={{ widget: { type: "docker", container: "c" } }} />, {
+      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");
+  });
+});

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(<Component service={service} />, { 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(<Component service={service} />, { 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);
+  });
+});

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(<Component service={{ widget: { type: "downloadstation" } }} />, {
+      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(<Component service={{ widget: { type: "downloadstation" } }} />, {
+      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);
+  });
+});

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(
+      <Component service={{ widget: { type: "emby", enableBlocks: true, enableNowPlaying: true } }} />,
+      { 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(
+      <Component
+        service={{
+          widget: {
+            type: "emby",
+            enableBlocks: true,
+            enableNowPlaying: true,
+            enableUser: true,
+            showEpisodeNumber: true,
+            expandOneStreamToTwoRows: true,
+          },
+        }}
+      />,
+      { 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(
+      <Component service={{ widget: { type: "emby", enableNowPlaying: true, enableBlocks: true } }} />,
+      { settings: { hideErrors: false } },
+    );
+
+    expect(screen.getByText("emby.no_active")).toBeInTheDocument();
+  });
+});

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(<Component service={service} />, { 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(<Component service={{ widget: { type: "esphome" } }} />, {
+      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);
+  });
+});

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;
     },