scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-14 23:21:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 102

chore(ui): repair failing vitest tests after shadcn migration (batch B)

Browse source 
Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-24 15:18:38 +00:00
parent bfbd51945c
commit 82fa819c50
No known key found for this signature in database
3 changed files with 44 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
View file

@ -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<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>
),
}
),
};
});
// 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(<RouterSettingsForm {...baseProps} />);
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(<RouterSettingsForm {...props} />);
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(<RouterSettingsForm {...props} />);
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" })

61
ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.test.tsx
View file

@ -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
// <select> so we can assert options and fire change events normally.
vi.mock("antd", () => ({
Select: Object.assign(
({ value, onChange, children }: any) => (
<div data-testid="ant-select">
<select
data-testid="strategy-select"
value={value ?? ""}
onChange={(e) => onChange(e.target.value)}
>
{children}
</select>
</div>
),
{
Option: ({ value, children }: any) => (
<option value={value}>{children}</option>
),
}
),
}));
const baseProps = {
selectedStrategy: null,
availableStrategies: ["simple-shuffle", "latency-based-routing", "least-busy"],
@ -40,7 +17,7 @@ const baseProps = {
describe("RoutingStrategySelector", () => {
it("should render", () => {
render(<RoutingStrategySelector {...baseProps} />);
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(<RoutingStrategySelector {...baseProps} />);
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(<RoutingStrategySelector {...baseProps} />);
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(<RoutingStrategySelector {...baseProps} />);
// "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(<RoutingStrategySelector {...baseProps} onStrategyChange={onStrategyChange} />);
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");
});

48
ui/litellm-dashboard/src/components/router_settings/index.test.tsx
View file

@ -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<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(),
getRouterSettingsCall: vi.fn(),
@ -115,16 +92,19 @@ describe("RouterSettings", () => {
});
it("should render routing strategies loaded from the API", async () => {
const user = userEvent.setup();
renderWithProviders(<RouterSettings {...defaultProps} />);
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(<RouterSettings {...defaultProps} />);
// 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(<RouterSettings {...defaultProps} />);
// 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(