From 260679679f7881d96cbbf53bbf23b4ffaf7091dc Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Thu, 16 Apr 2026 14:04:33 -0700
Subject: [PATCH] fix(ui): repair router_settings tests broken by full antd
 mock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The antd mocks in RouterSettingsForm.test.tsx and index.test.tsx
replaced the entire antd module with only Select, so the Switch and
Button used by nested components failed to render. Use importOriginal
to preserve the rest of antd and override only Select.

Also fix the TagFilteringToggle click assertion — antd's Switch fires
onChange with (checked, event), so toHaveBeenCalledWith(true) was
always going to miss. Assert the checked arg directly instead of
coupling to antd's call signature.
---
 .../RouterSettingsForm.test.tsx               | 41 +++++++++++--------
 .../TagFilteringToggle.test.tsx               |  3 +-
 .../components/router_settings/index.test.tsx | 38 +++++++++--------
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
index 3988f01281..a8ff485cf9 100644
--- a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
@@ -4,25 +4,30 @@ import userEvent from "@testing-library/user-event";
 import RouterSettingsForm from "./RouterSettingsForm";
 import type { RouterSettingsFormValue } from "./RouterSettingsForm";
 
-// Use the same antd mock as RoutingStrategySelector to keep things consistent
-vi.mock("antd", () => ({
-  Select: Object.assign(
-    ({ value, onChange, children }: any) => (
-      <select
-        data-testid="strategy-select"
-        value={value ?? ""}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        {children}
-      </select>
-    ),
-    {
-      Option: ({ value, children }: any) => (
-        <option value={value}>{children}</option>
+// Override antd Select (complex to drive in JSDOM) while preserving the rest
+// of antd (Switch, Button, etc.) so nested components render normally.
+vi.mock("antd", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("antd")>();
+  return {
+    ...actual,
+    Select: Object.assign(
+      ({ value, onChange, children }: any) => (
+        <select
+          data-testid="strategy-select"
+          value={value ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {children}
+        </select>
       ),
-    }
-  ),
-}));
+      {
+        Option: ({ value, children }: any) => (
+          <option value={value}>{children}</option>
+        ),
+      }
+    ),
+  };
+});
 
 const defaultValue: RouterSettingsFormValue = {
   routerSettings: {},
diff --git a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx
index b469751ac2..cc071117b8 100644
--- a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx
@@ -90,6 +90,7 @@ describe("TagFilteringToggle", () => {
 
     await user.click(screen.getByRole("switch"));
 
-    expect(onToggle).toHaveBeenCalledWith(true);
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(onToggle.mock.calls[0][0]).toBe(true);
   });
 });
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
index eea2717298..80f0ed98c8 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
@@ -3,24 +3,28 @@ import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils"
 import userEvent from "@testing-library/user-event";
 import RouterSettings from "./index";
 
-vi.mock("antd", () => ({
-  Select: Object.assign(
-    ({ value, onChange, children }: any) => (
-      <select
-        data-testid="strategy-select"
-        value={value ?? ""}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        {children}
-      </select>
-    ),
-    {
-      Option: ({ value, children }: any) => (
-        <option value={value}>{children}</option>
+vi.mock("antd", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("antd")>();
+  return {
+    ...actual,
+    Select: Object.assign(
+      ({ value, onChange, children }: any) => (
+        <select
+          data-testid="strategy-select"
+          value={value ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {children}
+        </select>
       ),
-    }
-  ),
-}));
+      {
+        Option: ({ value, children }: any) => (
+          <option value={value}>{children}</option>
+        ),
+      }
+    ),
+  };
+});
 
 vi.mock("@/components/networking", () => ({
   getCallbacksCall: vi.fn(),