From 2d2cf4248df6fd44a8c4ff2ebcbbee4a488b884f Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 12 Aug 2026 13:52:12 -0700
Subject: [PATCH] test(ui): characterize shared migration surfaces

---
 .../components/GuardrailSettingsView.test.tsx | 31 +++++++++++++++++++
 .../common_components/DurationSelect.test.tsx | 12 ++++---
 2 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/GuardrailSettingsView.test.tsx

diff --git a/ui/litellm-dashboard/src/components/GuardrailSettingsView.test.tsx b/ui/litellm-dashboard/src/components/GuardrailSettingsView.test.tsx
new file mode 100644
index 00000000000..1c206b9c3b7
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/GuardrailSettingsView.test.tsx
@@ -0,0 +1,31 @@
+import { renderWithProviders, screen } from "../../tests/test-utils";
+import { describe, expect, it } from "vitest";
+import GuardrailSettingsView from "./GuardrailSettingsView";
+
+describe("GuardrailSettingsView", () => {
+  it("should render", () => {
+    renderWithProviders(<GuardrailSettingsView globalGuardrailNames={new Set()} />);
+
+    expect(screen.getByText("Guardrails Settings")).toBeInTheDocument();
+  });
+
+  it("should separate active global and team-specific guardrails", () => {
+    renderWithProviders(
+      <GuardrailSettingsView
+        globalGuardrailNames={new Set(["global-one", "global-two"])}
+        teamGuardrails={["global-one", "team-one"]}
+        optedOutGlobalGuardrails={["global-two"]}
+      />,
+    );
+
+    expect(screen.getByText("global-one")).toBeInTheDocument();
+    expect(screen.getByText("team-one")).toBeInTheDocument();
+    expect(screen.queryByText("global-two")).not.toBeInTheDocument();
+  });
+
+  it("should show when global guardrails are bypassed", () => {
+    renderWithProviders(<GuardrailSettingsView globalGuardrailNames={new Set(["global-one"])} killSwitchOn />);
+
+    expect(screen.getByText("Bypassed for this team")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx b/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
index 296ef1ae632..2e3a12d9904 100644
--- a/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DurationSelect.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 import DurationSelect from "./DurationSelect";
 
@@ -19,6 +19,9 @@ describe("DurationSelect", () => {
     expect(screen.getByText("Daily")).toBeInTheDocument();
     expect(screen.getByText("Weekly")).toBeInTheDocument();
     expect(screen.getByText("Monthly")).toBeInTheDocument();
+    const dailyLabel = screen.getByText("Daily");
+    const dailyOption = dailyLabel.closest('[role="option"]') ?? dailyLabel;
+    await user.click(dailyOption);
   });
 
   it("should apply className prop", () => {
@@ -28,17 +31,18 @@ describe("DurationSelect", () => {
   });
 
   it("should call onChange when an option is selected", async () => {
-    const user = userEvent.setup();
+    const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
     const onChange = vi.fn();
     render(<DurationSelect onChange={onChange} />);
 
     const select = screen.getByRole("combobox");
     await user.click(select);
 
-    const dailyOption = screen.getByText("Daily");
+    const dailyLabel = screen.getByText("Daily");
+    const dailyOption = dailyLabel.closest('[role="option"]') ?? dailyLabel;
     await user.click(dailyOption);
 
-    expect(onChange).toHaveBeenCalledWith("24h", expect.any(Object));
+    expect(onChange.mock.calls.map(([selected]) => selected)).toContain("24h");
   });
 
   it("should accept and pass value prop to Select", () => {