import { afterEach, describe, expect, it } from "vitest"; import { cleanup, render } from "@testing-library/react"; import { UsageWindowRows, formatResetShort, shortWindowLabel, usageStatus, } from "./usage-window-rows"; import type { ProviderUsage } from "@/lib/types/agent-profile"; afterEach(cleanup); describe("shortWindowLabel", () => { it("shortens hour and day windows", () => { expect(shortWindowLabel("5-hour")).toBe("5h"); expect(shortWindowLabel("7-day")).toBe("7d"); expect(shortWindowLabel("30-day")).toBe("30d"); expect(shortWindowLabel("7-day (Opus)")).toBe("7d (Opus)"); }); it("leaves unknown labels untouched", () => { expect(shortWindowLabel("primary")).toBe("primary"); }); }); describe("formatResetShort", () => { const now = Date.UTC(2026, 6, 14, 12, 0, 0); it("formats minutes", () => { expect(formatResetShort(new Date(now + 42 * 60_000).toISOString(), now)).toBe("42m"); }); it("formats hours and minutes", () => { expect(formatResetShort(new Date(now + 3 * 3_600_000 + 17 * 60_000).toISOString(), now)).toBe( "3h 17m", ); }); it("formats days and hours", () => { expect(formatResetShort(new Date(now + 29 * 3_600_000).toISOString(), now)).toBe("1d 5h"); }); it("handles past reset times", () => { expect(formatResetShort(new Date(now - 60_000).toISOString(), now)).toBe("soon"); }); it("handles invalid timestamps", () => { expect(formatResetShort("not-a-date", now)).toBe("soon"); }); }); function makeUsage(pcts: number[]): ProviderUsage { return { provider: "anthropic", plan: "max", windows: pcts.map((pct, i) => ({ label: `${i + 1}-day`, utilization_pct: pct, reset_at: new Date(Date.now() + 3_600_000).toISOString(), })), fetched_at: new Date().toISOString(), }; } describe("usageStatus", () => { it("is Good below 80%", () => { expect(usageStatus(makeUsage([10, 79])).label).toBe("Good"); }); it("is High at 80–89%", () => { expect(usageStatus(makeUsage([10, 85])).label).toBe("High"); }); it("is Critical at 90%+", () => { expect(usageStatus(makeUsage([10, 94])).label).toBe("Critical"); }); }); describe("UsageWindowRows", () => { it("renders a colored bar, percentage, and reset time per window", () => { const usage: ProviderUsage = { provider: "anthropic", plan: "max", windows: [ { label: "5-hour", utilization_pct: 94, reset_at: new Date(Date.now() + 2 * 3_600_000).toISOString(), }, { label: "7-day", utilization_pct: 39, // 30s under 5 days so the elapsed render time cannot flip the // formatted value between "5d 0h" and "4d 23h". reset_at: new Date(Date.now() + 5 * 24 * 3_600_000 - 30_000).toISOString(), }, ], fetched_at: new Date().toISOString(), }; const { container, getByText } = render(); expect(getByText("5h")).toBeDefined(); expect(getByText("94%")).toBeDefined(); expect(getByText("7d")).toBeDefined(); expect(getByText("39%")).toBeDefined(); expect(getByText("4d 23h")).toBeDefined(); expect(container.querySelector(".bg-red-500")).not.toBeNull(); expect(container.querySelector(".bg-emerald-500")).not.toBeNull(); }); });