From c5c98cf706638c2311409e533d0956620b625f3c Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Thu, 13 Aug 2026 14:56:58 -0700
Subject: [PATCH] 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
---
 .../_components/GuardrailsOverview.test.tsx   | 70 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.test.tsx
index 9bfa71f77be..b616982d69b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.test.tsx
+++ b/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();
+  });
 });