From 10f6cad106242b4d1b6a6a66d1001bb080440e32 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 24 Apr 2026 15:27:41 +0000
Subject: [PATCH] chore(ui): repair failing vitest tests after shadcn migration
 (batch B)

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../Fallbacks/FallbackSelectionForm.test.tsx           |  2 +-
 .../src/components/TeamSSOSettings.test.tsx            |  8 +++++---
 .../components/shared/advanced_date_picker.test.tsx    | 10 +++++-----
 .../src/components/templates/key_edit_view.test.tsx    |  7 +++++--
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.test.tsx
index 47a2f105624..b2a39112cbd 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackSelectionForm.test.tsx
@@ -214,7 +214,7 @@ describe("FallbackSelectionForm", () => {
     );
     expect(screen.getByRole("tab", { name: "gpt-4" })).toBeInTheDocument();
     expect(screen.getAllByText("gpt-4").length).toBeGreaterThan(0);
-    expect(screen.getByText("gpt-3.5-turbo")).toBeInTheDocument();
+    expect(screen.getAllByText("gpt-3.5-turbo").length).toBeGreaterThan(0);
   });
 
   it("should not add group when add button clicked at maxGroups", () => {
diff --git a/ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx b/ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx
index 5006afb61e2..444523c899a 100644
--- a/ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx
+++ b/ui/litellm-dashboard/src/components/TeamSSOSettings.test.tsx
@@ -171,7 +171,8 @@ describe("TeamSSOSettings", () => {
 
     renderWithProviders(<TeamSSOSettings {...defaultProps} />);
 
-    expect(screen.getByTestId("spinner")).toBeInTheDocument();
+    // Loading state renders a shadcn Skeleton (div with animate-pulse).
+    expect(document.querySelector(".animate-pulse")).toBeInTheDocument();
   });
 
   it("should display error message when fetch fails", async () => {
@@ -377,8 +378,9 @@ describe("TeamSSOSettings", () => {
     await userEvent.click(screen.getByRole("button", { name: /Edit Settings/i }));
 
     await waitFor(() => {
-      const numberInputs = screen.getAllByLabelText("number input");
-      // max_budget, tpm_limit, rpm_limit
+      // Edit mode renders 3 number <input type="number"> fields for
+      // max_budget, tpm_limit, rpm_limit (rendered as shadcn Inputs).
+      const numberInputs = document.querySelectorAll('input[type="number"]');
       expect(numberInputs.length).toBe(3);
     });
   });
diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
index 90d75df75e4..dbb9db6742e 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx
@@ -29,8 +29,8 @@ describe("AdvancedDatePicker", () => {
   });
 
   const openDropdown = (container: HTMLElement) => {
-    // Find the clickable div that contains the clock icon
-    const trigger = container.querySelector('[role="img"][aria-label="clock-circle"]')?.closest("div.cursor-pointer");
+    // Find the clickable div that contains the lucide Clock icon.
+    const trigger = container.querySelector(".lucide-clock")?.closest("div.cursor-pointer");
     if (trigger) {
       fireEvent.click(trigger);
     }
@@ -47,10 +47,10 @@ describe("AdvancedDatePicker", () => {
   });
 
   it("should display formatted date range", () => {
-    render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
+    const { container } = render(<AdvancedDatePicker value={defaultValue} onValueChange={mockOnValueChange} />);
     // The component displays date range in the format "D MMM, HH:mm - D MMM, HH:mm"
-    // Just check that the clock icon is present
-    expect(screen.getByLabelText("clock-circle")).toBeInTheDocument();
+    // Just check that the (lucide) clock icon is present in the trigger.
+    expect(container.querySelector(".lucide-clock")).toBeInTheDocument();
   });
 
   it("should open dropdown when clicked", () => {
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
index 2e4d0d97e4c..a7b25c40895 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
@@ -624,8 +624,11 @@ describe("KeyEditView", () => {
       });
 
       const orgFormItem = screen.getByText("Organization").closest(".ant-form-item");
-      const disabledSelect = orgFormItem?.querySelector(".ant-select-disabled");
-      expect(disabledSelect).toBeTruthy();
+      // OrganizationDropdown now renders a shadcn Select trigger
+      // (role="combobox") that gets the disabled attribute from Radix.
+      const orgCombobox = orgFormItem?.querySelector('[role="combobox"]') as HTMLButtonElement | null;
+      expect(orgCombobox).toBeTruthy();
+      expect(orgCombobox).toBeDisabled();
     });
 
     it("should not disable the organization dropdown for admin users", async () => {