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 ?
Evaluation settings modal
: null), })); const mockGetGuardrailsUsageOverview = vi.mocked(networking.getGuardrailsUsageOverview); @@ -28,6 +28,18 @@ function wrapper({ children }: { children: React.ReactNode }) { return {children}; } +function renderOverview(onSelectGuardrail = vi.fn()) { + return render( + , + { 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(); + }); });