test(ui): characterise GuardrailsOverview before the shadcn migration

Covers the header and export action, all five summary metric cards, the
table toolbar heading, the evaluation settings modal wiring, the busy
state and the request failure message. Every assertion is role, title or
text based so it holds against both the antd markup and its shadcn
replacement, letting the migration commit land without editing this file

ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -14,7 +14,7 @@ vi.mock("./ScoreChart", () => ({
 }));
 
 vi.mock("./EvaluationSettingsModal", () => ({
-  EvaluationSettingsModal: () => null,
+  EvaluationSettingsModal: ({ open }: { open: boolean }) => (open ? <div>Evaluation settings modal</div> : null),
 }));
 
 const mockGetGuardrailsUsageOverview = vi.mocked(networking.getGuardrailsUsageOverview);
@@ -28,6 +28,18 @@ function wrapper({ children }: { children: React.ReactNode }) {
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }
 
+function renderOverview(onSelectGuardrail = vi.fn()) {
+  return render(
+    <GuardrailsOverview
+      accessToken="test-token"
+      startDate="2026-08-01"
+      endDate="2026-08-12"
+      onSelectGuardrail={onSelectGuardrail}
+    />,
+    { wrapper },
+  );
+}
+
 describe("GuardrailsOverview", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -92,4 +104,58 @@ describe("GuardrailsOverview", () => {
 
     expect(onSelectGuardrail).toHaveBeenCalledWith("guardrail-low");
   });
+
+  it("renders the page header and the export action", async () => {
+    renderOverview();
+
+    expect(await screen.findByRole("heading", { name: "Guardrails Monitor", level: 1 })).toBeInTheDocument();
+    expect(screen.getByText("Monitor guardrail performance across all requests")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Export Data/i })).toBeInTheDocument();
+  });
+
+  it("renders every summary metric card", async () => {
+    renderOverview();
+
+    expect(await screen.findByText("1,500")).toBeInTheDocument();
+    expect(screen.getByText("Total Evaluations")).toBeInTheDocument();
+    expect(screen.getByText("Blocked Requests")).toBeInTheDocument();
+    expect(screen.getByText("84")).toBeInTheDocument();
+    expect(screen.getByText("Pass Rate")).toBeInTheDocument();
+    expect(screen.getByText("94.4%")).toBeInTheDocument();
+    expect(screen.getByText("23ms")).toBeInTheDocument();
+    expect(screen.getByText("Active Guardrails")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  it("renders the table toolbar heading and its description", async () => {
+    renderOverview();
+
+    expect(await screen.findByRole("heading", { name: "Guardrail Performance", level: 5 })).toBeInTheDocument();
+    expect(screen.getByText("Click a guardrail to view details, logs, and configuration")).toBeInTheDocument();
+  });
+
+  it("opens the evaluation settings modal from the toolbar action", async () => {
+    const user = userEvent.setup();
+    renderOverview();
+
+    expect(screen.queryByText("Evaluation settings modal")).not.toBeInTheDocument();
+
+    await user.click(await screen.findByTitle("Evaluation settings"));
+
+    expect(await screen.findByText("Evaluation settings modal")).toBeInTheDocument();
+  });
+
+  it("marks the overview busy while the usage request is in flight", async () => {
+    mockGetGuardrailsUsageOverview.mockReturnValue(new Promise(() => {}));
+    renderOverview();
+
+    await waitFor(() => expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument());
+  });
+
+  it("shows a failure message when the usage request rejects", async () => {
+    mockGetGuardrailsUsageOverview.mockRejectedValue(new Error("network down"));
+    renderOverview();
+
+    expect(await screen.findByText("Failed to load data. Try again.")).toBeInTheDocument();
+  });
 });