6c79d2e1d1
The merge brings several FN-3240 UI refinements that move and anchor drag handles into provider actions, alongside FN-3256 styling improvements to the planning mode modal and quick chat FAB. Key supporting changes include a durable insight lifecycle for FN-3243, a fix for list view detail callback t Fusion-Task-Id: FN-3240
2470 lines
77 KiB
TypeScript
2470 lines
77 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from "vitest";
|
|
import { render, screen, fireEvent, createEvent } from "@testing-library/react";
|
|
import { UsageIndicator } from "../UsageIndicator";
|
|
import "../UsageIndicator.css";
|
|
import * as useUsageDataModule from "../../hooks/useUsageData";
|
|
import type { ProviderUsage } from "../../api";
|
|
import { scopedKey } from "../../utils/projectStorage";
|
|
|
|
// Mock the useUsageData hook
|
|
vi.mock("../../hooks/useUsageData", () => ({
|
|
useUsageData: vi.fn(),
|
|
}));
|
|
|
|
const mockUseUsageData = vi.mocked(useUsageDataModule.useUsageData);
|
|
const TEST_PROJECT_ID = "proj-123";
|
|
|
|
function createAnchorRect(partial: Partial<DOMRect> = {}): DOMRect {
|
|
return {
|
|
x: 900,
|
|
y: 50,
|
|
top: 50,
|
|
bottom: 80,
|
|
left: 900,
|
|
right: 940,
|
|
width: 40,
|
|
height: 30,
|
|
toJSON: () => ({}),
|
|
...partial,
|
|
} as DOMRect;
|
|
}
|
|
const USAGE_VIEW_MODE_KEY = scopedKey("kb-usage-view-mode", TEST_PROJECT_ID);
|
|
const USAGE_HIDDEN_WINDOWS_KEY = scopedKey("kb-usage-hidden-windows", TEST_PROJECT_ID);
|
|
const USAGE_PROVIDER_ORDER_KEY = scopedKey("kb-usage-provider-order", TEST_PROJECT_ID);
|
|
|
|
describe("UsageIndicator", () => {
|
|
const mockOnClose = vi.fn();
|
|
const mockRefresh = vi.fn();
|
|
|
|
const mockProviders: ProviderUsage[] = [
|
|
{
|
|
name: "Anthropic",
|
|
icon: "🅰️",
|
|
status: "ok",
|
|
plan: "Pro",
|
|
email: "user@example.com",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 45,
|
|
percentLeft: 55,
|
|
resetText: "resets in 2h 15m",
|
|
resetMs: 8100000,
|
|
},
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 3d",
|
|
resetMs: 259200000,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "OpenAI",
|
|
icon: "🤖",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Hourly",
|
|
percentUsed: 75,
|
|
percentLeft: 25,
|
|
resetText: "resets in 45m",
|
|
resetMs: 2700000,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Google",
|
|
icon: "🔍",
|
|
status: "no-auth",
|
|
windows: [],
|
|
},
|
|
];
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
// Clear localStorage to ensure clean view mode state
|
|
localStorage.removeItem(USAGE_VIEW_MODE_KEY);
|
|
localStorage.removeItem(USAGE_HIDDEN_WINDOWS_KEY);
|
|
localStorage.removeItem(USAGE_PROVIDER_ORDER_KEY);
|
|
});
|
|
|
|
it("renders nothing when isOpen is false", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { container } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it("renders modal when isOpen is true", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(
|
|
<UsageIndicator
|
|
isOpen={true}
|
|
onClose={mockOnClose}
|
|
projectId={TEST_PROJECT_ID}
|
|
anchorRect={createAnchorRect()}
|
|
/>
|
|
);
|
|
|
|
expect(screen.getByTestId("usage-modal")).toBeInTheDocument();
|
|
expect(screen.getByText("Usage")).toBeInTheDocument();
|
|
expect(screen.getByTestId("usage-modal")).toHaveClass("usage-modal--popover");
|
|
});
|
|
|
|
it("renders provider cards with correct data", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Check provider names are rendered
|
|
expect(screen.getByText("Anthropic")).toBeInTheDocument();
|
|
expect(screen.getByText("OpenAI")).toBeInTheDocument();
|
|
expect(screen.getByText("Google")).toBeInTheDocument();
|
|
|
|
// Check status badges
|
|
expect(screen.getByText("Not configured")).toBeInTheDocument();
|
|
|
|
// Check usage windows
|
|
expect(screen.getByText("Session (5h)")).toBeInTheDocument();
|
|
expect(screen.getByText("Weekly")).toBeInTheDocument();
|
|
expect(screen.getByText("Hourly")).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders drag handle in the right-side actions cluster for each provider card", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const cards = Array.from(document.querySelectorAll(".usage-provider"));
|
|
expect(cards).toHaveLength(3);
|
|
|
|
cards.forEach((card) => {
|
|
const info = card.querySelector(".usage-provider-info");
|
|
const actions = card.querySelector(".usage-provider-actions");
|
|
const handle = card.querySelector(".usage-provider-drag-handle");
|
|
const headerChildren = Array.from(card.querySelectorAll(":scope > .usage-provider-header > *"));
|
|
|
|
expect(info).toBeInTheDocument();
|
|
expect(actions).toBeInTheDocument();
|
|
expect(handle).toBeInTheDocument();
|
|
expect(actions).toContainElement(handle);
|
|
expect(info?.contains(handle)).toBe(false);
|
|
expect(headerChildren[0]).toBe(info);
|
|
});
|
|
});
|
|
|
|
it("reorders providers on drag and drop and persists order", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const cardsBefore = Array.from(document.querySelectorAll(".usage-provider"));
|
|
expect(cardsBefore.map((card) => card.getAttribute("data-provider"))).toEqual([
|
|
"Anthropic",
|
|
"OpenAI",
|
|
"Google",
|
|
]);
|
|
|
|
const draggedCard = cardsBefore[0] as HTMLElement;
|
|
const targetCard = cardsBefore[1] as HTMLElement;
|
|
const dataTransfer = {
|
|
setData: vi.fn(),
|
|
getData: vi.fn(() => "Anthropic"),
|
|
effectAllowed: "",
|
|
dropEffect: "",
|
|
};
|
|
|
|
Object.defineProperty(targetCard, "getBoundingClientRect", {
|
|
value: () => ({ top: 0, height: 100, bottom: 100, left: 0, right: 200, width: 200, x: 0, y: 0, toJSON: () => ({}) }),
|
|
configurable: true,
|
|
});
|
|
|
|
fireEvent.dragStart(draggedCard, { dataTransfer });
|
|
fireEvent.dragOver(targetCard, { dataTransfer, clientY: 80 });
|
|
fireEvent.drop(targetCard, { dataTransfer });
|
|
fireEvent.dragEnd(draggedCard, { dataTransfer });
|
|
|
|
const cardsAfter = Array.from(document.querySelectorAll(".usage-provider"));
|
|
expect(cardsAfter.map((card) => card.getAttribute("data-provider"))).toEqual([
|
|
"OpenAI",
|
|
"Anthropic",
|
|
"Google",
|
|
]);
|
|
expect(localStorage.getItem(USAGE_PROVIDER_ORDER_KEY)).toBe(
|
|
JSON.stringify(["OpenAI", "Anthropic", "Google"])
|
|
);
|
|
});
|
|
|
|
it("loads persisted provider order on remount and appends new providers", () => {
|
|
localStorage.setItem(USAGE_PROVIDER_ORDER_KEY, JSON.stringify(["OpenAI", "Anthropic"]));
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const cards = Array.from(document.querySelectorAll(".usage-provider"));
|
|
expect(cards.map((card) => card.getAttribute("data-provider"))).toEqual([
|
|
"OpenAI",
|
|
"Anthropic",
|
|
"Google",
|
|
]);
|
|
});
|
|
|
|
it("applies drag visual feedback classes", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const cards = Array.from(document.querySelectorAll(".usage-provider"));
|
|
const draggedCard = cards[0] as HTMLElement;
|
|
const targetCard = cards[1] as HTMLElement;
|
|
const dataTransfer = {
|
|
setData: vi.fn(),
|
|
getData: vi.fn(() => "Anthropic"),
|
|
effectAllowed: "",
|
|
dropEffect: "",
|
|
};
|
|
|
|
Object.defineProperty(targetCard, "getBoundingClientRect", {
|
|
value: () => ({ top: 100, height: 100, bottom: 200, left: 0, right: 200, width: 200, x: 0, y: 100, toJSON: () => ({}) }),
|
|
configurable: true,
|
|
});
|
|
|
|
fireEvent.dragStart(draggedCard, { dataTransfer });
|
|
expect(draggedCard).toHaveClass("usage-provider--dragging");
|
|
|
|
const dragOverBefore = createEvent.dragOver(targetCard, { dataTransfer });
|
|
Object.defineProperty(dragOverBefore, "clientY", { value: 120 });
|
|
fireEvent(targetCard, dragOverBefore);
|
|
expect(targetCard).toHaveClass("usage-provider--drag-over-before");
|
|
|
|
const dragOverAfter = createEvent.dragOver(targetCard, { dataTransfer });
|
|
Object.defineProperty(dragOverAfter, "clientY", { value: 190 });
|
|
fireEvent(targetCard, dragOverAfter);
|
|
expect(targetCard).toHaveClass("usage-provider--drag-over-after");
|
|
|
|
fireEvent.dragEnd(draggedCard, { dataTransfer });
|
|
expect(draggedCard).not.toHaveClass("usage-provider--dragging");
|
|
});
|
|
|
|
it("reorders providers with move buttons in touch mode", () => {
|
|
const originalMatchMedia = window.matchMedia;
|
|
Object.defineProperty(window, "matchMedia", {
|
|
writable: true,
|
|
configurable: true,
|
|
value: vi.fn().mockImplementation((query: string) => ({
|
|
matches: query === "(pointer: coarse)",
|
|
media: query,
|
|
onchange: null,
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
});
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Move OpenAI up" }));
|
|
|
|
const cardsAfter = Array.from(document.querySelectorAll(".usage-provider"));
|
|
expect(cardsAfter.map((card) => card.getAttribute("data-provider"))).toEqual([
|
|
"OpenAI",
|
|
"Anthropic",
|
|
"Google",
|
|
]);
|
|
|
|
Object.defineProperty(window, "matchMedia", {
|
|
writable: true,
|
|
configurable: true,
|
|
value: originalMatchMedia,
|
|
});
|
|
});
|
|
|
|
it("shows loading skeleton when loading", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: true,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show skeleton elements
|
|
expect(document.querySelector(".usage-skeleton")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows error state when there is an error", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false,
|
|
error: "Failed to fetch usage data",
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("Failed to load usage data")).toBeInTheDocument();
|
|
expect(screen.getByText("Failed to fetch usage data")).toBeInTheDocument();
|
|
expect(screen.getByText("Retry")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows skeleton when no providers (empty result after fetch completes)", () => {
|
|
// When useUsageData completes its initial fetch and returns empty providers,
|
|
// we now show the skeleton (not the empty state) to indicate we're waiting
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show skeleton because initial fetch completed but returned empty
|
|
expect(document.querySelector(".usage-skeleton")).toBeInTheDocument();
|
|
});
|
|
|
|
it("calls refresh when refresh button clicked", async () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const refreshBtn = screen.getByTestId("usage-refresh-btn");
|
|
fireEvent.click(refreshBtn);
|
|
|
|
expect(mockRefresh).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("calls onClose when close button clicked", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const closeBtn = screen.getByTestId("usage-modal-close");
|
|
fireEvent.click(closeBtn);
|
|
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("renders as popover below anchor on desktop when anchorRect provided", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(
|
|
<UsageIndicator
|
|
isOpen={true}
|
|
onClose={mockOnClose}
|
|
projectId={TEST_PROJECT_ID}
|
|
anchorRect={createAnchorRect()}
|
|
/>
|
|
);
|
|
|
|
const modal = screen.getByTestId("usage-modal") as HTMLElement;
|
|
expect(modal).toHaveClass("usage-modal--popover");
|
|
expect(modal.style.top).toBe("88px");
|
|
expect(modal.style.left).toBe("520px");
|
|
});
|
|
|
|
it("renders as full-screen modal when anchorRect is null", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} anchorRect={null} />);
|
|
|
|
expect(screen.getByTestId("usage-modal")).toHaveClass("modal");
|
|
expect(screen.getByTestId("usage-modal")).not.toHaveClass("usage-modal--popover");
|
|
});
|
|
|
|
it("calls onClose when overlay is clicked", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const overlay = screen.getByTestId("usage-modal-overlay");
|
|
fireEvent.click(overlay);
|
|
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("calls onClose when desktop popover backdrop is clicked", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(
|
|
<UsageIndicator
|
|
isOpen={true}
|
|
onClose={mockOnClose}
|
|
projectId={TEST_PROJECT_ID}
|
|
anchorRect={createAnchorRect()}
|
|
/>
|
|
);
|
|
|
|
fireEvent.click(screen.getByTestId("usage-modal-overlay"));
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("calls onClose when Escape key is pressed", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.keyDown(document, { key: "Escape" });
|
|
|
|
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("renders progress bars with correct color classes", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Low Usage", percentUsed: 45, percentLeft: 55, resetText: "1h" },
|
|
{ label: "Medium Usage", percentUsed: 75, percentLeft: 25, resetText: "2h" },
|
|
{ label: "High Usage", percentUsed: 95, percentLeft: 5, resetText: "3h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Check progress bars exist with correct widths
|
|
const progressBars = document.querySelectorAll(".usage-progress-fill");
|
|
expect(progressBars.length).toBe(3);
|
|
|
|
// Check color classes are applied
|
|
expect(document.querySelector(".usage-progress-fill--low")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-progress-fill--medium")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-progress-fill--high")).toBeInTheDocument();
|
|
});
|
|
|
|
it("disables refresh button when loading", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: true,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const refreshBtn = screen.getByTestId("usage-refresh-btn");
|
|
expect(refreshBtn).toBeDisabled();
|
|
});
|
|
|
|
it("passes autoRefresh option based on isOpen prop", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
// Reset mock before testing
|
|
mockUseUsageData.mockClear();
|
|
|
|
// When isOpen is true, autoRefresh should be true
|
|
const { unmount } = render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(mockUseUsageData).toHaveBeenCalledWith({ autoRefresh: true });
|
|
|
|
unmount();
|
|
|
|
// Reset mock
|
|
mockUseUsageData.mockClear();
|
|
|
|
// When isOpen is false, autoRefresh should be false to prevent polling
|
|
render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// The hook is called even when isOpen is false because hooks must be called
|
|
// unconditionally at the top level in React
|
|
expect(mockUseUsageData).toHaveBeenCalledWith({ autoRefresh: false });
|
|
});
|
|
|
|
it("does not render a Connected badge for providers with ok status", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Anthropic",
|
|
icon: "🅰️",
|
|
status: "ok",
|
|
windows: [],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.queryByText("Connected")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("renders provider error messages", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "ErrorProvider",
|
|
icon: "❌",
|
|
status: "error",
|
|
error: "Auth expired — run 'claude' to re-login",
|
|
windows: [],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("Error")).toBeInTheDocument();
|
|
expect(screen.getByText("Auth expired — run 'claude' to re-login")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows last updated timestamp", () => {
|
|
const lastUpdated = new Date("2024-01-15T10:30:00");
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText(/Last updated:/)).toBeInTheDocument();
|
|
expect(screen.getByText(/10:30:00/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("keeps footer metadata on the left and action buttons on the right", () => {
|
|
const lastUpdated = new Date("2024-01-15T10:30:00");
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const footer = document.querySelector(".usage-actions");
|
|
const leftGroup = document.querySelector(".usage-actions-left");
|
|
const rightGroup = document.querySelector(".usage-actions-right");
|
|
|
|
expect(footer).toBeInTheDocument();
|
|
expect(leftGroup).toBeInTheDocument();
|
|
expect(rightGroup).toBeInTheDocument();
|
|
|
|
const lastUpdatedLabel = screen.getByText(/Last updated:/);
|
|
const refreshButton = screen.getByTestId("usage-refresh-btn");
|
|
const closeButton = screen.getByRole("button", { name: "Close" });
|
|
|
|
expect(leftGroup).toContainElement(lastUpdatedLabel);
|
|
expect(rightGroup).toContainElement(refreshButton);
|
|
expect(rightGroup).toContainElement(closeButton);
|
|
|
|
expect(footer?.firstElementChild).toBe(leftGroup);
|
|
expect(footer?.lastElementChild).toBe(rightGroup);
|
|
});
|
|
|
|
it("renders usage windows with correct percentage text", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 45, percentLeft: 55, resetText: "resets in 2h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("45% used")).toBeInTheDocument();
|
|
expect(screen.getByText("55% left")).toBeInTheDocument();
|
|
expect(screen.getByText("resets in 2h")).toBeInTheDocument();
|
|
});
|
|
|
|
// View mode toggle tests
|
|
it("renders view mode toggle buttons with correct initial state", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const usedBtn = screen.getByTestId("usage-view-toggle-used");
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
|
|
expect(usedBtn).toBeInTheDocument();
|
|
expect(remainingBtn).toBeInTheDocument();
|
|
expect(usedBtn).toHaveClass("active");
|
|
expect(remainingBtn).not.toHaveClass("active");
|
|
});
|
|
|
|
it("switches view mode when toggle buttons are clicked", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 45, percentLeft: 55, resetText: "resets in 2h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const usedBtn = screen.getByTestId("usage-view-toggle-used");
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
|
|
// Initially shows "used" view
|
|
expect(screen.getByText("45% used")).toBeInTheDocument();
|
|
|
|
// Click remaining button
|
|
fireEvent.click(remainingBtn);
|
|
|
|
// Now should show "remaining" view
|
|
expect(remainingBtn).toHaveClass("active");
|
|
expect(usedBtn).not.toHaveClass("active");
|
|
expect(screen.getByText("55% remaining")).toBeInTheDocument();
|
|
expect(screen.getByText("45% used")).toBeInTheDocument(); // Footer text
|
|
|
|
// Click back to used
|
|
fireEvent.click(usedBtn);
|
|
|
|
expect(usedBtn).toHaveClass("active");
|
|
expect(remainingBtn).not.toHaveClass("active");
|
|
expect(screen.getByText("45% used")).toBeInTheDocument();
|
|
});
|
|
|
|
it("reads view mode from localStorage on mount", () => {
|
|
// Set localStorage to 'remaining' before rendering
|
|
localStorage.setItem(USAGE_VIEW_MODE_KEY, "remaining");
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 45, percentLeft: 55, resetText: "resets in 2h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const usedBtn = screen.getByTestId("usage-view-toggle-used");
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
|
|
// Should initialize to 'remaining' from localStorage
|
|
expect(remainingBtn).toHaveClass("active");
|
|
expect(usedBtn).not.toHaveClass("active");
|
|
expect(screen.getByText("55% remaining")).toBeInTheDocument();
|
|
|
|
// Clean up
|
|
localStorage.removeItem(USAGE_VIEW_MODE_KEY);
|
|
});
|
|
|
|
it("persists view mode to localStorage when changed", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
|
|
// Click remaining button
|
|
fireEvent.click(remainingBtn);
|
|
|
|
// Should save to localStorage
|
|
expect(localStorage.getItem(USAGE_VIEW_MODE_KEY)).toBe("remaining");
|
|
|
|
// Clean up
|
|
localStorage.removeItem(USAGE_VIEW_MODE_KEY);
|
|
});
|
|
|
|
it("renders eye icon button on each usage window row", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getAllByTestId("usage-window-hide-btn")).toHaveLength(3);
|
|
});
|
|
|
|
it("clicking eye icon hides a window row", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const sessionLabel = screen.getByText("Session (5h)");
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
|
|
const hiddenRow = sessionLabel.closest(".usage-window");
|
|
expect(hiddenRow).toHaveClass("usage-window--hidden");
|
|
expect(sessionLabel).not.toBeVisible();
|
|
expect(screen.queryByText("45% used")).not.toBeInTheDocument();
|
|
expect(screen.queryByRole("button", { name: "Hide Session (5h)" })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("hidden window does not occupy layout space", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const sessionRow = screen.getByText("Session (5h)").closest(".usage-window") as HTMLElement;
|
|
expect(sessionRow).toBeVisible();
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
|
|
expect(sessionRow).not.toBeVisible();
|
|
expect(getComputedStyle(sessionRow).display).toBe("none");
|
|
});
|
|
|
|
it("persists hidden windows to localStorage", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
|
|
expect(localStorage.getItem(USAGE_HIDDEN_WINDOWS_KEY)).toBe(
|
|
JSON.stringify({ Anthropic: ["Session (5h)"] })
|
|
);
|
|
});
|
|
|
|
it("restores hidden windows from localStorage on mount", () => {
|
|
localStorage.setItem(
|
|
USAGE_HIDDEN_WINDOWS_KEY,
|
|
JSON.stringify({ Anthropic: ["Session (5h)"] })
|
|
);
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const hiddenRow = screen.getByText("Session (5h)").closest(".usage-window");
|
|
expect(hiddenRow).toHaveClass("usage-window--hidden");
|
|
});
|
|
|
|
it("shows provider-level show hidden button when windows are hidden", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
|
|
expect(screen.getByTestId("usage-show-hidden-btn")).toHaveTextContent("Show hidden (1)");
|
|
});
|
|
|
|
it("renders show hidden button inline within provider info", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
|
|
const showHiddenButton = screen.getByTestId("usage-show-hidden-btn");
|
|
expect(showHiddenButton.closest(".usage-provider-info")).toBeTruthy();
|
|
expect(showHiddenButton.closest(".usage-provider-actions")).toBeNull();
|
|
});
|
|
|
|
it("show hidden button reveals all hidden windows for a provider", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
|
|
fireEvent.click(screen.getByRole("button", { name: "Hide Weekly" }));
|
|
|
|
fireEvent.click(screen.getByTestId("usage-show-hidden-btn"));
|
|
|
|
expect(screen.queryByTestId("usage-show-hidden-btn")).not.toBeInTheDocument();
|
|
expect(screen.getByText("Session (5h)").closest(".usage-window")).not.toHaveClass("usage-window--hidden");
|
|
expect(screen.getByText("Weekly").closest(".usage-window")).not.toHaveClass("usage-window--hidden");
|
|
expect(screen.getByRole("button", { name: "Hide Session (5h)" })).toBeInTheDocument();
|
|
expect(screen.getByRole("button", { name: "Hide Weekly" })).toBeInTheDocument();
|
|
});
|
|
|
|
it("does not show provider-level show hidden button when no windows are hidden", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.queryByTestId("usage-show-hidden-btn")).not.toBeInTheDocument();
|
|
});
|
|
|
|
|
|
// ProviderIcon integration tests
|
|
it("renders SVG provider icons instead of emoji", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Anthropic", icon: "🅰️", status: "ok", windows: [] },
|
|
{ name: "OpenAI", icon: "🤖", status: "ok", windows: [] },
|
|
{ name: "Google", icon: "🔍", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should render SVG icons with correct provider data attributes
|
|
expect(document.querySelector('[data-provider="anthropic"]')).toBeInTheDocument();
|
|
expect(document.querySelector('[data-provider="openai"]')).toBeInTheDocument();
|
|
expect(document.querySelector('[data-provider="google"]')).toBeInTheDocument();
|
|
});
|
|
|
|
it("maps Claude provider to anthropic icon", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Claude", icon: "🅰️", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(document.querySelector('[data-provider="anthropic"]')).toBeInTheDocument();
|
|
expect(document.querySelector("svg[aria-label='Anthropic']")).toBeInTheDocument();
|
|
});
|
|
|
|
it("maps Codex provider to openai icon", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Codex", icon: "🤖", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(document.querySelector('[data-provider="openai"]')).toBeInTheDocument();
|
|
expect(document.querySelector("svg[aria-label='OpenAI']")).toBeInTheDocument();
|
|
});
|
|
|
|
it("maps Gemini provider to google icon", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Gemini", icon: "🔍", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(document.querySelector('[data-provider="google"]')).toBeInTheDocument();
|
|
expect(document.querySelector("svg[aria-label='Google Gemini']")).toBeInTheDocument();
|
|
});
|
|
|
|
it("maps Kimi provider to kimi icon", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Kimi", icon: "🌙", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(document.querySelector('[data-provider="kimi"]')).toBeInTheDocument();
|
|
});
|
|
|
|
it("maps Moonshot provider to kimi icon (alias)", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{ name: "Moonshot", icon: "🌙", status: "ok", windows: [] },
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(document.querySelector('[data-provider="kimi"]')).toBeInTheDocument();
|
|
expect(screen.getByText("Moonshot")).toBeInTheDocument();
|
|
});
|
|
|
|
// Pace indicator tests
|
|
it("renders pace marker for weekly windows with timing data", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 3d",
|
|
resetMs: 259200000, // 3 days remaining
|
|
windowDurationMs: 604800000, // 7 days total
|
|
pace: {
|
|
status: "behind",
|
|
percentElapsed: 57,
|
|
message: "27% under pace",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceMarker = document.querySelector('[data-testid="pace-marker"]');
|
|
expect(paceMarker).toBeInTheDocument();
|
|
});
|
|
|
|
it("does not render pace marker for non-weekly windows (Session, Hourly)", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 45,
|
|
percentLeft: 55,
|
|
resetText: "resets in 2h",
|
|
resetMs: 7200000,
|
|
windowDurationMs: 18000000,
|
|
},
|
|
{
|
|
label: "Hourly",
|
|
percentUsed: 60,
|
|
percentLeft: 40,
|
|
resetText: "resets in 30m",
|
|
resetMs: 1800000,
|
|
windowDurationMs: 3600000,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceMarkers = document.querySelectorAll('[data-testid="pace-marker"]');
|
|
expect(paceMarkers.length).toBe(0);
|
|
});
|
|
|
|
it("does not render pace marker when pace is undefined", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 3d",
|
|
// No pace field
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceMarker = document.querySelector('[data-testid="pace-marker"]');
|
|
expect(paceMarker).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("shows 'ahead of pace' text when usage exceeds elapsed time by >5%", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 70, // 70% used
|
|
percentLeft: 30,
|
|
resetText: "resets in 3.5d",
|
|
resetMs: 302400000, // 3.5 days remaining out of 7
|
|
windowDurationMs: 604800000, // 7 days total
|
|
pace: {
|
|
status: "ahead",
|
|
percentElapsed: 50,
|
|
message: "20% over pace",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceRow = screen.getByTestId("pace-row");
|
|
expect(paceRow).toHaveTextContent(/over pace/);
|
|
expect(paceRow).toHaveTextContent("20%");
|
|
});
|
|
|
|
it("shows 'behind pace' text when usage is under elapsed time by >5%", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 20, // 20% used
|
|
percentLeft: 80,
|
|
resetText: "resets in 3.5d",
|
|
resetMs: 302400000, // 3.5 days remaining out of 7
|
|
windowDurationMs: 604800000, // 7 days total
|
|
pace: {
|
|
status: "behind",
|
|
percentElapsed: 50,
|
|
message: "30% under pace",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceRow = screen.getByTestId("pace-row");
|
|
expect(paceRow).toHaveTextContent(/under pace/);
|
|
expect(paceRow).toHaveTextContent("30%");
|
|
});
|
|
|
|
it("shows 'on pace' text when usage is within 5% of elapsed time", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 52, // 52% used
|
|
percentLeft: 48,
|
|
resetText: "resets in 3.5d",
|
|
resetMs: 302400000, // 3.5 days remaining out of 7
|
|
windowDurationMs: 604800000, // 7 days total
|
|
pace: {
|
|
status: "on-track",
|
|
percentElapsed: 50,
|
|
message: "On pace with time elapsed",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const paceRow = screen.getByTestId("pace-row");
|
|
expect(paceRow).toHaveTextContent(/On pace/);
|
|
});
|
|
|
|
it("pace marker position inverts correctly when switching to remaining mode", () => {
|
|
// Mock provider with weekly window
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 3.5d",
|
|
resetMs: 302400000, // 50% elapsed
|
|
windowDurationMs: 604800000,
|
|
pace: {
|
|
status: "behind",
|
|
percentElapsed: 50,
|
|
message: "20% under pace",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// In used mode: marker at 50%
|
|
let paceMarker = document.querySelector('[data-testid="pace-marker"]') as HTMLElement;
|
|
expect(paceMarker).toBeInTheDocument();
|
|
expect(paceMarker.style.left).toBe("50%");
|
|
|
|
// Switch to remaining mode
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
fireEvent.click(remainingBtn);
|
|
|
|
// In remaining mode: marker at 100 - 50 = 50% (same in this case since it's 50/50)
|
|
paceMarker = document.querySelector('[data-testid="pace-marker"]') as HTMLElement;
|
|
expect(paceMarker.style.left).toBe("50%");
|
|
});
|
|
|
|
it("pace percentage text uses backend message directly", () => {
|
|
// Clear localStorage to ensure fresh 'used' mode
|
|
localStorage.removeItem(USAGE_VIEW_MODE_KEY);
|
|
|
|
// Setup: 70% used (ahead of pace), 30% remaining
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 70, // 70% used
|
|
percentLeft: 30,
|
|
resetText: "resets in 3.5d",
|
|
resetMs: 302400000, // 50% elapsed
|
|
windowDurationMs: 604800000,
|
|
pace: {
|
|
status: "ahead",
|
|
percentElapsed: 50,
|
|
message: "20% over pace",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// In used mode: ahead of pace (70% used vs 50% elapsed)
|
|
let paceRow = screen.getByTestId("pace-row");
|
|
expect(paceRow).toHaveTextContent(/over pace/);
|
|
|
|
// Switch to remaining mode - message stays the same (from backend)
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
fireEvent.click(remainingBtn);
|
|
|
|
// The message comes from backend, so it doesn't change based on view mode
|
|
paceRow = screen.getByTestId("pace-row");
|
|
expect(paceRow).toHaveTextContent("20% over pace");
|
|
});
|
|
|
|
// Refresh-on-open behavior tests
|
|
it("calls refresh when isOpen transitions from false to true", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null, // No recent update, should refresh
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Initially isOpen is false, refresh should not be called
|
|
expect(mockRefresh).not.toHaveBeenCalled();
|
|
|
|
// Open the modal - isOpen transitions to true
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should be called when modal opens
|
|
expect(mockRefresh).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("does not call refresh when isOpen is already true on mount", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
// Render with isOpen=true initially
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should NOT be called on initial mount when isOpen is already true
|
|
// (the hook will handle initial data fetch)
|
|
expect(mockRefresh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("does not call refresh when isOpen becomes false (modal closes)", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Clear any calls from initial render
|
|
mockRefresh.mockClear();
|
|
|
|
// Close the modal - isOpen transitions to false
|
|
rerender(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should NOT be called when modal closes
|
|
expect(mockRefresh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("skips refresh if data was updated within last 5 seconds", () => {
|
|
// Data was just updated (within 5 seconds)
|
|
const recentUpdate = new Date(Date.now() - 2000); // 2 seconds ago
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: recentUpdate,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Clear any calls from initial render
|
|
mockRefresh.mockClear();
|
|
|
|
// Open the modal
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should NOT be called because data is fresh (within 5 seconds)
|
|
expect(mockRefresh).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("calls refresh when modal opens if data is stale (older than 5 seconds)", () => {
|
|
// Data was updated 10 seconds ago (stale)
|
|
const staleUpdate = new Date(Date.now() - 10000); // 10 seconds ago
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: staleUpdate,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Clear any calls from initial render
|
|
mockRefresh.mockClear();
|
|
|
|
// Open the modal
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should be called because data is stale (older than 5 seconds)
|
|
expect(mockRefresh).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("calls refresh again when modal reopens after being closed", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Open the modal first time
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
expect(mockRefresh).toHaveBeenCalledTimes(1);
|
|
|
|
// Close the modal
|
|
rerender(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Reopen the modal
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// refresh should be called again on reopen
|
|
expect(mockRefresh).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
// Initial loading state tests
|
|
it("shows skeleton when modal opens with no cached data", () => {
|
|
// Simulate: initial fetch has not completed, providers array is empty
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false, // loading is false, but no providers yet
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show skeleton because initial fetch hasn't completed
|
|
expect(document.querySelector(".usage-skeleton")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows skeleton when modal reopens after being closed with data", () => {
|
|
const { rerender } = render(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// First open: show data
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show providers, not skeleton
|
|
expect(screen.getByText("Anthropic")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-skeleton")).not.toBeInTheDocument();
|
|
|
|
// Close the modal
|
|
rerender(<UsageIndicator isOpen={false} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Reopen with no providers (simulating stale state before fetch completes)
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [], // Empty - will show skeleton until fetch completes
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show skeleton on reopen until providers arrive
|
|
expect(document.querySelector(".usage-skeleton")).toBeInTheDocument();
|
|
});
|
|
|
|
it("shows providers once data arrives after initial skeleton", () => {
|
|
// First render: empty providers, no data yet
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: null,
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
const { rerender } = render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show skeleton initially
|
|
expect(document.querySelector(".usage-skeleton")).toBeInTheDocument();
|
|
|
|
// Simulate data arriving
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: mockProviders,
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
// Trigger a re-render with new data
|
|
rerender(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Now should show providers
|
|
expect(screen.getByText("Anthropic")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-skeleton")).not.toBeInTheDocument();
|
|
});
|
|
|
|
// Percentage rounding tests
|
|
it("rounds percentage values in display text (whole numbers)", () => {
|
|
// Use decimal percentages to verify rounding
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 45.678, percentLeft: 54.322, resetText: "resets in 2h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should display rounded values: 46% used, 54% left
|
|
expect(screen.getByText("46% used")).toBeInTheDocument();
|
|
expect(screen.getByText("54% left")).toBeInTheDocument();
|
|
});
|
|
|
|
it("rounds percentage values in remaining view mode", () => {
|
|
// Use decimal percentages to verify rounding
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 33.333, percentLeft: 66.667, resetText: "resets in 3h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Switch to remaining mode
|
|
const remainingBtn = screen.getByTestId("usage-view-toggle-remaining");
|
|
fireEvent.click(remainingBtn);
|
|
|
|
// Should display rounded values: 67% remaining, 33% used
|
|
expect(screen.getByText("67% remaining")).toBeInTheDocument();
|
|
expect(screen.getByText("33% used")).toBeInTheDocument();
|
|
});
|
|
|
|
it("rounds percentage values in progress bar width", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "TestProvider",
|
|
icon: "🧪",
|
|
status: "ok",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 45.678, percentLeft: 54.322, resetText: "resets in 2h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Check progress bar width is rounded
|
|
const progressBar = document.querySelector(".usage-progress-fill") as HTMLElement;
|
|
expect(progressBar).toBeInTheDocument();
|
|
expect(progressBar.style.width).toBe("46%"); // 45.678 rounds to 46
|
|
});
|
|
|
|
// resetAt timestamp display tests
|
|
it("shows absolute reset time when resetAt is provided", () => {
|
|
const resetAt = new Date(Date.now() + 2 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 45,
|
|
percentLeft: 55,
|
|
resetText: "resets in 2h",
|
|
resetMs: 7200000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show both relative text and absolute time
|
|
expect(screen.getByText("resets in 2h")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-window-reset-at")).toBeInTheDocument();
|
|
});
|
|
|
|
it("does not show absolute reset time when resetAt is absent", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 45,
|
|
percentLeft: 55,
|
|
resetText: "resets in 2h",
|
|
resetMs: 7200000,
|
|
// no resetAt
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("resets in 2h")).toBeInTheDocument();
|
|
expect(document.querySelector(".usage-window-reset-at")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly window shows absolute reset time when resetAt is provided", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 3d",
|
|
resetMs: 259200000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Relative reset text should be present
|
|
expect(screen.getByText("resets in 3d")).toBeInTheDocument();
|
|
// All windows now show the absolute timestamp when resetAt is available
|
|
expect(document.querySelector(".usage-window-reset-at")).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude 5h session row shows both relative reset text and absolute reset time", () => {
|
|
// Simulate a realistic Claude usage payload with Session (5h) + Weekly windows
|
|
const sessionResetAt = new Date(Date.now() + 2 * 60 * 60 * 1000); // 2h from now
|
|
const weeklyResetAt = new Date(Date.now() + 5 * 24 * 60 * 60 * 1000); // 5d from now
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
plan: "Pro",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 45,
|
|
percentLeft: 55,
|
|
resetText: "resets in 2h",
|
|
resetMs: 7200000,
|
|
resetAt: sessionResetAt.toISOString(),
|
|
},
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 5d",
|
|
resetMs: 432000000,
|
|
resetAt: weeklyResetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Session (5h) row should exist
|
|
expect(screen.getByText("Session (5h)")).toBeInTheDocument();
|
|
|
|
// Both relative reset texts should be present
|
|
expect(screen.getByText("resets in 2h")).toBeInTheDocument();
|
|
expect(screen.getByText("resets in 5d")).toBeInTheDocument();
|
|
|
|
// Both rows show the absolute reset time (no more suppression for Claude weekly)
|
|
const resetAtElements = document.querySelectorAll(".usage-window-reset-at");
|
|
expect(resetAtElements.length).toBe(2);
|
|
|
|
// Session row should show the absolute time formatted for today (just time like "2:30 PM")
|
|
const sessionResetAtEl = resetAtElements[0];
|
|
expect(sessionResetAtEl.textContent).toBeTruthy();
|
|
// It should be a time-only format (e.g., "12:30 PM") since the reset is today
|
|
expect(sessionResetAtEl.textContent).toMatch(/\d{1,2}:\d{2}\s*(AM|PM)/i);
|
|
|
|
// Verify provider card shows plan
|
|
expect(screen.getByText("Pro")).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude 5h session row without resetAt only shows relative reset text", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 60,
|
|
percentLeft: 40,
|
|
resetText: "resets in 1h 30m",
|
|
resetMs: 5400000,
|
|
// No resetAt — backend couldn't infer the exact timestamp
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Session (5h) should still be visible
|
|
expect(screen.getByText("Session (5h)")).toBeInTheDocument();
|
|
|
|
// Relative reset text should be present
|
|
expect(screen.getByText("resets in 1h 30m")).toBeInTheDocument();
|
|
|
|
// No absolute reset time element
|
|
expect(document.querySelector(".usage-window-reset-at")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("non-Claude providers are unaffected by resetAt display feature", () => {
|
|
const resetAt = new Date(Date.now() + 2 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 20,
|
|
percentLeft: 80,
|
|
resetText: "resets in 4h",
|
|
resetMs: 14400000,
|
|
// Codex also supports resetAt from its API
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Gemini",
|
|
icon: "🔵",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Flash models",
|
|
percentUsed: 10,
|
|
percentLeft: 90,
|
|
resetText: "resets in 6h",
|
|
resetMs: 21600000,
|
|
// No resetAt for Gemini
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Both providers should render normally
|
|
expect(screen.getByText("Codex")).toBeInTheDocument();
|
|
expect(screen.getByText("Gemini")).toBeInTheDocument();
|
|
expect(screen.getByText("Flash models")).toBeInTheDocument();
|
|
|
|
// Codex should show absolute reset time (since it provides resetAt)
|
|
expect(document.querySelectorAll(".usage-window-reset-at").length).toBe(1);
|
|
|
|
// Both providers should show their relative reset text
|
|
expect(screen.getByText("resets in 4h")).toBeInTheDocument();
|
|
expect(screen.getByText("resets in 6h")).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly variant labels show absolute reset time when resetAt is provided", () => {
|
|
const resetAt = new Date(Date.now() + 4 * 24 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly (Sonnet)",
|
|
percentUsed: 40,
|
|
percentLeft: 60,
|
|
resetText: "resets in 4d",
|
|
resetMs: 345600000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
{
|
|
label: "Weekly (Opus)",
|
|
percentUsed: 25,
|
|
percentLeft: 75,
|
|
resetText: "resets in 4d",
|
|
resetMs: 345600000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Relative reset text should be present for both weekly variants
|
|
const resetTexts = screen.getAllByText("resets in 4d");
|
|
expect(resetTexts.length).toBe(2);
|
|
|
|
// Both weekly variants now show absolute timestamp
|
|
expect(document.querySelectorAll(".usage-window-reset-at").length).toBe(2);
|
|
});
|
|
|
|
it("Anthropic provider name shows absolute reset time for weekly windows", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Anthropic",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 35,
|
|
percentLeft: 65,
|
|
resetText: "resets in 3d",
|
|
resetMs: 259200000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("resets in 3d")).toBeInTheDocument();
|
|
// All providers now show the absolute reset time for all windows
|
|
expect(document.querySelector(".usage-window-reset-at")).toBeInTheDocument();
|
|
});
|
|
|
|
it("non-Claude weekly windows still show absolute reset time when provided", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 20,
|
|
percentLeft: 80,
|
|
resetText: "resets in 3d",
|
|
resetMs: 259200000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText("resets in 3d")).toBeInTheDocument();
|
|
// Non-Claude weekly windows are unaffected — should still show absolute time
|
|
expect(document.querySelector(".usage-window-reset-at")).toBeInTheDocument();
|
|
});
|
|
|
|
// Claude weekly reset fallback tests
|
|
it("Claude weekly window generates fallback relative text when resetText is null but resetAt exists", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000 + 5 * 60 * 60 * 1000); // 3d 5h
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: null, // No resetText from backend
|
|
resetMs: 3 * 24 * 60 * 60 * 1000 + 5 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Should show fallback "resets in Xd Xh" text
|
|
expect(screen.getByText(/resets in \d+d \d+h/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly window fallback shows only days when no remainder hours", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000); // exactly 3d
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: null,
|
|
resetMs: 3 * 24 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText(/resets in \d+d/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly window fallback shows hours when less than 1 day remaining", () => {
|
|
const resetAt = new Date(Date.now() + 5 * 60 * 60 * 1000); // 5h
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 80,
|
|
percentLeft: 20,
|
|
resetText: null,
|
|
resetMs: 5 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText(/resets in \d+h/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly window fallback shows minutes when less than 1 hour remaining", () => {
|
|
const resetAt = new Date(Date.now() + 45 * 60 * 1000); // 45m
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 95,
|
|
percentLeft: 5,
|
|
resetText: null,
|
|
resetMs: 45 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
expect(screen.getByText(/resets in \d+m/)).toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude weekly window does not show fallback when both resetText and resetAt are null", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 50,
|
|
percentLeft: 50,
|
|
resetText: null,
|
|
// No resetAt either
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// No reset text should be shown
|
|
expect(document.querySelector(".usage-window-reset")).not.toBeInTheDocument();
|
|
});
|
|
|
|
it("Claude session window generates fallback reset text from resetAt", () => {
|
|
const resetAt = new Date(Date.now() + 3 * 60 * 60 * 1000);
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session (5h)",
|
|
percentUsed: 60,
|
|
percentLeft: 40,
|
|
resetText: null, // No resetText
|
|
resetMs: 3 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// All windows now get fallback text generation when resetText is null but resetAt exists
|
|
expect(document.querySelector(".usage-window-reset")).toBeInTheDocument();
|
|
});
|
|
|
|
// formatResetAt boundary regression tests
|
|
it("resetAt exactly 7 calendar days away shows weekday format, not month/day", () => {
|
|
// Construct a date exactly 7 calendar days from now at an arbitrary time
|
|
const now = new Date();
|
|
const resetAt = new Date(
|
|
now.getFullYear(),
|
|
now.getMonth(),
|
|
now.getDate() + 7,
|
|
14, 30, 0, 0 // 2:30 PM seven days from now
|
|
);
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session",
|
|
percentUsed: 20,
|
|
percentLeft: 80,
|
|
resetText: "resets in 7d",
|
|
resetMs: 7 * 24 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const resetAtEl = document.querySelector(".usage-window-reset-at");
|
|
expect(resetAtEl).toBeInTheDocument();
|
|
// Should show weekday format like "Mon 2:30 PM", NOT "Apr 13, 2:30 PM"
|
|
expect(resetAtEl?.textContent).toMatch(/^[A-Z][a-z]{2} \d{1,2}:\d{2} [AP]M$/);
|
|
// Should NOT contain a comma (which would indicate month/day format)
|
|
expect(resetAtEl?.textContent).not.toMatch(/,/);
|
|
});
|
|
|
|
it("resetAt just under 7 days shows weekday format regardless of time-of-day", () => {
|
|
// 6 days + 23 hours — time-of-day rounding could previously cause this
|
|
// to flip between weekday and month/day format
|
|
const now = new Date();
|
|
const resetAt = new Date(
|
|
now.getFullYear(),
|
|
now.getMonth(),
|
|
now.getDate() + 6,
|
|
now.getHours() + 23,
|
|
now.getMinutes(),
|
|
now.getSeconds()
|
|
);
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session",
|
|
percentUsed: 30,
|
|
percentLeft: 70,
|
|
resetText: "resets in 6d",
|
|
resetMs: 6 * 24 * 60 * 60 * 1000 + 23 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const resetAtEl = document.querySelector(".usage-window-reset-at");
|
|
expect(resetAtEl).toBeInTheDocument();
|
|
// Should show weekday format like "Sat 3:45 PM"
|
|
expect(resetAtEl?.textContent).toMatch(/^[A-Z][a-z]{2} \d{1,2}:\d{2} [AP]M$/);
|
|
});
|
|
|
|
it("resetAt 8 calendar days away shows month/day format", () => {
|
|
const now = new Date();
|
|
const resetAt = new Date(
|
|
now.getFullYear(),
|
|
now.getMonth(),
|
|
now.getDate() + 8,
|
|
10, 0, 0, 0
|
|
);
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Weekly",
|
|
percentUsed: 10,
|
|
percentLeft: 90,
|
|
resetText: "resets in 8d",
|
|
resetMs: 8 * 24 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const resetAtEl = document.querySelector(".usage-window-reset-at");
|
|
expect(resetAtEl).toBeInTheDocument();
|
|
// Should show month/day format like "Apr 14, 10:00 AM"
|
|
expect(resetAtEl?.textContent).toMatch(/^[A-Z][a-z]{2} \d{1,2}, \d{1,2}:\d{2} [AP]M$/);
|
|
});
|
|
|
|
it("resetAt tomorrow consistently shows weekday format at any hour", () => {
|
|
// Set the reset time to 1:00 AM tomorrow — previously edge-case for rounding
|
|
const now = new Date();
|
|
const resetAt = new Date(
|
|
now.getFullYear(),
|
|
now.getMonth(),
|
|
now.getDate() + 1,
|
|
1, 0, 0, 0 // 1:00 AM tomorrow
|
|
);
|
|
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Codex",
|
|
icon: "🟢",
|
|
status: "ok",
|
|
windows: [
|
|
{
|
|
label: "Session",
|
|
percentUsed: 50,
|
|
percentLeft: 50,
|
|
resetText: "resets in 1d",
|
|
resetMs: 24 * 60 * 60 * 1000,
|
|
resetAt: resetAt.toISOString(),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
const resetAtEl = document.querySelector(".usage-window-reset-at");
|
|
expect(resetAtEl).toBeInTheDocument();
|
|
// Tomorrow should always be weekday format, never month/day
|
|
expect(resetAtEl?.textContent).toMatch(/^[A-Z][a-z]{2} \d{1,2}:\d{2} [AP]M$/);
|
|
});
|
|
|
|
// Email display tests
|
|
it("does not render provider email even when email is present in data", () => {
|
|
mockUseUsageData.mockReturnValue({
|
|
providers: [
|
|
{
|
|
name: "Claude",
|
|
icon: "🟠",
|
|
status: "ok",
|
|
email: "user@example.com",
|
|
plan: "Pro",
|
|
windows: [
|
|
{ label: "Session", percentUsed: 10, percentLeft: 90, resetText: "resets in 4h" },
|
|
],
|
|
},
|
|
],
|
|
loading: false,
|
|
error: null,
|
|
lastUpdated: new Date(),
|
|
refresh: mockRefresh,
|
|
});
|
|
|
|
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
|
|
|
|
// Plan should be visible
|
|
expect(screen.getByText("Pro")).toBeInTheDocument();
|
|
// Email should NOT be rendered
|
|
expect(screen.queryByText("user@example.com")).not.toBeInTheDocument();
|
|
expect(document.querySelector(".usage-provider-email")).not.toBeInTheDocument();
|
|
});
|
|
});
|