chore(ui): drop @ant-design/icons test mocks for migrated source files

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>

ui/litellm-dashboard/src/components/Navbar/WorkerDropdown/WorkerDropdown.test.tsx

@@ -1,35 +1,12 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi, beforeEach } from "vitest";
 
-// Mock the useWorker hook
 const mockUseWorker = vi.fn();
 vi.mock("@/hooks/useWorker", () => ({
   useWorker: () => mockUseWorker(),
 }));
 
-// Mock antd Select
-vi.mock("antd", () => ({
-  Select: ({ value, options, onChange, style, disabled, ...props }: any) => (
-    <select
-      data-testid="worker-select"
-      value={value}
-      style={style}
-      onChange={(e) => onChange?.(e.target.value)}
-    >
-      {options?.map((opt: any) => (
-        <option key={opt.value} value={opt.value} disabled={opt.disabled}>
-          {opt.label}
-        </option>
-      ))}
-    </select>
-  ),
-}));
-
-// Mock icon
-vi.mock("@ant-design/icons", () => ({
-  CloudServerOutlined: () => <span data-testid="cloud-icon" />,
-}));
-
 import WorkerDropdown from "./WorkerDropdown";
 
 describe("WorkerDropdown", () => {
@@ -44,7 +21,7 @@ describe("WorkerDropdown", () => {
     vi.clearAllMocks();
   });
 
-  it("renders null when isControlPlane is false", () => {
+  it("should render nothing when isControlPlane is false", () => {
     mockUseWorker.mockReturnValue({
       isControlPlane: false,
       selectedWorker: workers[0],
@@ -55,7 +32,7 @@ describe("WorkerDropdown", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it("renders null when selectedWorker is null", () => {
+  it("should render nothing when selectedWorker is null", () => {
     mockUseWorker.mockReturnValue({
       isControlPlane: true,
       selectedWorker: null,
@@ -66,7 +43,7 @@ describe("WorkerDropdown", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it("renders the select when isControlPlane and selectedWorker exist", () => {
+  it("should render the select trigger when isControlPlane and selectedWorker exist", () => {
     mockUseWorker.mockReturnValue({
       isControlPlane: true,
       selectedWorker: workers[0],
@@ -74,23 +51,10 @@ describe("WorkerDropdown", () => {
     });
 
     render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
-    expect(screen.getByTestId("worker-select")).toBeInTheDocument();
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
   });
 
-  it("renders all worker options", () => {
-    mockUseWorker.mockReturnValue({
-      isControlPlane: true,
-      selectedWorker: workers[0],
-      workers,
-    });
-
-    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
-    expect(screen.getByText("Worker 1")).toBeInTheDocument();
-    expect(screen.getByText("Worker 2")).toBeInTheDocument();
-    expect(screen.getByText("Worker 3")).toBeInTheDocument();
-  });
-
-  it("sets current worker as selected value", () => {
+  it("should display the currently selected worker name in the trigger", () => {
     mockUseWorker.mockReturnValue({
       isControlPlane: true,
       selectedWorker: workers[1],
@@ -98,36 +62,53 @@ describe("WorkerDropdown", () => {
     });
 
     render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
-    const select = screen.getByTestId("worker-select") as HTMLSelectElement;
-    expect(select.value).toBe("w2");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Worker 2");
   });
 
-  it("disables the currently selected worker in options", () => {
+  it("should render all worker options when opened", async () => {
     mockUseWorker.mockReturnValue({
       isControlPlane: true,
       selectedWorker: workers[0],
       workers,
     });
 
-    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
-    const options = screen.getAllByRole("option");
-    const selectedOption = options.find((opt) => (opt as HTMLOptionElement).value === "w1");
-    expect(selectedOption).toBeDisabled();
-  });
-
-  it("calls onWorkerSwitch when selection changes", async () => {
-    mockUseWorker.mockReturnValue({
-      isControlPlane: true,
-      selectedWorker: workers[0],
-      workers,
-    });
-
-    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
-    const select = screen.getByTestId("worker-select");
-
-    const { default: userEvent } = await import("@testing-library/user-event");
     const user = userEvent.setup();
-    await user.selectOptions(select, "w2");
+    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
+    await user.click(screen.getByRole("combobox"));
+
+    expect(await screen.findByRole("option", { name: "Worker 1" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Worker 2" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Worker 3" })).toBeInTheDocument();
+  });
+
+  it("should disable the currently selected worker in the options list", async () => {
+    mockUseWorker.mockReturnValue({
+      isControlPlane: true,
+      selectedWorker: workers[0],
+      workers,
+    });
+
+    const user = userEvent.setup();
+    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
+    await user.click(screen.getByRole("combobox"));
+
+    const selectedOption = await screen.findByRole("option", { name: "Worker 1" });
+    expect(selectedOption).toHaveAttribute("data-disabled");
+  });
+
+  it("should call onWorkerSwitch when a different worker is picked", async () => {
+    mockUseWorker.mockReturnValue({
+      isControlPlane: true,
+      selectedWorker: workers[0],
+      workers,
+    });
+
+    const user = userEvent.setup();
+    render(<WorkerDropdown onWorkerSwitch={mockOnWorkerSwitch} />);
+    await user.click(screen.getByRole("combobox"));
+
+    const option = await screen.findByRole("option", { name: "Worker 2" });
+    await user.click(option);
 
     expect(mockOnWorkerSwitch).toHaveBeenCalledWith("w2");
   });

ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.test.tsx

@@ -225,37 +225,6 @@ vi.mock("antd", async (importOriginal) => {
   };
 });
 
-vi.mock("@ant-design/icons", async () => {
-  const React = await import("react");
-
-  function Icon() {
-    return React.createElement("span");
-  }
-
-  function LoadingOutlined(props: any) {
-    return React.createElement("span", { "data-testid": "loading-icon", ...props });
-  }
-
-  return {
-    GlobalOutlined: Icon,
-    BankOutlined: Icon,
-    TeamOutlined: Icon,
-    ShoppingCartOutlined: Icon,
-    TagsOutlined: Icon,
-    RobotOutlined: Icon,
-    LineChartOutlined: Icon,
-    BarChartOutlined: Icon,
-    ClockCircleOutlined: Icon,
-    CalendarOutlined: Icon,
-    InfoCircleOutlined: Icon,
-    UserOutlined: Icon,
-    DownOutlined: Icon,
-    RightOutlined: Icon,
-    ExportOutlined: Icon,
-    LoadingOutlined,
-  };
-});
-
 // Mock Tremor components
 vi.mock("@tremor/react", async () => {
   const React = await import("react");

ui/litellm-dashboard/src/components/atoms/Tooltip.test.tsx

@@ -1,41 +1,49 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Tooltip } from "./Tooltip";
 
-vi.mock("@ant-design/icons", () => ({
-  QuestionCircleOutlined: (props: any) => <span data-testid="question-icon" {...props} />,
-}));
+const getTriggerIcon = (container: HTMLElement) => {
+  const svg = container.querySelector("svg.lucide-circle-help, svg.lucide-help-circle");
+  if (!svg) throw new Error("Default HelpCircle icon not rendered");
+  return svg as SVGElement;
+};
 
 describe("Tooltip", () => {
   it("should render", () => {
-    render(<Tooltip content="Help text" />);
-    expect(screen.getByTestId("question-icon")).toBeInTheDocument();
+    const { container } = render(<Tooltip content="Help text" />);
+    expect(getTriggerIcon(container)).toBeInTheDocument();
   });
 
   it("should render children instead of the default icon when provided", () => {
-    render(<Tooltip content="Help text"><button>Info</button></Tooltip>);
+    const { container } = render(
+      <Tooltip content="Help text">
+        <button>Info</button>
+      </Tooltip>,
+    );
     expect(screen.getByRole("button", { name: /info/i })).toBeInTheDocument();
-    expect(screen.queryByTestId("question-icon")).not.toBeInTheDocument();
+    expect(
+      container.querySelector("svg.lucide-circle-help, svg.lucide-help-circle"),
+    ).not.toBeInTheDocument();
   });
 
   it("should show tooltip content on mouse enter", async () => {
     const user = userEvent.setup();
-    render(<Tooltip content="Help text" />);
+    const { container } = render(<Tooltip content="Help text" />);
 
-    await user.hover(screen.getByTestId("question-icon"));
+    await user.hover(getTriggerIcon(container));
 
     expect(screen.getByText("Help text")).toBeInTheDocument();
   });
 
   it("should hide tooltip content on mouse leave", async () => {
     const user = userEvent.setup();
-    render(<Tooltip content="Help text" />);
+    const { container } = render(<Tooltip content="Help text" />);
 
-    await user.hover(screen.getByTestId("question-icon"));
+    await user.hover(getTriggerIcon(container));
     expect(screen.getByText("Help text")).toBeInTheDocument();
 
-    await user.unhover(screen.getByTestId("question-icon"));
+    await user.unhover(getTriggerIcon(container));
     expect(screen.queryByText("Help text")).not.toBeInTheDocument();
   });
 

ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx

@@ -37,10 +37,6 @@ vi.mock("antd", () => {
   };
 });
 
-vi.mock("@ant-design/icons", () => ({
-  InfoCircleOutlined: () => <span data-testid="info-icon">ℹ</span>,
-}));
-
 vi.mock("@tremor/react", () => ({
   TextInput: ({ value, onValueChange, onChange, placeholder, name, className }: any) => {
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

ui/litellm-dashboard/src/components/guardrails/guardrail_garden_card.test.tsx

@@ -4,10 +4,6 @@ import userEvent from "@testing-library/user-event";
 import GuardrailCard from "./guardrail_garden_card";
 import type { GuardrailCardInfo } from "./guardrail_garden_data";
 
-vi.mock("@ant-design/icons", () => ({
-  CheckCircleFilled: ({ style, ...props }: any) => <span data-testid="check-icon" {...props} />,
-}));
-
 const baseCard: GuardrailCardInfo = {
   id: "test-guard",
   name: "Test Guardrail",

ui/litellm-dashboard/src/components/organisms/create_key_button.test.tsx

@@ -50,10 +50,6 @@ vi.mock("@/app/(dashboard)/hooks/keys/useKeys", () => ({
   },
 }));
 
-vi.mock("@ant-design/icons", () => ({
-  InfoCircleOutlined: () => null,
-}));
-
 vi.mock("react-copy-to-clipboard", () => ({
   CopyToClipboard: ({ children }: { children: any }) => children,
 }));

ui/litellm-dashboard/src/components/ui/AntDLoadingSpinner.test.tsx

@@ -1,61 +1,43 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-// Mock antd Spin component
-vi.mock("antd", () => ({
-  Spin: ({ indicator, size, ...props }: any) => (
-    <div data-testid="spin" data-size={size} {...props}>
-      {indicator}
-    </div>
-  ),
-}));
-
-// Mock the icon
-vi.mock("@ant-design/icons", () => ({
-  LoadingOutlined: ({ style, spin, ...props }: any) => (
-    <span
-      data-testid="loading-icon"
-      data-spin={spin}
-      style={style}
-      {...props}
-    />
-  ),
-}));
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
 
 import { AntDLoadingSpinner } from "./AntDLoadingSpinner";
 
 describe("AntDLoadingSpinner", () => {
-  it("renders without props", () => {
-    render(<AntDLoadingSpinner />);
-    expect(screen.getByTestId("spin")).toBeInTheDocument();
-    expect(screen.getByTestId("loading-icon")).toBeInTheDocument();
+  it("should render a lucide spinner svg", () => {
+    const { container } = render(<AntDLoadingSpinner />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass("animate-spin");
   });
 
-  it("passes size prop to Spin", () => {
-    render(<AntDLoadingSpinner size="large" />);
-    expect(screen.getByTestId("spin")).toHaveAttribute("data-size", "large");
+  it("should use large size class when size=large", () => {
+    const { container } = render(<AntDLoadingSpinner size="large" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("h-6", "w-6");
   });
 
-  it("passes small size to Spin", () => {
-    render(<AntDLoadingSpinner size="small" />);
-    expect(screen.getByTestId("spin")).toHaveAttribute("data-size", "small");
+  it("should use small size class when size=small", () => {
+    const { container } = render(<AntDLoadingSpinner size="small" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("h-3", "w-3");
   });
 
-  it("applies custom fontSize to the icon", () => {
-    render(<AntDLoadingSpinner fontSize={32} />);
-    const icon = screen.getByTestId("loading-icon");
-    expect(icon).toHaveStyle({ fontSize: "32px" });
+  it("should default to size 4 when no size prop is provided", () => {
+    const { container } = render(<AntDLoadingSpinner />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("h-4", "w-4");
   });
 
-  it("does not set style when fontSize is not provided", () => {
-    render(<AntDLoadingSpinner />);
-    const icon = screen.getByTestId("loading-icon");
-    expect(icon.style.fontSize).toBe("");
+  it("should apply custom fontSize to the svg style", () => {
+    const { container } = render(<AntDLoadingSpinner fontSize={32} />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveStyle({ fontSize: "32px" });
   });
 
-  it("sets spin attribute on icon", () => {
-    render(<AntDLoadingSpinner />);
-    const icon = screen.getByTestId("loading-icon");
-    expect(icon).toHaveAttribute("data-spin", "true");
+  it("should not set an inline fontSize when not provided", () => {
+    const { container } = render(<AntDLoadingSpinner />);
+    const svg = container.querySelector("svg") as SVGElement;
+    expect(svg.style.fontSize).toBe("");
   });
 });