fix(web-tests): stabilize async auth and usage page assertions

apps/web/src/app/(authenticated)/usage/page.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import UsagePage from "./page";
 
@@ -113,6 +114,15 @@ function setupMocks(overrides?: { empty?: boolean; error?: boolean }): void {
   vi.mocked(fetchTaskOutcomes).mockResolvedValue(mockTaskOutcomes);
 }
 
+function setupPendingMocks(): void {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function -- intentionally unresolved for loading-state test
+  const pending = new Promise<never>(() => {});
+  vi.mocked(fetchUsageSummary).mockReturnValue(pending);
+  vi.mocked(fetchTokenUsage).mockReturnValue(pending);
+  vi.mocked(fetchCostBreakdown).mockReturnValue(pending);
+  vi.mocked(fetchTaskOutcomes).mockReturnValue(pending);
+}
+
 // ─── Tests ───────────────────────────────────────────────────────────
 
 describe("UsagePage", (): void => {
@@ -120,23 +130,32 @@ describe("UsagePage", (): void => {
     vi.clearAllMocks();
   });
 
-  it("should render the page title and subtitle", (): void => {
+  it("should render the page title and subtitle", async (): Promise<void> => {
     setupMocks();
     render(<UsagePage />);
 
+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
     expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Usage");
     expect(screen.getByText("Token usage and cost overview")).toBeInTheDocument();
   });
 
-  it("should have proper layout structure", (): void => {
+  it("should have proper layout structure", async (): Promise<void> => {
     setupMocks();
     const { container } = render(<UsagePage />);
+
+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
     const main = container.querySelector("main");
     expect(main).toBeInTheDocument();
   });
 
   it("should show loading skeleton initially", (): void => {
-    setupMocks();
+    setupPendingMocks();
     render(<UsagePage />);
     expect(screen.getByTestId("loading-skeleton")).toBeInTheDocument();
   });
@@ -171,25 +190,34 @@ describe("UsagePage", (): void => {
     });
   });
 
-  it("should render the time range selector with three options", (): void => {
+  it("should render the time range selector with three options", async (): Promise<void> => {
     setupMocks();
     render(<UsagePage />);
 
+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
     expect(screen.getByText("7 Days")).toBeInTheDocument();
     expect(screen.getByText("30 Days")).toBeInTheDocument();
     expect(screen.getByText("90 Days")).toBeInTheDocument();
   });
 
-  it("should have 30 Days selected by default", (): void => {
+  it("should have 30 Days selected by default", async (): Promise<void> => {
     setupMocks();
     render(<UsagePage />);
 
+    await waitFor((): void => {
+      expect(screen.getByTestId("summary-cards")).toBeInTheDocument();
+    });
+
     const button30d = screen.getByText("30 Days");
     expect(button30d).toHaveAttribute("aria-pressed", "true");
   });
 
   it("should change time range when a different option is clicked", async (): Promise<void> => {
     setupMocks();
+    const user = userEvent.setup();
     render(<UsagePage />);
 
     // Wait for initial load
@@ -199,7 +227,11 @@ describe("UsagePage", (): void => {
 
     // Click 7 Days
     const button7d = screen.getByText("7 Days");
-    fireEvent.click(button7d);
+    await user.click(button7d);
+
+    await waitFor((): void => {
+      expect(fetchUsageSummary).toHaveBeenCalledWith("7d");
+    });
 
     expect(button7d).toHaveAttribute("aria-pressed", "true");
     expect(screen.getByText("30 Days")).toHaveAttribute("aria-pressed", "false");