fix ui unit tests fuck this test why is it so flaky

ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx

@@ -57,28 +57,32 @@ vi.mock("@/app/(dashboard)/hooks/useTeams", () => ({
 }));
 
 describe("ModelsAndEndpointsView", () => {
-  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 { findByText } = render(
-      <ModelsAndEndpointsView
-        accessToken="123"
-        token="123"
-        userRole="123"
-        userID="123"
-        modelData={{ data: [] }}
-        keys={[]}
-        setModelData={() => {}}
-        premiumUser={false}
-        teams={[]}
-      />,
-    );
-    expect(await findByText("Model Management", {}, { timeout: 10000 })).toBeInTheDocument();
-  });
+  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 { findByText } = render(
+        <ModelsAndEndpointsView
+          accessToken="123"
+          token="123"
+          userRole="123"
+          userID="123"
+          modelData={{ data: [] }}
+          keys={[]}
+          setModelData={() => {}}
+          premiumUser={false}
+          teams={[]}
+        />,
+      );
+      expect(await findByText("Model Management", {}, { timeout: 10000 })).toBeInTheDocument();
+    },
+    15000,
+  );
 });

ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx

@@ -32,86 +32,90 @@ vi.mock("../networking", async () => {
 });
 
 describe("Add Model Tab", () => {
-  it("should render", async () => {
-    // Create a form instance using renderHook
-    const { result } = renderHook(() => Form.useForm());
-    const [form] = result.current;
+  it(
+    "should render",
+    async () => {
+      // Create a form instance using renderHook
+      const { result } = renderHook(() => Form.useForm());
+      const [form] = result.current;
 
-    // Mock functions
-    const handleOk = vi.fn();
-    const setSelectedProvider = vi.fn();
-    const setProviderModelsFn = vi.fn();
-    const getPlaceholder = vi.fn((provider: Providers) => `Enter ${provider} model name`);
-    const setShowAdvancedSettings = vi.fn();
+      // Mock functions
+      const handleOk = vi.fn();
+      const setSelectedProvider = vi.fn();
+      const setProviderModelsFn = vi.fn();
+      const getPlaceholder = vi.fn((provider: Providers) => `Enter ${provider} model name`);
+      const setShowAdvancedSettings = vi.fn();
 
-    // Mock data
-    const selectedProvider = Providers.OpenAI;
-    const providerModels = ["gpt-4", "gpt-3.5-turbo"];
-    const showAdvancedSettings = false;
+      // Mock data
+      const selectedProvider = Providers.OpenAI;
+      const providerModels = ["gpt-4", "gpt-3.5-turbo"];
+      const showAdvancedSettings = false;
 
-    const teams: Team[] = [
-      {
-        team_id: "team-1",
-        team_alias: "Test Team",
-        models: ["gpt-4"],
-        max_budget: 100,
-        budget_duration: "monthly",
-        tpm_limit: null,
-        rpm_limit: null,
-        organization_id: "org-1",
-        created_at: "2024-01-01T00:00:00Z",
-        keys: [],
-        members_with_roles: [],
-      },
-    ];
-
-    const credentials: CredentialItem[] = [
-      {
-        credential_name: "test-credential",
-        credential_values: {},
-        credential_info: {
-          custom_llm_provider: "openai",
-          description: "Test credential",
+      const teams: Team[] = [
+        {
+          team_id: "team-1",
+          team_alias: "Test Team",
+          models: ["gpt-4"],
+          max_budget: 100,
+          budget_duration: "monthly",
+          tpm_limit: null,
+          rpm_limit: null,
+          organization_id: "org-1",
+          created_at: "2024-01-01T00:00:00Z",
+          keys: [],
+          members_with_roles: [],
         },
-      },
-    ];
+      ];
 
-    const uploadProps: UploadProps = {
-      beforeUpload: () => false,
-      showUploadList: false,
-    };
+      const credentials: CredentialItem[] = [
+        {
+          credential_name: "test-credential",
+          credential_values: {},
+          credential_info: {
+            custom_llm_provider: "openai",
+            description: "Test credential",
+          },
+        },
+      ];
 
-    const accessToken = "test-access-token";
-    const userRole = "Admin";
-    const premiumUser = true;
+      const uploadProps: UploadProps = {
+        beforeUpload: () => false,
+        showUploadList: false,
+      };
 
-    const { container, findByText } = render(
-      <AddModelTab
-        form={form}
-        handleOk={handleOk}
-        selectedProvider={selectedProvider}
-        setSelectedProvider={setSelectedProvider}
-        providerModels={providerModels}
-        setProviderModelsFn={setProviderModelsFn}
-        getPlaceholder={getPlaceholder}
-        uploadProps={uploadProps}
-        showAdvancedSettings={showAdvancedSettings}
-        setShowAdvancedSettings={setShowAdvancedSettings}
-        teams={teams}
-        credentials={credentials}
-        accessToken={accessToken}
-        userRole={userRole}
-        premiumUser={premiumUser}
-      />,
-    );
-    
-    // Wait for the tabs to render which indicates the component loaded
-    await waitFor(
-      () => {
-        const tabs = container.querySelectorAll('[role="tab"]');
-        expect(tabs.length).toBeGreaterThan(0);
-      },
-      { timeout: 10000 },
-    );
-  });
+      const accessToken = "test-access-token";
+      const userRole = "Admin";
+      const premiumUser = true;
+
+      const { container, findByText } = render(
+        <AddModelTab
+          form={form}
+          handleOk={handleOk}
+          selectedProvider={selectedProvider}
+          setSelectedProvider={setSelectedProvider}
+          providerModels={providerModels}
+          setProviderModelsFn={setProviderModelsFn}
+          getPlaceholder={getPlaceholder}
+          uploadProps={uploadProps}
+          showAdvancedSettings={showAdvancedSettings}
+          setShowAdvancedSettings={setShowAdvancedSettings}
+          teams={teams}
+          credentials={credentials}
+          accessToken={accessToken}
+          userRole={userRole}
+          premiumUser={premiumUser}
+        />,
+      );
+
+      // Wait for the tabs to render which indicates the component loaded
+      await waitFor(
+        () => {
+          const tabs = container.querySelectorAll('[role="tab"]');
+          expect(tabs.length).toBeGreaterThan(0);
+        },
+        { timeout: 10000 },
+      );
+    },
+    15000,
+  );
 });