From 82fa819c501c2ba17db4e954d62018cc91c3dfdf Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 24 Apr 2026 15:18:38 +0000 Subject: [PATCH] chore(ui): repair failing vitest tests after shadcn migration (batch B) Co-authored-by: yuneng-jiang --- .../RouterSettingsForm.test.tsx | 34 +++-------- .../RoutingStrategySelector.test.tsx | 61 ++++++++----------- .../components/router_settings/index.test.tsx | 48 ++++----------- 3 files changed, 44 insertions(+), 99 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 a8ff485cf9b..a14fc776307 100644 --- a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx @@ -4,30 +4,8 @@ import userEvent from "@testing-library/user-event"; import RouterSettingsForm from "./RouterSettingsForm"; import type { RouterSettingsFormValue } from "./RouterSettingsForm"; -// 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(); - return { - ...actual, - Select: Object.assign( - ({ value, onChange, children }: any) => ( - - ), - { - Option: ({ value, children }: any) => ( - - ), - } - ), - }; -}); +// The strategy selector is a shadcn Select (role="combobox"). Additional +// antd components (Switch, Button, …) render from the real antd package. const defaultValue: RouterSettingsFormValue = { routerSettings: {}, @@ -51,7 +29,7 @@ describe("RouterSettingsForm", () => { it("should not show the strategy selector when no strategies are provided", () => { render(); - expect(screen.queryByTestId("strategy-select")).not.toBeInTheDocument(); + expect(screen.queryByRole("combobox")).not.toBeInTheDocument(); }); it("should show the strategy selector when strategies are available", () => { @@ -60,7 +38,7 @@ describe("RouterSettingsForm", () => { availableRoutingStrategies: ["simple-shuffle", "latency-based-routing"], }; render(); - expect(screen.getByTestId("strategy-select")).toBeInTheDocument(); + expect(screen.getByRole("combobox")).toBeInTheDocument(); }); it("should not render LatencyBasedConfiguration for non-latency strategies", () => { @@ -97,7 +75,9 @@ describe("RouterSettingsForm", () => { }; render(); - await user.selectOptions(screen.getByTestId("strategy-select"), "latency-based-routing"); + await user.click(screen.getByRole("combobox")); + const option = await screen.findByRole("option", { name: /latency-based-routing/ }); + await user.click(option); expect(onChange).toHaveBeenCalledWith( expect.objectContaining({ selectedStrategy: "latency-based-routing" }) diff --git a/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.test.tsx b/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.test.tsx index 01f839681f1..c2c0d2de030 100644 --- a/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.test.tsx @@ -1,31 +1,8 @@ import { describe, it, expect, vi } from "vitest"; -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import RoutingStrategySelector from "./RoutingStrategySelector"; -// Ant Design's Select is complex to drive in JSDOM; swap it for a plain -// onChange(e.target.value)} - > - {children} - - - ), - { - Option: ({ value, children }: any) => ( - - ), - } - ), -})); - const baseProps = { selectedStrategy: null, availableStrategies: ["simple-shuffle", "latency-based-routing", "least-busy"], @@ -40,7 +17,7 @@ const baseProps = { describe("RoutingStrategySelector", () => { it("should render", () => { render(); - expect(screen.getByTestId("ant-select")).toBeInTheDocument(); + expect(screen.getByRole("combobox")).toBeInTheDocument(); }); it("should display default label when no metadata is provided", () => { @@ -63,23 +40,33 @@ describe("RoutingStrategySelector", () => { expect(screen.getByText("How to pick a deployment")).toBeInTheDocument(); }); - it("should render all available strategies as options", () => { + it("should render all available strategies as options", async () => { + const user = userEvent.setup(); render(); - expect(screen.getByText("simple-shuffle")).toBeInTheDocument(); - expect(screen.getByText("latency-based-routing")).toBeInTheDocument(); - expect(screen.getByText("least-busy")).toBeInTheDocument(); + await user.click(screen.getByRole("combobox")); + await waitFor(() => { + expect(screen.getByRole("option", { name: /simple-shuffle/ })).toBeInTheDocument(); + expect(screen.getByRole("option", { name: /latency-based-routing/ })).toBeInTheDocument(); + expect(screen.getByRole("option", { name: /least-busy/ })).toBeInTheDocument(); + }); }); - it("should display strategy descriptions alongside option labels", () => { + it("should display strategy descriptions alongside option labels", async () => { + const user = userEvent.setup(); render(); - expect(screen.getByText("Randomly pick a deployment")).toBeInTheDocument(); - expect(screen.getByText("Pick the lowest-latency deployment")).toBeInTheDocument(); + await user.click(screen.getByRole("combobox")); + expect(await screen.findByText("Randomly pick a deployment")).toBeInTheDocument(); + expect( + await screen.findByText("Pick the lowest-latency deployment"), + ).toBeInTheDocument(); }); - it("should not render a description for a strategy that has none", () => { + it("should not render a description for a strategy that has none", async () => { + const user = userEvent.setup(); render(); - // "least-busy" has no entry in routingStrategyDescriptions — it still renders without crashing - expect(screen.getByText("least-busy")).toBeInTheDocument(); + await user.click(screen.getByRole("combobox")); + // "least-busy" has no entry in routingStrategyDescriptions — it still renders without crashing. + expect(await screen.findByRole("option", { name: /least-busy/ })).toBeInTheDocument(); }); it("should call onStrategyChange with the selected strategy value", async () => { @@ -87,7 +74,9 @@ describe("RoutingStrategySelector", () => { const user = userEvent.setup(); render(); - await user.selectOptions(screen.getByTestId("strategy-select"), "latency-based-routing"); + await user.click(screen.getByRole("combobox")); + const option = await screen.findByRole("option", { name: /latency-based-routing/ }); + await user.click(option); expect(onStrategyChange).toHaveBeenCalledWith("latency-based-routing"); }); 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 80f0ed98c81..522ff47657c 100644 --- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx @@ -3,29 +3,6 @@ import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils" import userEvent from "@testing-library/user-event"; import RouterSettings from "./index"; -vi.mock("antd", async (importOriginal) => { - const actual = await importOriginal(); - return { - ...actual, - Select: Object.assign( - ({ value, onChange, children }: any) => ( - - ), - { - Option: ({ value, children }: any) => ( - - ), - } - ), - }; -}); - vi.mock("@/components/networking", () => ({ getCallbacksCall: vi.fn(), getRouterSettingsCall: vi.fn(), @@ -115,16 +92,19 @@ describe("RouterSettings", () => { }); it("should render routing strategies loaded from the API", async () => { + const user = userEvent.setup(); renderWithProviders(); - await waitFor(() => { - expect(screen.getByTestId("strategy-select")).toBeInTheDocument(); - }); + const combobox = await screen.findByRole("combobox"); + expect(combobox).toBeInTheDocument(); - const select = screen.getByTestId("strategy-select") as HTMLSelectElement; - const optionValues = Array.from(select.options).map((o) => o.value); - expect(optionValues).toContain("simple-shuffle"); - expect(optionValues).toContain("latency-based-routing"); + await user.click(combobox); + expect( + await screen.findByRole("option", { name: /simple-shuffle/ }), + ).toBeInTheDocument(); + expect( + await screen.findByRole("option", { name: /latency-based-routing/ }), + ).toBeInTheDocument(); }); it("should call setCallbacksCall with updated settings on Save Changes", async () => { @@ -132,9 +112,7 @@ describe("RouterSettings", () => { renderWithProviders(); // Wait for the strategy select to appear — it only renders after getRouterSettingsCall resolves - await waitFor(() => { - expect(screen.getByTestId("strategy-select")).toBeInTheDocument(); - }); + await screen.findByRole("combobox"); await user.click(screen.getByRole("button", { name: /save changes/i })); @@ -153,9 +131,7 @@ describe("RouterSettings", () => { renderWithProviders(); // Wait for data to load before interacting - await waitFor(() => { - expect(screen.getByTestId("strategy-select")).toBeInTheDocument(); - }); + await screen.findByRole("combobox"); await user.click(screen.getByRole("button", { name: /save changes/i })); expect(NotificationsManager.success).toHaveBeenCalledWith(