From e5d509bd74bb80e2da537d0c683c8dc9a9d8806e Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Mon, 19 Oct 2026 17:38:52 -0700 Subject: [PATCH] test(ui): cover the flag-off wording on the palette, page visibility and garden search tests --- .../_components/guardrail_garden.test.tsx | 15 ++++--- .../CommandPalette.integration.test.tsx | 42 +++++++++++-------- .../PageVisibilitySettings.test.tsx | 17 +++++--- 3 files changed, 46 insertions(+), 28 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx index 3d126a8d8b7..ee214b451fa 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden.test.tsx @@ -1,5 +1,5 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; -import { render, screen, within } from "@testing-library/react"; +import { fireEvent, render, screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { TerminologyProvider } from "@/contexts/TerminologyContext"; import GuardrailGarden from "./guardrail_garden"; @@ -28,6 +28,7 @@ const DECISION_MODEL_CARDS = ALL_CARDS.filter((c) => c.category === "decision_mo describe("GuardrailGarden", () => { beforeEach(() => { vi.clearAllMocks(); + uiConfig.data = undefined; }); const renderGarden = () => render(); @@ -121,18 +122,22 @@ describe("GuardrailGarden", () => { } }); - it("should match the SI wording a card shows when SI terminology is on", async () => { - uiConfig.data = { use_si_terminology: true }; + it.each([ + [true, "SI"], + [false, "AI"], + ])("should match the wording a card shows when SI terminology is %s", (useSi, shownTerm) => { + uiConfig.data = { use_si_terminology: useSi }; const card = ALL_CARDS.find((c) => c.description.startsWith("AI security platform protecting")); expect(card).toBeDefined(); - const user = userEvent.setup(); render( , ); - await user.type(screen.getByPlaceholderText("Search guardrails"), "SI security platform protecting"); + fireEvent.change(screen.getByPlaceholderText("Search guardrails"), { + target: { value: `${shownTerm} security platform protecting` }, + }); expect(screen.getByText(card!.name)).toBeInTheDocument(); }); diff --git a/ui/litellm-dashboard/src/components/CommandPalette/CommandPalette.integration.test.tsx b/ui/litellm-dashboard/src/components/CommandPalette/CommandPalette.integration.test.tsx index 33da06580b0..8fb908e5d07 100644 --- a/ui/litellm-dashboard/src/components/CommandPalette/CommandPalette.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/CommandPalette/CommandPalette.integration.test.tsx @@ -414,26 +414,32 @@ describe("CommandPalette integration", () => { expect(mocks.push).toHaveBeenCalledWith(uiHref("logs")); }); - it("lists and matches nav pages in SI terminology when the proxy enables it", async () => { - const user = userEvent.setup(); - mocks.pathname = "/teams"; - vi.stubGlobal( - "fetch", - vi.fn(async () => Response.json({ ...UI_SETTINGS_RESPONSE, use_si_terminology: true })), - ); - renderWithProviders( - - - - - , - ); + it.each([ + [true, "si hub", /^SI Hub/], + [false, "ai hub", /^AI Hub/], + ])( + "lists and matches nav pages in the configured terminology when SI terminology is %s", + async (useSi, query, option) => { + const user = userEvent.setup(); + mocks.pathname = "/teams"; + vi.stubGlobal( + "fetch", + vi.fn(async () => Response.json({ ...UI_SETTINGS_RESPONSE, use_si_terminology: useSi })), + ); + renderWithProviders( + + + + + , + ); - fireEvent.keyDown(document, { key: "k", ctrlKey: true }); - await user.type(await screen.findByRole("combobox", { name: "Search" }), "si hub"); + fireEvent.keyDown(document, { key: "k", ctrlKey: true }); + await user.type(await screen.findByRole("combobox", { name: "Search" }), query); - expect(await screen.findByRole("option", { name: /^SI Hub/ })).toBeVisible(); - }); + expect(await screen.findByRole("option", { name: option })).toBeVisible(); + }, + ); it("clears the global query when switching to key search", async () => { const user = userEvent.setup(); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.test.tsx index a9de8a3a43b..6c7c2166384 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.test.tsx @@ -1,4 +1,4 @@ -import { describe, it, expect, vi } from "vitest"; +import { beforeEach, describe, it, expect, vi } from "vitest"; import userEvent from "@testing-library/user-event"; import { renderWithProviders, screen } from "@/../tests/test-utils"; @@ -22,6 +22,10 @@ vi.mock("@/components/page_utils", () => ({ })); describe("PageVisibilitySettings", () => { + beforeEach(() => { + uiConfig.data = undefined; + }); + it("should render the not-set tag when enabledPagesInternalUsers is null", () => { renderWithProviders( , @@ -83,8 +87,11 @@ describe("PageVisibilitySettings", () => { } }); - it("should show group names in SI terminology when the proxy enables it", async () => { - uiConfig.data = { use_si_terminology: true }; + it.each([ + [true, "SI GATEWAY", "AI GATEWAY"], + [false, "AI GATEWAY", "SI GATEWAY"], + ])("should name groups in the configured terminology when SI terminology is %s", async (useSi, shown, hidden) => { + uiConfig.data = { use_si_terminology: useSi }; const user = userEvent.setup(); renderWithProviders( @@ -94,8 +101,8 @@ describe("PageVisibilitySettings", () => { await user.click(screen.getByRole("button", { name: /configure page visibility/i })); - expect(screen.getByRole("group", { name: "SI GATEWAY" })).toBeInTheDocument(); - expect(screen.queryByRole("group", { name: "AI GATEWAY" })).not.toBeInTheDocument(); + expect(screen.getByRole("group", { name: shown })).toBeInTheDocument(); + expect(screen.queryByRole("group", { name: hidden })).not.toBeInTheDocument(); }); it("should display the property description when provided", () => {