From c6b8f19adc1f6b8ca024be1920fde689203bcaaa Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Sat, 22 Nov 2025 14:05:59 -0800
Subject: [PATCH] ui unit tests fix

---
 .../models-and-endpoints/ModelsAndEndpointsView.test.tsx | 7 ++++---
 ui/litellm-dashboard/src/components/SSOModals.test.tsx   | 9 ++++-----
 .../src/components/add_model/add_model_tab.test.tsx      | 8 ++++----
 ui/litellm-dashboard/tests/setupTests.ts                 | 8 ++++++++
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx
index 2ad5221bb4..dd2c687439 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx
@@ -57,15 +57,16 @@ vi.mock("@/app/(dashboard)/hooks/useTeams", () => ({
 }));
 
 describe("ModelsAndEndpointsView", () => {
-  it("should render the models and endpoints view", () => {
+  it("should render the models and endpoints view", async () => {
     // JSDOM polyfill for libraries expecting ResizeObserver (e.g., recharts)
+    // Note: ResizeObserver is now globally mocked in setupTests.ts, but keeping this for backwards compatibility
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (global as any).ResizeObserver = class {
       observe() {}
       unobserve() {}
       disconnect() {}
     };
-    const { getByText } = render(
+    const { findByText } = render(
       <ModelsAndEndpointsView
         accessToken="123"
         token="123"
@@ -78,6 +79,6 @@ describe("ModelsAndEndpointsView", () => {
         teams={[]}
       />,
     );
-    expect(getByText("Model Management")).toBeInTheDocument();
+    expect(await findByText("Model Management", {}, { timeout: 10000 })).toBeInTheDocument();
   });
 });
diff --git a/ui/litellm-dashboard/src/components/SSOModals.test.tsx b/ui/litellm-dashboard/src/components/SSOModals.test.tsx
index 9be4a08535..f3c903aa8c 100644
--- a/ui/litellm-dashboard/src/components/SSOModals.test.tsx
+++ b/ui/litellm-dashboard/src/components/SSOModals.test.tsx
@@ -219,7 +219,7 @@ describe("SSOModals", () => {
       );
     };
 
-    const { getByLabelText, getByText, queryByText, container } = render(<TestWrapper />);
+    const { getByLabelText, getByText, queryByText, container, findByText } = render(<TestWrapper />);
 
     // Find and interact with the SSO provider select
     const ssoProviderSelect = container.querySelector("#sso_provider");
@@ -244,10 +244,9 @@ describe("SSOModals", () => {
     const saveButton = getByText("Save");
     fireEvent.click(saveButton);
 
-    // Check that only the URL format error appears
-    await waitFor(() => {
-      expect(getByText("URL must start with http:// or https://")).toBeInTheDocument();
-    });
+    // Check that only the URL format error appears (use findByText for async rendering)
+    const errorMessage = await findByText("URL must start with http:// or https://", {}, { timeout: 3000 });
+    expect(errorMessage).toBeInTheDocument();
 
     // Verify the trailing slash error does NOT appear
     expect(queryByText("URL must not end with a trailing slash")).not.toBeInTheDocument();
diff --git a/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
index a3937c2f2f..c79435df89 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx
@@ -32,7 +32,7 @@ vi.mock("../networking", async () => {
 });
 
 describe("Add Model Tab", () => {
-  it("should render", () => {
+  it("should render", async () => {
     // Create a form instance using renderHook
     const { result } = renderHook(() => Form.useForm());
     const [form] = result.current;
@@ -85,7 +85,7 @@ describe("Add Model Tab", () => {
     const userRole = "Admin";
     const premiumUser = true;
 
-    const { getByRole } = render(
+    const { findByRole } = render(
       <AddModelTab
         form={form}
         handleOk={handleOk}
@@ -104,7 +104,7 @@ describe("Add Model Tab", () => {
         premiumUser={premiumUser}
       />,
     );
-    // Check for the heading specifically
-    expect(getByRole("heading", { name: "Add Model" })).toBeInTheDocument();
+    // Check for the heading specifically (use findByRole for async rendering)
+    expect(await findByRole("heading", { name: "Add Model" }, { timeout: 10000 })).toBeInTheDocument();
   });
 });
diff --git a/ui/litellm-dashboard/tests/setupTests.ts b/ui/litellm-dashboard/tests/setupTests.ts
index fdb3dea36e..0a21f9dd4d 100644
--- a/ui/litellm-dashboard/tests/setupTests.ts
+++ b/ui/litellm-dashboard/tests/setupTests.ts
@@ -72,3 +72,11 @@ Object.defineProperty(HTMLAnchorElement.prototype, "click", {
 if (!document.getAnimations) {
   document.getAnimations = () => [];
 }
+
+// Mock ResizeObserver for components that use it (e.g., Tremor UI components)
+// This prevents "ResizeObserver is not defined" errors in JSDOM
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};