homeio

1/* @vitest-environment jsdom */
2
3import { fireEvent, render, screen } from "@testing-library/react";
4import { describe, expect, it } from "vitest";
5import type { MetricsHistoryPoint } from "@/lib/shared/contracts/system";
6import { MetricHistoryChart } from "@/modules/system/components/metric-history-chart";
7
8const HOUR = 60 * 60 * 1000;
9const NOW = Date.UTC(2026, 8, 27, 12, 0, 0);
10
11function point(t: number, cpu: number | null): MetricsHistoryPoint {
12  return { t, cpuPercent: cpu, memoryPercent: null, temperatureCelsius: null, downloadMbps: null, uploadMbps: null, diskReadMBps: null, diskWriteMBps: null };
13}
14
15function renderChart(points: MetricsHistoryPoint[], { fitToData = false } = {}) {
16  return render(
17    <MetricHistoryChart
18      points={points}
19      series={[{ key: "cpuPercent", label: "CPU", className: "text-primary" }]}
20      rangeMs={HOUR}
21      now={NOW}
22      gapMs={15_000}
23      max={100}
24      rangeLabel="1 h"
25      formatValue={(v) => `${v.toFixed(1)}%`}
26      formatTime={(t) => new Date(t).toISOString().slice(11, 19)}
27      fitToData={fitToData}
28    />,
29  );
30}
31
32describe("MetricHistoryChart", () => {
33  it("says it is collecting until there is a reading", () => {
34    renderChart([point(NOW - 5_000, null)]);
35    expect(screen.getByText("Collecting…")).toBeTruthy();
36    expect(screen.queryByRole("img")).toBeNull();
37  });
38
39  it("draws a full hour and labels its span", () => {
40    const points = Array.from({ length: 720 }, (_, i) => point(NOW - HOUR + (i + 1) * 5_000, i % 100));
41    const { container } = renderChart(points);
42
43    expect(screen.getByRole("img", { name: "CPU over the last 1 h" })).toBeTruthy();
44    expect(screen.getByText("1 h ago")).toBeTruthy();
45    const line = container.querySelectorAll("path")[1].getAttribute("d") ?? "";
46    expect(line.match(/M/g)).toHaveLength(1);
47  });
48
49  it("breaks the line across a gap, such as a restart, and says since when history exists", () => {
50    const points = [
51      point(NOW - 20 * 60_000, 10),
52      point(NOW - 20 * 60_000 + 5_000, 12),
53      // Homeio restarted: nothing for ten minutes.
54      point(NOW - 10 * 60_000, 30),
55      point(NOW - 10 * 60_000 + 5_000, 32),
56    ];
57    const { container } = renderChart(points, { fitToData: true });
58
59    const line = container.querySelectorAll("path")[1].getAttribute("d") ?? "";
60    expect(line.match(/M/g)).toHaveLength(2);
61    expect(screen.getByText(`Since ${new Date(NOW - 20 * 60_000).toISOString().slice(11, 19)}`)).toBeTruthy();
62  });
63
64  it("spreads a short history across the full width in the 15 min view", () => {
65    // Two minutes of data in a one-hour chart.
66    const points = Array.from({ length: 24 }, (_, i) => point(NOW - 120_000 + (i + 1) * 5_000, 50));
67    const { container } = renderChart(points, { fitToData: true });
68
69    const line = container.querySelectorAll("path")[1].getAttribute("d") ?? "";
70    const xs = [...line.matchAll(/(-?[\d.]+),(-?[\d.]+)/g)].map((m) => Number(m[1]));
71    expect(Math.min(...xs)).toBeLessThan(15);
72    expect(Math.max(...xs)).toBeCloseTo(300, 0);
73  });
74
75  it("keeps the real time scale for 1 h and greys out the part with no data yet", () => {
76    const points = Array.from({ length: 24 }, (_, i) => point(NOW - 120_000 + (i + 1) * 5_000, 50));
77    const { container } = renderChart(points);
78
79    const line = container.querySelectorAll("path")[1].getAttribute("d") ?? "";
80    const xs = [...line.matchAll(/(-?[\d.]+),(-?[\d.]+)/g)].map((m) => Number(m[1]));
81    // Two minutes of an hour: the last thirtieth of the width.
82    expect(Math.min(...xs)).toBeGreaterThan(285);
83    expect(Math.max(...xs)).toBeCloseTo(300, 0);
84    expect(screen.getByText("No data yet")).toBeTruthy();
85    expect(screen.getByText(/^1 h ago · data since /)).toBeTruthy();
86  });
87
88  it("draws smooth curves that never overshoot a peak or dip below zero", () => {
89    const values = [0, 0, 100, 0, 0, 40, 60, 10];
90    const points = values.map((v, i) => point(NOW - (values.length - i) * 5_000, v));
91    const { container } = renderChart(points, { fitToData: true });
92
93    const line = container.querySelectorAll("path")[1].getAttribute("d") ?? "";
94    expect(line).toContain("C");
95    const ys = [...line.matchAll(/(-?[\d.]+),(-?[\d.]+)/g)].map((m) => Number(m[2]));
96    // 100 % is y = 0 at the top of the 64-unit chart, 0 % is y = 64 at the bottom.
97    expect(Math.min(...ys)).toBeGreaterThanOrEqual(0);
98    expect(Math.max(...ys)).toBeLessThanOrEqual(64);
99  });
100
101  it("shows the nearest reading on hover", () => {
102    const points = [point(NOW - 10_000, 42), point(NOW - 5_000, 43)];
103    const { container } = renderChart(points);
104    const area = container.firstElementChild?.firstElementChild as HTMLElement;
105    area.getBoundingClientRect = () => ({ left: 0, width: 300, top: 0, height: 64, right: 300, bottom: 64, x: 0, y: 0, toJSON: () => ({}) });
106
107    fireEvent.mouseMove(area, { clientX: 300 });
108
109    expect(screen.getByText("43.0%")).toBeTruthy();
110  });
111});
112