scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

test(ui): drive fields with change events where the typing is not the behaviour (#37495)

Browse source 
user.type dispatches one event per character and re-renders the whole form on
each one, so a test that only needs a field to hold a value pays for every
keystroke. Where the value is all the test wants, fireEvent.change sets it in
one go.

Measured against a control on the same tree: the 100 converted files went from
654s to 619s of CPU, 5.4% cheaper, while the files nobody touched drifted 1.2%
the other way. Modest, and honest about it.

Rolled out one file at a time, running each before and after and keeping the
conversion only where the file stayed green. That rejected 35 files, all cases
where the keystrokes are the behaviour: Base UI comboboxes drive their filter
from real keyboard input and ignore a raw change event, and the same goes for
autocompletes, debounces and key handlers. Those keep user.type.
This commit is contained in:
yuneng-jiang 2026-08-19 12:11:37 -07:00 • committed by GitHub
parent 4d100bdd89
commit 4bb3152cc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
101 changed files with 503 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/litellm-dashboard/CLAUDE.md
View file

@ -16,6 +16,8 @@ Do not trust `eslint --fix` for these two plugins. Fixing the suite in bulk prod
`jest-dom/prefer-to-have-value` stays off because its fixer is wrong here, not merely noisy. It matches any attribute whose name contains "value", so it rewrites `toHaveAttribute("aria-valuenow", n)` into `toHaveValue(n)`, and jest-dom's `toHaveValue` only supports form controls, so the assertion fails on the `role="meter"` elements the dashboard renders. Assert ARIA value attributes with `toHaveAttribute`
Reach for `fireEvent.change` rather than `user.type` when a test only needs a field to hold a value. `user.type` dispatches one event per character and re-renders the whole form each time, which is why a single form test could burn seven seconds. Keep `user.type` where the typing itself is the behaviour under test: an autocomplete that filters per keystroke, a debounce, a key handler, or any Base UI combobox, whose filter state is driven by real keyboard input and does not react to a raw change event
A test may reach for a component library's own CSS class only when that library exposes no role, label, title or ARIA state to query instead, and then the line carries a suppression naming the rule and the reason. Check first: antd icons render as `role="img"` with an `aria-label`, and antd `Form.Item` associates its label with the control, so both are reachable accessibly. When a label does not resolve, suspect the control rather than the test, since a custom wrapper that destructures props without spreading them drops the `id` antd injects and leaves the rendered label pointing at nothing
Rules beyond the enabled set were measured against the whole suite and left off rather than recorded in a budget file, because a ceiling that permits a violation anywhere is worse than an honest gap. `no-node-access` and `no-container` are the ones worth revisiting first, since they catch the DOM archaeology the rules above only discourage. `prefer-implicit-assert` and `prefer-explicit-assert` contradict each other, so neither is enabled

4
ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { AccessGroupEditModal } from "./AccessGroupEditModal";
import { AccessGroupResponse } from "@/app/(dashboard)/hooks/accessGroups/useAccessGroups";
@ -117,7 +117,7 @@ describe("AccessGroupEditModal submit payload", () => {
const nameInput = await screen.findByDisplayValue("Engineering");
await user.clear(nameInput);
await user.type(nameInput, " Padded ");
fireEvent.change(nameInput, { target: { value: " Padded " } });
await save(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());

22
ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.test.tsx
View file

@ -1,4 +1,4 @@
import { renderWithProviders, screen, within } from "@/../tests/test-utils";
import { fireEvent, renderWithProviders, screen, within } from "@/../tests/test-utils";
import { waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -135,7 +135,9 @@ describe("AccessGroupsPage", () => {
it("filters by name", async () => {
const user = userEvent.setup();
renderWithProviders(<AccessGroupsPage />);
await user.type(screen.getByPlaceholderText("Search groups by name, ID, or description..."), "Admin");
fireEvent.change(screen.getByPlaceholderText("Search groups by name, ID, or description..."), {
target: { value: "Admin" },
});
expect(screen.getByText("Admin Group")).toBeInTheDocument();
expect(screen.queryByText("Read Only")).not.toBeInTheDocument();
});
@ -143,7 +145,9 @@ describe("AccessGroupsPage", () => {
it("filters by ID", async () => {
const user = userEvent.setup();
renderWithProviders(<AccessGroupsPage />);
await user.type(screen.getByPlaceholderText("Search groups by name, ID, or description..."), "ag-2");
fireEvent.change(screen.getByPlaceholderText("Search groups by name, ID, or description..."), {
target: { value: "ag-2" },
});
expect(screen.getByText("Read Only")).toBeInTheDocument();
expect(screen.queryByText("Admin Group")).not.toBeInTheDocument();
});
@ -151,7 +155,9 @@ describe("AccessGroupsPage", () => {
it("filters by description", async () => {
const user = userEvent.setup();
renderWithProviders(<AccessGroupsPage />);
await user.type(screen.getByPlaceholderText("Search groups by name, ID, or description..."), "read-only");
fireEvent.change(screen.getByPlaceholderText("Search groups by name, ID, or description..."), {
target: { value: "read-only" },
});
expect(screen.getByText("Read Only")).toBeInTheDocument();
expect(screen.queryByText("Admin Group")).not.toBeInTheDocument();
});
@ -159,7 +165,9 @@ describe("AccessGroupsPage", () => {
it("shows the filtered empty state when nothing matches", async () => {
const user = userEvent.setup();
renderWithProviders(<AccessGroupsPage />);
await user.type(screen.getByPlaceholderText("Search groups by name, ID, or description..."), "no-such-group");
fireEvent.change(screen.getByPlaceholderText("Search groups by name, ID, or description..."), {
target: { value: "no-such-group" },
});
expect(screen.getByText("No matching access groups")).toBeInTheDocument();
expect(screen.queryByText("Admin Group")).not.toBeInTheDocument();
});
@ -244,7 +252,9 @@ describe("AccessGroupsPage", () => {
expect(screen.queryByText("ag-01")).not.toBeInTheDocument();
// The only match lives on page 1, so the page index must reset or the table reads as empty.
await user.type(screen.getByPlaceholderText("Search groups by name, ID, or description..."), "ag-01");
fireEvent.change(screen.getByPlaceholderText("Search groups by name, ID, or description..."), {
target: { value: "ag-01" },
});
expect(await screen.findByText("ag-01")).toBeInTheDocument();
expect(screen.queryByText("No matching access groups")).not.toBeInTheDocument();
});

6
ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor, within } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import AdminPanel from "./AdminPanel";
@ -355,7 +355,7 @@ describe("AdminPanel add allowed IP form", () => {
it("sends the access token and the typed IP address", async () => {
const user = userEvent.setup();
await user.type(ipField(), "192.168.1.50");
fireEvent.change(ipField(), { target: { value: "192.168.1.50" } });
await submitAddIP(user);
await waitFor(() => {
@ -387,7 +387,7 @@ describe("AdminPanel add allowed IP form", () => {
const user = userEvent.setup();
mockGetAllowedIPs.mockResolvedValue(["10.0.0.1", "192.168.1.50"]);
await user.type(ipField(), "192.168.1.50");
fireEvent.change(ipField(), { target: { value: "192.168.1.50" } });
await submitAddIP(user);
expect(await screen.findByText("192.168.1.50")).toBeInTheDocument();

20
ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx
View file

@ -61,7 +61,9 @@ describe("AgentCardDiscovery", () => {
expect(screen.getByPlaceholderText("https://upstream-agent.example.com")).toBeInTheDocument();
await user.type(screen.getByPlaceholderText("https://upstream-agent.example.com"), "https://upstream.example.com");
fireEvent.change(screen.getByPlaceholderText("https://upstream-agent.example.com"), {
target: { value: "https://upstream.example.com" },
});
await vi.advanceTimersByTimeAsync(500);
await waitFor(() => expect(mockDiscover).toHaveBeenCalled());
@ -85,7 +87,9 @@ describe("AgentCardDiscovery", () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
renderWithProviders(<AgentCardDiscovery accessToken="tok" onApply={vi.fn()} />);
await user.type(screen.getByPlaceholderText("https://upstream-agent.example.com"), "https://upstream.example.com");
fireEvent.change(screen.getByPlaceholderText("https://upstream-agent.example.com"), {
target: { value: "https://upstream.example.com" },
});
await vi.advanceTimersByTimeAsync(500);
expect(await screen.findByText("Upstream card loaded")).toBeInTheDocument();
@ -101,7 +105,9 @@ describe("AgentCardDiscovery", () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
renderWithProviders(<AgentCardDiscovery accessToken="tok" onApply={vi.fn()} />);
await user.type(screen.getByPlaceholderText("https://upstream-agent.example.com"), "https://nope.example");
fireEvent.change(screen.getByPlaceholderText("https://upstream-agent.example.com"), {
target: { value: "https://nope.example" },
});
await vi.advanceTimersByTimeAsync(500);
expect(await screen.findByText("Discovery failed")).toBeInTheDocument();
@ -117,7 +123,9 @@ describe("AgentCardDiscovery", () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
renderWithProviders(<AgentCardDiscovery accessToken="tok" onApply={onApply} />);
await user.type(screen.getByPlaceholderText("https://upstream-agent.example.com"), "https://upstream.example.com");
fireEvent.change(screen.getByPlaceholderText("https://upstream-agent.example.com"), {
target: { value: "https://upstream.example.com" },
});
await vi.advanceTimersByTimeAsync(500);
await screen.findByText("Upstream card loaded");
@ -290,7 +298,9 @@ describe("AgentCardDiscovery", () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
renderWithProviders(<AgentCardDiscovery accessToken={null} onApply={vi.fn()} />);
await user.type(screen.getByPlaceholderText("https://upstream-agent.example.com"), "https://upstream.example.com");
fireEvent.change(screen.getByPlaceholderText("https://upstream-agent.example.com"), {
target: { value: "https://upstream.example.com" },
});
await user.click(screen.getByRole("button", { name: /discover/i }));
expect(await screen.findByText(/No access token available/i)).toBeInTheDocument();

6
ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.integration.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import AgentInfoView from "./agent_info";
@ -176,7 +176,7 @@ describe("AgentInfoView update payload", () => {
await openEditor(user);
await user.clear(screen.getByLabelText("TPM Limit"));
await user.type(screen.getByLabelText("TPM Limit"), "-5");
fireEvent.change(screen.getByLabelText("TPM Limit"), { target: { value: "-5" } });
await save(user);
expect(patchedPayload().tpm_limit).toBe(0);
@ -222,7 +222,7 @@ describe("AgentInfoView update payload", () => {
await openEditor(user);
await user.clear(screen.getByLabelText("API Base"));
await user.type(screen.getByLabelText("API Base"), "https://other.example.com");
fireEvent.change(screen.getByLabelText("API Base"), { target: { value: "https://other.example.com" } });
await save(user);

30
ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_modal.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -39,9 +39,9 @@ describe("BudgetModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Budget ID"), "budget-alpha");
await user.type(screen.getByLabelText("Max Tokens per minute"), "500.567");
await user.type(screen.getByLabelText("Max Requests per minute"), "7");
fireEvent.change(screen.getByLabelText("Budget ID"), { target: { value: "budget-alpha" } });
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "500.567" } });
fireEvent.change(screen.getByLabelText("Max Requests per minute"), { target: { value: "7" } });
await create(user);
await waitFor(() => expect(createMock).toHaveBeenCalledTimes(1));
@ -56,12 +56,12 @@ describe("BudgetModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Budget ID"), "budget-alpha");
await user.type(screen.getByLabelText("Max Tokens per minute"), "500.567");
await user.type(screen.getByLabelText("Max Requests per minute"), "7");
fireEvent.change(screen.getByLabelText("Budget ID"), { target: { value: "budget-alpha" } });
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "500.567" } });
fireEvent.change(screen.getByLabelText("Max Requests per minute"), { target: { value: "7" } });
await openOptionalSettings(user);
await user.type(screen.getByLabelText("Max Budget (USD)"), "42.567");
fireEvent.change(screen.getByLabelText("Max Budget (USD)"), { target: { value: "42.567" } });
await user.click(screen.getByRole("combobox"));
await user.click(await screen.findByText("monthly"));
@ -76,10 +76,10 @@ describe("BudgetModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Budget ID"), "budget-alpha");
fireEvent.change(screen.getByLabelText("Budget ID"), { target: { value: "budget-alpha" } });
await openOptionalSettings(user);
await user.type(screen.getByLabelText("Max Budget (USD)"), "42.567");
fireEvent.change(screen.getByLabelText("Max Budget (USD)"), { target: { value: "42.567" } });
await user.click(screen.getByRole("combobox"));
await user.click(await screen.findByText("monthly"));
@ -95,8 +95,8 @@ describe("BudgetModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Budget ID"), "budget-alpha");
await user.type(screen.getByLabelText("Max Tokens per minute"), "5");
fireEvent.change(screen.getByLabelText("Budget ID"), { target: { value: "budget-alpha" } });
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "5" } });
await user.clear(screen.getByLabelText("Max Tokens per minute"));
await create(user);
@ -111,7 +111,7 @@ describe("BudgetModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Max Tokens per minute"), "5");
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "5" } });
await create(user);
await waitFor(() => expect(screen.getByLabelText("Budget ID")).toHaveAttribute("aria-invalid", "true"));
@ -121,10 +121,10 @@ describe("BudgetModal", () => {
it("keeps a typed Optional Setting when the section is collapsed and reopened, as antd's store did", async () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Budget ID"), "probe-budget");
fireEvent.change(screen.getByLabelText("Budget ID"), { target: { value: "probe-budget" } });
await openOptionalSettings(user);
await user.type(screen.getByLabelText("Max Budget (USD)"), "42.5");
fireEvent.change(screen.getByLabelText("Max Budget (USD)"), { target: { value: "42.5" } });
await user.click(screen.getByText("Optional Settings"));
await user.click(screen.getByText("Optional Settings"));

14
ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -113,7 +113,7 @@ describe("Budget Panel", () => {
renderPanel();
await waitFor(() => expect(getMock).toHaveBeenCalled());
await user.type(screen.getByTestId("datatable-search"), "ecc");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "ecc" } });
await waitFor(() => expect(lastQuery().q).toBe("ecc"));
expect(queries().some((query) => query.q === "e" || query.q === "ec")).toBe(false);
});
@ -153,8 +153,8 @@ describe("Budget Panel", () => {
await waitFor(() => expect(getMock).toHaveBeenCalled());
await openFilters(user);
await user.type(screen.getByTestId("budget-filter-max-budget-min"), "10");
await user.type(screen.getByTestId("budget-filter-max-budget-max"), "500");
fireEvent.change(screen.getByTestId("budget-filter-max-budget-min"), { target: { value: "10" } });
fireEvent.change(screen.getByTestId("budget-filter-max-budget-max"), { target: { value: "500" } });
await user.click(screen.getByTestId("filter-drawer-apply"));
await waitFor(() => expect(lastQuery()["filter[max_budget][gte]"]).toBe("10"));
@ -171,7 +171,7 @@ describe("Budget Panel", () => {
await waitFor(() => expect(getMock).toHaveBeenCalled());
await openFilters(user);
await user.type(screen.getByTestId("budget-filter-max-budget-min"), "10");
fireEvent.change(screen.getByTestId("budget-filter-max-budget-min"), { target: { value: "10" } });
await user.click(screen.getByTestId("budget-filter-max-budget-unlimited"));
await user.click(screen.getByTestId("filter-drawer-apply"));
@ -185,8 +185,8 @@ describe("Budget Panel", () => {
await waitFor(() => expect(getMock).toHaveBeenCalled());
await openFilters(user);
await user.type(screen.getByTestId("budget-filter-created-from"), "2026-01-05");
await user.type(screen.getByTestId("budget-filter-created-to"), "2026-01-06");
fireEvent.change(screen.getByTestId("budget-filter-created-from"), { target: { value: "2026-01-05" } });
fireEvent.change(screen.getByTestId("budget-filter-created-to"), { target: { value: "2026-01-06" } });
await user.click(screen.getByTestId("filter-drawer-apply"));
await waitFor(() =>

12
ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -49,7 +49,7 @@ describe("EditBudgetModal", () => {
renderModal();
await user.clear(screen.getByLabelText("Max Tokens per minute"));
await user.type(screen.getByLabelText("Max Tokens per minute"), "500.567");
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "500.567" } });
await save(user);
await waitFor(() => expect(updateMock).toHaveBeenCalledTimes(1));
@ -65,13 +65,13 @@ describe("EditBudgetModal", () => {
renderModal();
await user.clear(screen.getByLabelText("Max Tokens per minute"));
await user.type(screen.getByLabelText("Max Tokens per minute"), "500.567");
fireEvent.change(screen.getByLabelText("Max Tokens per minute"), { target: { value: "500.567" } });
await user.clear(screen.getByLabelText("Max Requests per minute"));
await user.type(screen.getByLabelText("Max Requests per minute"), "7");
fireEvent.change(screen.getByLabelText("Max Requests per minute"), { target: { value: "7" } });
await openOptionalSettings(user);
await user.clear(screen.getByLabelText("Max Budget (USD)"));
await user.type(screen.getByLabelText("Max Budget (USD)"), "42.567");
fireEvent.change(screen.getByLabelText("Max Budget (USD)"), { target: { value: "42.567" } });
await user.click(screen.getByRole("combobox"));
await user.click(await screen.findByText("monthly"));
@ -97,7 +97,7 @@ describe("EditBudgetModal", () => {
await openOptionalSettings(user);
const maxBudget = screen.getByLabelText("Max Budget (USD)");
await user.clear(maxBudget);
await user.type(maxBudget, "99.25");
fireEvent.change(maxBudget, { target: { value: "99.25" } });
await user.click(screen.getByText("Optional Settings"));
await user.click(screen.getByText("Optional Settings"));

8
ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CacheSettings from "./index";
@ -99,7 +99,7 @@ describe("CacheSettings advanced settings round-trip", () => {
await screen.findByText("Connection Settings");
await user.click(screen.getByText("Advanced Settings"));
await user.type(await screen.findByLabelText("Namespace"), "typed-ns");
fireEvent.change(await screen.findByLabelText("Namespace"), { target: { value: "typed-ns" } });
await user.click(screen.getByText("Advanced Settings"));
await waitFor(() => expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument());
@ -116,7 +116,7 @@ describe("CacheSettings advanced settings round-trip", () => {
await screen.findByText("Connection Settings");
await user.click(screen.getByText("Advanced Settings"));
await user.type(await screen.findByLabelText("Namespace"), "typed-ns");
fireEvent.change(await screen.findByLabelText("Namespace"), { target: { value: "typed-ns" } });
await user.click(screen.getByText("Advanced Settings"));
await waitFor(() => expect(screen.queryByLabelText("Namespace")).not.toBeInTheDocument());
await user.click(screen.getByText("Advanced Settings"));
@ -145,7 +145,7 @@ describe("CacheSettings advanced settings round-trip", () => {
await screen.findByText("Connection Settings");
await user.click(screen.getByText("Advanced Settings"));
await user.type(await screen.findByLabelText("TTL (seconds)"), "not-a-number");
fireEvent.change(await screen.findByLabelText("TTL (seconds)"), { target: { value: "not-a-number" } });
await user.click(screen.getByText("Advanced Settings"));
await waitFor(() => expect(screen.queryByLabelText("TTL (seconds)")).not.toBeInTheDocument());

14
ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CacheSettings from "./index";
@ -79,7 +79,7 @@ describe("CacheSettings", () => {
const port = await screen.findByLabelText("Port");
await user.clear(port);
await user.type(port, "99999");
fireEvent.change(port, { target: { value: "99999" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
expect(await screen.findByText(/Port must be an integer between 1 and 65535/i)).toBeInTheDocument();
@ -92,7 +92,7 @@ describe("CacheSettings", () => {
renderSettings();
const startupNodes = await screen.findByLabelText("Startup Nodes");
await user.type(startupNodes, "not json");
fireEvent.change(startupNodes, { target: { value: "not json" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
expect(await screen.findByText(/Must be a valid JSON array/i)).toBeInTheDocument();
@ -104,7 +104,7 @@ describe("CacheSettings", () => {
renderSettings();
const db = await screen.findByLabelText("Database Index");
await user.type(db, "redis://host:6379/1");
fireEvent.change(db, { target: { value: "redis://host:6379/1" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
expect(await screen.findByText(/Must be a non-negative integer/i)).toBeInTheDocument();
@ -118,7 +118,7 @@ describe("CacheSettings", () => {
renderSettings();
const host = await screen.findByLabelText("Host");
await user.type(host, "localhost");
fireEvent.change(host, { target: { value: "localhost" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
await waitFor(() =>
@ -136,8 +136,8 @@ describe("CacheSettings", () => {
const user = userEvent.setup();
renderSettings();
await user.type(await screen.findByLabelText("Redis URL"), "redis://host:6379/1");
await user.type(await screen.findByLabelText("Database Index"), "2");
fireEvent.change(await screen.findByLabelText("Redis URL"), { target: { value: "redis://host:6379/1" } });
fireEvent.change(await screen.findByLabelText("Database Index"), { target: { value: "2" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalled());

6
ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import userEvent from "@testing-library/user-event";
import CoordinationRedisSettings from "./index";
@ -53,7 +53,7 @@ describe("CoordinationRedisSettings value retention across redis types", () => {
await screen.findByLabelText("Host");
await pickRedisType(user, /sentinel/i);
await user.type(await screen.findByLabelText("Service Name"), "mymaster");
fireEvent.change(await screen.findByLabelText("Service Name"), { target: { value: "mymaster" } });
await pickRedisType(user, /node/i);
await waitFor(() => expect(screen.queryByLabelText("Service Name")).not.toBeInTheDocument());
@ -69,7 +69,7 @@ describe("CoordinationRedisSettings value retention across redis types", () => {
await screen.findByLabelText("Host");
await pickRedisType(user, /sentinel/i);
await user.type(await screen.findByLabelText("Service Name"), "mymaster");
fireEvent.change(await screen.findByLabelText("Service Name"), { target: { value: "mymaster" } });
await pickRedisType(user, /node/i);
await waitFor(() => expect(screen.queryByLabelText("Service Name")).not.toBeInTheDocument());

18
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -27,8 +27,10 @@ describe("PromptCompressionTab submit payload", () => {
const user = userEvent.setup();
render(<PromptCompressionTab accessToken="test-token" />);
await user.type(screen.getByLabelText("Name"), " headroom-compression ");
await user.type(screen.getByLabelText("Headroom API base"), " https://headroom.example.com ");
fireEvent.change(screen.getByLabelText("Name"), { target: { value: " headroom-compression " } });
fireEvent.change(screen.getByLabelText("Headroom API base"), {
target: { value: " https://headroom.example.com " },
});
await user.click(screen.getByRole("button", { name: "Add guardrail" }));
await vi.waitFor(() =>
@ -49,8 +51,8 @@ describe("PromptCompressionTab submit payload", () => {
const user = userEvent.setup();
render(<PromptCompressionTab accessToken="test-token" />);
await user.type(screen.getByLabelText("Name"), "headroom-optin");
await user.type(screen.getByLabelText("Headroom API base"), "https://headroom.example.com");
fireEvent.change(screen.getByLabelText("Name"), { target: { value: "headroom-optin" } });
fireEvent.change(screen.getByLabelText("Headroom API base"), { target: { value: "https://headroom.example.com" } });
await user.click(screen.getByLabelText("Apply to all requests"));
await user.click(screen.getByRole("button", { name: "Add guardrail" }));
@ -82,7 +84,7 @@ describe("PromptCompressionTab submit payload", () => {
const user = userEvent.setup();
render(<PromptCompressionTab accessToken="test-token" />);
await user.type(screen.getByLabelText("Name"), "headroom-compression");
fireEvent.change(screen.getByLabelText("Name"), { target: { value: "headroom-compression" } });
await user.type(screen.getByLabelText("Headroom API base"), "https://headroom.example.com{Enter}");
await vi.waitFor(() => expect(createGuardrailCall).toHaveBeenCalledTimes(1));
@ -92,8 +94,8 @@ describe("PromptCompressionTab submit payload", () => {
const user = userEvent.setup();
render(<PromptCompressionTab accessToken="test-token" />);
await user.type(screen.getByLabelText("Name"), "headroom-compression");
await user.type(screen.getByLabelText("Headroom API base"), "https://headroom.example.com");
fireEvent.change(screen.getByLabelText("Name"), { target: { value: "headroom-compression" } });
fireEvent.change(screen.getByLabelText("Headroom API base"), { target: { value: "https://headroom.example.com" } });
await user.click(screen.getByLabelText("Apply to all requests"));
await user.click(screen.getByRole("button", { name: "Add guardrail" }));

6
ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../../../../tests/test-utils";
import CostTrackingSettings from "./cost_tracking_settings";
@ -87,7 +87,7 @@ describe("CostTrackingSettings submit paths", () => {
await user.click(screen.getAllByRole("combobox")[0]);
await user.click((await screen.findAllByRole("option"))[0]);
await user.type(screen.getByLabelText(/Discount Percentage/i), "5");
fireEvent.change(screen.getByLabelText(/Discount Percentage/i), { target: { value: "5" } });
await user.click(submitDiscount());
await waitFor(() => expect(stableDiscountCallbacks.handleAddProvider).toHaveBeenCalled());
@ -105,7 +105,7 @@ describe("CostTrackingSettings submit paths", () => {
await user.click(screen.getAllByRole("combobox")[0]);
await user.click((await screen.findAllByRole("option"))[0]);
await user.type(screen.getByLabelText(/Margin Percentage/i), "10");
fireEvent.change(screen.getByLabelText(/Margin Percentage/i), { target: { value: "10" } });
const submit = screen
.getAllByRole("button")

14
ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen } from "@testing-library/react";
import { fireEvent, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../../../../tests/test-utils";
import HowItWorks from "./how_it_works";
@ -52,7 +52,7 @@ describe("HowItWorks", () => {
renderWithProviders(<HowItWorks />);
const responseCostInput = screen.getByPlaceholderText("0.0171938125");
await user.type(responseCostInput, "0.01");
fireEvent.change(responseCostInput, { target: { value: "0.01" } });
expect(screen.queryByText("Calculated Results")).not.toBeInTheDocument();
});
@ -62,7 +62,7 @@ describe("HowItWorks", () => {
renderWithProviders(<HowItWorks />);
const discountAmountInput = screen.getByPlaceholderText("0.0009049375");
await user.type(discountAmountInput, "0.001");
fireEvent.change(discountAmountInput, { target: { value: "0.001" } });
expect(screen.queryByText("Calculated Results")).not.toBeInTheDocument();
});
@ -74,8 +74,8 @@ describe("HowItWorks", () => {
const responseCostInput = screen.getByPlaceholderText("0.0171938125");
const discountAmountInput = screen.getByPlaceholderText("0.0009049375");
await user.type(responseCostInput, "0.0171938125");
await user.type(discountAmountInput, "0.0009049375");
fireEvent.change(responseCostInput, { target: { value: "0.0171938125" } });
fireEvent.change(discountAmountInput, { target: { value: "0.0009049375" } });
expect(await screen.findByText("Calculated Results")).toBeInTheDocument();
});
@ -84,8 +84,8 @@ describe("HowItWorks", () => {
const user = userEvent.setup();
renderWithProviders(<HowItWorks />);
await user.type(screen.getByPlaceholderText("0.0171938125"), "0.0171938125");
await user.type(screen.getByPlaceholderText("0.0009049375"), "0.0009049375");
fireEvent.change(screen.getByPlaceholderText("0.0171938125"), { target: { value: "0.0171938125" } });
fireEvent.change(screen.getByPlaceholderText("0.0009049375"), { target: { value: "0.0009049375" } });
expect(await screen.findByText("Original Cost:")).toBeInTheDocument();
expect(screen.getByText("Final Cost:")).toBeInTheDocument();

6
ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_discount_table.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen } from "@testing-library/react";
import { fireEvent, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../../../../tests/test-utils";
import ProviderDiscountTable from "./provider_discount_table";
@ -159,7 +159,7 @@ describe("ProviderDiscountTable", () => {
const input = screen.getByPlaceholderText("5");
await user.clear(input);
await user.type(input, "10");
fireEvent.change(input, { target: { value: "10" } });
await user.click(rowAction("save"));
@ -268,7 +268,7 @@ describe("ProviderDiscountTable", () => {
await user.click(rowAction("edit"));
const input = screen.getByPlaceholderText("5");
await user.clear(input);
await user.type(input, "150");
fireEvent.change(input, { target: { value: "150" } });
await user.click(rowAction("save"));
expect(onDiscountChange).not.toHaveBeenCalled();

10
ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen } from "@testing-library/react";
import { fireEvent, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../../../../tests/test-utils";
import ProviderMarginTable from "./provider_margin_table";
@ -188,7 +188,7 @@ describe("ProviderMarginTable", () => {
const percentInput = screen.getByPlaceholderText("10");
await user.clear(percentInput);
await user.type(percentInput, "20");
fireEvent.change(percentInput, { target: { value: "20" } });
await user.click(rowAction("save"));
@ -208,7 +208,7 @@ describe("ProviderMarginTable", () => {
await user.click(rowAction("edit"));
await user.clear(screen.getByPlaceholderText("10"));
await user.type(screen.getByPlaceholderText("0.001"), "0.002");
fireEvent.change(screen.getByPlaceholderText("0.001"), { target: { value: "0.002" } });
await user.click(rowAction("save"));
@ -316,10 +316,10 @@ describe("ProviderMarginTable", () => {
const percentInput = screen.getByPlaceholderText("10");
await user.clear(percentInput);
await user.type(percentInput, "5");
fireEvent.change(percentInput, { target: { value: "5" } });
const fixedInput = screen.getByPlaceholderText("0.001");
await user.type(fixedInput, "0.002");
fireEvent.change(fixedInput, { target: { value: "0.002" } });
await user.click(rowAction("save"));

4
ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent from "@testing-library/user-event";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { EvaluationSettingsModal } from "./EvaluationSettingsModal";
const mockFetchAvailableModels = vi.fn();
@ -60,7 +60,7 @@ describe("EvaluationSettingsModal", () => {
const promptBox = screen.getByDisplayValue(/Evaluate whether this guardrail's decision was correct/);
await user.clear(promptBox);
await user.type(promptBox, "custom prompt");
fireEvent.change(promptBox, { target: { value: "custom prompt" } });
expect(screen.getByDisplayValue("custom prompt")).toBeInTheDocument();
await user.click(screen.getByText("Reset to default"));

4
ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CustomPatternModal.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CustomPatternModal from "./CustomPatternModal";
@ -42,7 +42,7 @@ describe("CustomPatternModal", () => {
// Find and fill the pattern name input
const nameInput = screen.getByPlaceholderText("e.g., internal_id, employee_code");
await user.type(nameInput, "employee_id");
fireEvent.change(nameInput, { target: { value: "employee_id" } });
// Find and fill the regex pattern input - use paste instead of type to avoid special char issues
const regexInput = screen.getByPlaceholderText("e.g., ID-[0-9]{6}");

10
ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx
View file

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import KeywordModal from "./KeywordModal";
@ -35,7 +35,9 @@ describe("KeywordModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(await screen.findByPlaceholderText("Enter sensitive keyword or phrase"), "s");
fireEvent.change(await screen.findByPlaceholderText("Enter sensitive keyword or phrase"), {
target: { value: "s" },
});
expect(handlers.onKeywordChange).toHaveBeenCalledWith("s");
});
@ -44,7 +46,9 @@ describe("KeywordModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(await screen.findByPlaceholderText("Explain why this keyword is sensitive"), "x");
fireEvent.change(await screen.findByPlaceholderText("Explain why this keyword is sensitive"), {
target: { value: "x" },
});
expect(handlers.onDescriptionChange).toHaveBeenCalledWith("x");
});

6
ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx
View file

@ -1,5 +1,5 @@
import { useState } from "react";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -43,7 +43,7 @@ describe("ThresholdInput", () => {
await user.clear(input);
expect(onValueChange).toHaveBeenLastCalledWith(null);
await user.type(input, "0.55");
fireEvent.change(input, { target: { value: "0.55" } });
expect(onValueChange).toHaveBeenLastCalledWith(0.55);
});
@ -54,7 +54,7 @@ describe("ThresholdInput", () => {
const input = screen.getByRole("spinbutton");
await user.clear(input);
await user.type(input, "5");
fireEvent.change(input, { target: { value: "5" } });
await user.tab();
expect(onValueChange).toHaveBeenLastCalledWith(1);

133
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.integration.test.tsx
View file

@ -266,11 +266,11 @@ describe("CreateMCPServer", () => {
// Fill in server name (use id to avoid duplicate placeholder)
const nameInput = getServerNameInput();
await user.type(nameInput, "Test_Server");
fireEvent.change(nameInput, { target: { value: "Test_Server" } });
// Fill in URL
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
// Select API Key auth type
await selectAntOption("Authentication", "API Key");
@ -310,10 +310,10 @@ describe("CreateMCPServer", () => {
const user = userEvent.setup({ delay: null });
const nameInput = getServerNameInput();
await user.type(nameInput, "Test_Server");
fireEvent.change(nameInput, { target: { value: "Test_Server" } });
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
await selectAntOption("Authentication", "Bearer Token");
@ -351,10 +351,10 @@ describe("CreateMCPServer", () => {
const user = userEvent.setup({ delay: null });
const nameInput = getServerNameInput();
await user.type(nameInput, "My_Server");
fireEvent.change(nameInput, { target: { value: "My_Server" } });
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
await selectAntOption("Authentication", "API Key");
@ -364,7 +364,7 @@ describe("CreateMCPServer", () => {
// Fill in auth value
const authInput = screen.getByPlaceholderText("Enter token or secret");
await user.type(authInput, "my-secret-key");
fireEvent.change(authInput, { target: { value: "my-secret-key" } });
vi.mocked(networking.createMCPServer).mockResolvedValue({
server_id: "new-server-1",
@ -397,8 +397,10 @@ describe("CreateMCPServer", () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "PT_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "PT_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "True Passthrough (no LiteLLM auth)");
@ -423,8 +425,10 @@ describe("CreateMCPServer", () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "CF_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "CF_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", optionLabel);
@ -487,19 +491,22 @@ describe("CreateMCPServer", () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "CF_App_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "CF_App_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", optionLabel);
// Admin declares the org's pre-registered upstream app; unlike the browser-authorized
// token, this is config and must survive onto the server row so internal users'
// Tools-page Authorize relays through it (required for non-DCR upstreams like Slack).
await user.type(
screen.getByPlaceholderText("Leave blank to use dynamic client registration"),
"org-app-client-id",
);
await user.type(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), "org-app-secret");
fireEvent.change(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), {
target: { value: "org-app-client-id" },
});
fireEvent.change(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), {
target: { value: "org-app-secret" },
});
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
await act(async () => {
@ -548,16 +555,19 @@ describe("CreateMCPServer", () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "CF_Keep_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "CF_Keep_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "True Passthrough (no LiteLLM auth)");
await user.type(
screen.getByPlaceholderText("Leave blank to use dynamic client registration"),
"org-app-client-id",
);
await user.type(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), "org-app-secret");
fireEvent.change(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), {
target: { value: "org-app-client-id" },
});
fireEvent.change(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), {
target: { value: "org-app-secret" },
});
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
await act(async () => {
@ -605,8 +615,10 @@ describe("CreateMCPServer", () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "Switch_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "Switch_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "OAuth");
@ -653,8 +665,10 @@ describe("CreateMCPServer", () => {
it("keeps the DCR-minted client out of form.credentials but reuses it via getCredentials", async () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "DCR_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "DCR_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "OAuth");
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
@ -678,8 +692,10 @@ describe("CreateMCPServer", () => {
await selectAntOption("Transport Type", "Streamable HTTP");
expect(await screen.findByPlaceholderText("https://your-mcp-server.com")).toBeInTheDocument();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "Leak_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "Leak_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "OAuth");
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
@ -705,8 +721,10 @@ describe("CreateMCPServer", () => {
it("persists the DCR client on an oauth2 submit via the ref", async () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "DCR_Submit_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "DCR_Submit_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "OAuth");
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
@ -823,10 +841,14 @@ describe("CreateMCPServer", () => {
it("keeps the typed app but warns when the URL changes after a client-forwarded authorize", async () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "CF_Warn");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "CF_Warn" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "True Passthrough (no LiteLLM auth)");
await user.type(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), "app-id");
fireEvent.change(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), {
target: { value: "app-id" },
});
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
await act(async () => {
@ -845,12 +867,17 @@ describe("CreateMCPServer", () => {
it("keeps client_secret when only client_id is edited after a client-forwarded authorize", async () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "CF_Keystroke");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "CF_Keystroke" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "True Passthrough (no LiteLLM auth)");
await user.type(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), "app-id");
await user.type(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), "app-secret");
fireEvent.change(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), {
target: { value: "app-id" },
});
fireEvent.change(screen.getByPlaceholderText("Leave blank for public clients / PKCE"), {
target: { value: "app-secret" },
});
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
await act(async () => {
@ -859,7 +886,9 @@ describe("CreateMCPServer", () => {
// Editing only client_id fires an invalidation whose changedValues carries only the client_id
// sub-field; the preserve + deep-merge re-apply must keep client_secret from being dropped.
await user.type(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), "2");
fireEvent.change(screen.getByPlaceholderText("Leave blank to use dynamic client registration"), {
target: { value: "app-id2" },
});
const cfKeystrokeServer = {
server_id: "cf-keystroke",
@ -886,8 +915,10 @@ describe("CreateMCPServer", () => {
it("replaces the token set on re-authorize instead of leaving stale siblings", async () => {
await selectHttpTransport();
const user = userEvent.setup({ delay: null });
await user.type(getServerNameInput(), "Reauth_Server");
await user.type(screen.getByPlaceholderText("https://your-mcp-server.com"), "https://example.com/mcp");
fireEvent.change(getServerNameInput(), { target: { value: "Reauth_Server" } });
fireEvent.change(screen.getByPlaceholderText("https://your-mcp-server.com"), {
target: { value: "https://example.com/mcp" },
});
await selectAntOption("Authentication", "OAuth");
await waitFor(() => expect(oauthHook.onTokenReceived).toBeTruthy());
@ -922,10 +953,10 @@ describe("CreateMCPServer", () => {
const user = userEvent.setup({ delay: null });
const nameInput = getServerNameInput();
await user.type(nameInput, "No_Auth_Server");
fireEvent.change(nameInput, { target: { value: "No_Auth_Server" } });
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
await selectAntOption("Authentication", "None");
@ -1001,15 +1032,15 @@ describe("CreateMCPServer", () => {
const user = userEvent.setup({ delay: null });
const nameInput = getServerNameInput();
await user.type(nameInput, "Limited_Server");
fireEvent.change(nameInput, { target: { value: "Limited_Server" } });
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
await selectAntOption("Authentication", "None");
const limitInput = screen.getByPlaceholderText("e.g. 10");
await user.type(limitInput, "5");
fireEvent.change(limitInput, { target: { value: "5" } });
vi.mocked(networking.createMCPServer).mockResolvedValue({
server_id: "new-server-1",
@ -1265,10 +1296,10 @@ describe("CreateMCPServer", () => {
const user = userEvent.setup({ delay: null });
const nameInput = getServerNameInput();
await user.type(nameInput, "Locked_Down_Server");
fireEvent.change(nameInput, { target: { value: "Locked_Down_Server" } });
const urlInput = screen.getByPlaceholderText("https://your-mcp-server.com");
await user.type(urlInput, "https://example.com/mcp");
fireEvent.change(urlInput, { target: { value: "https://example.com/mcp" } });
await selectAntOption("Authentication", "None");

16
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.integration.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, waitFor, within } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@ -68,8 +68,10 @@ describe("MCPToolsetsTab create/edit toolset form", () => {
renderTab();
const dialog = await openCreate(user);
await user.type(dialog.getByPlaceholderText("e.g. github-linear-tools"), "github-linear-tools");
await user.type(dialog.getByPlaceholderText("Optional description"), "tools for triage");
fireEvent.change(dialog.getByPlaceholderText("e.g. github-linear-tools"), {
target: { value: "github-linear-tools" },
});
fireEvent.change(dialog.getByPlaceholderText("Optional description"), { target: { value: "tools for triage" } });
await user.click(dialog.getByRole("button", { name: "Create Toolset" }));
await waitFor(() => {
@ -90,7 +92,7 @@ describe("MCPToolsetsTab create/edit toolset form", () => {
renderTab();
const dialog = await openCreate(user);
await user.type(dialog.getByPlaceholderText("e.g. github-linear-tools"), "solo");
fireEvent.change(dialog.getByPlaceholderText("e.g. github-linear-tools"), { target: { value: "solo" } });
await user.click(dialog.getByRole("button", { name: "Create Toolset" }));
await waitFor(() => {
@ -121,8 +123,8 @@ describe("MCPToolsetsTab create/edit toolset form", () => {
renderTab();
const dialog = await openCreate(user);
await user.type(dialog.getByPlaceholderText("e.g. github-linear-tools"), "spaced");
await user.type(dialog.getByPlaceholderText("Optional description"), " ");
fireEvent.change(dialog.getByPlaceholderText("e.g. github-linear-tools"), { target: { value: "spaced" } });
fireEvent.change(dialog.getByPlaceholderText("Optional description"), { target: { value: " " } });
await user.click(dialog.getByRole("button", { name: "Create Toolset" }));
await waitFor(() => {
@ -154,7 +156,7 @@ describe("MCPToolsetsTab create/edit toolset form", () => {
expect(dialog.getByPlaceholderText("Optional description")).toHaveValue("old description");
await user.clear(name);
await user.type(name, "renamed");
fireEvent.change(name, { target: { value: "renamed" } });
await user.click(dialog.getByRole("button", { name: "Save Changes" }));
const expectedUpdate = {

16
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.integration.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@ -56,8 +56,8 @@ describe("UserEnvVarsModal", () => {
]),
);
await user.type(await fieldAfterOpen(/^API_KEY/), " secret-value ");
await user.type(screen.getByLabelText(/^REGION/), "us-east-1");
fireEvent.change(await fieldAfterOpen(/^API_KEY/), { target: { value: " secret-value " } });
fireEvent.change(screen.getByLabelText(/^REGION/), { target: { value: "us-east-1" } });
await save(user);
await waitFor(() => {
@ -79,7 +79,7 @@ describe("UserEnvVarsModal", () => {
]),
);
await user.type(await fieldAfterOpen(/^REGION/), "eu-west-2");
fireEvent.change(await fieldAfterOpen(/^REGION/), { target: { value: "eu-west-2" } });
await save(user);
await waitFor(() => {
@ -145,7 +145,7 @@ describe("UserEnvVarsModal", () => {
const input = await fieldAfterOpen(/^API_KEY/);
expect(input).toHaveAttribute("type", "password");
await user.type(input, "hunter2");
fireEvent.change(input, { target: { value: "hunter2" } });
expect(screen.getByLabelText(/^API_KEY/)).toHaveAttribute("type", "password");
});
@ -162,7 +162,7 @@ describe("UserEnvVarsModal", () => {
vi.mocked(networking.storeMCPUserEnvVars).mockResolvedValue(saved);
const { onSaved, onClose } = renderModal(statusWith([{ name: "API_KEY", description: null, is_set: false }]));
await user.type(await fieldAfterOpen(/^API_KEY/), "abc");
fireEvent.change(await fieldAfterOpen(/^API_KEY/), { target: { value: "abc" } });
await save(user);
await waitFor(() => {
@ -175,7 +175,7 @@ describe("UserEnvVarsModal", () => {
const user = setup();
renderModal(statusWith([{ name: "API_KEY", description: null, is_set: false }]));
await user.type(await fieldAfterOpen(/^API_KEY/), "hunter2");
fireEvent.change(await fieldAfterOpen(/^API_KEY/), { target: { value: "hunter2" } });
await user.click(screen.getByRole("button", { name: "Show password" }));
expect(screen.getByLabelText(/^API_KEY/)).toHaveAttribute("type", "text");
expect(screen.getByLabelText(/^API_KEY/)).toHaveValue("hunter2");
@ -199,7 +199,7 @@ describe("UserEnvVarsModal", () => {
vi.mocked(networking.storeMCPUserEnvVars).mockRejectedValue(new Error("boom"));
const { onSaved, onClose } = renderModal(statusWith([{ name: "API_KEY", description: null, is_set: false }]));
await user.type(await fieldAfterOpen(/^API_KEY/), "abc");
fireEvent.change(await fieldAfterOpen(/^API_KEY/), { target: { value: "abc" } });
await save(user);
await waitFor(() => {

4
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import MCPDiscovery from "./mcp_discovery";
@ -70,7 +70,7 @@ describe("MCPDiscovery", () => {
render(<MCPDiscovery {...defaultProps} />);
await screen.findByText("GitHub");
await userEvent.type(screen.getByPlaceholderText("Search servers..."), "chat");
fireEvent.change(screen.getByPlaceholderText("Search servers..."), { target: { value: "chat" } });
await waitFor(() => expect(screen.queryByText("GitHub")).not.toBeInTheDocument());
expect(screen.getByText("Slack")).toBeInTheDocument();

6
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi } from "vitest";
import MCPServerCostConfig from "./mcp_server_cost_config";
@ -20,7 +20,7 @@ describe("MCPServerCostConfig", () => {
const onChange = vi.fn();
render(<MCPServerCostConfig value={{}} tools={[]} onChange={onChange} />);
await userEvent.type(screen.getByPlaceholderText("0.0000"), "0.5");
fireEvent.change(screen.getByPlaceholderText("0.0000"), { target: { value: "0.5" } });
expect(onChange).toHaveBeenLastCalledWith({ default_cost_per_query: 0.5 });
});
@ -59,7 +59,7 @@ describe("MCPServerCostConfig", () => {
);
await userEvent.click(screen.getByText("Available Tools"));
await userEvent.type(screen.getAllByPlaceholderText("Use default")[0], "3");
fireEvent.change(screen.getAllByPlaceholderText("Use default")[0], { target: { value: "3" } });
expect(onChange).toHaveBeenLastCalledWith({
default_cost_per_query: 0.01,

4
ui/litellm-dashboard/src/app/(dashboard)/memory/_components/MemoryTable.test.tsx
View file

@ -1,5 +1,5 @@
import { PaginationState } from "@tanstack/react-table";
import { render, screen, within } from "@testing-library/react";
import { fireEvent, render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React, { useState } from "react";
import { describe, expect, it, vi } from "vitest";
@ -128,7 +128,7 @@ describe("MemoryTable", () => {
const onRefresh = vi.fn();
render(<MemoryTable {...baseProps} onSearchChange={onSearchChange} onRefresh={onRefresh} />);
await user.type(screen.getByTestId("datatable-search"), "u");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "u" } });
expect(onSearchChange).toHaveBeenCalledWith("u");
await user.click(screen.getByTestId("datatable-refresh"));

4
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx
View file

@ -1,5 +1,5 @@
import * as useAuthorizedModule from "@/app/(dashboard)/hooks/useAuthorized";
import { render, screen, waitFor, within } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -229,7 +229,7 @@ describe("AllModelsTab", () => {
const user = userEvent.setup();
render(<AllModelsTab {...defaultProps} />);
await user.type(screen.getByTestId("datatable-search"), "claude");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "claude" } });
await waitFor(() => {
expect(lastModelsInfoCall().search).toBe("claude");

4
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, within } from "@testing-library/react";
import { fireEvent, render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -342,7 +342,7 @@ describe("AllModelsTable", () => {
/>,
);
await user.type(screen.getByTestId("datatable-search"), "gpt");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "gpt" } });
expect(onSearchChange).toHaveBeenCalled();
await user.click(screen.getByTestId("datatable-refresh"));

4
ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx
View file

@ -263,7 +263,7 @@ describe("ModelRetrySettingsTab", () => {
const inputs = screen.getAllByRole("spinbutton");
await user.clear(inputs[0]);
await user.type(inputs[0], "4");
fireEvent.change(inputs[0], { target: { value: "4" } });
// setGlobalRetryPolicy is called with a function updater
expect(setGlobalRetryPolicy).toHaveBeenCalled();
@ -291,7 +291,7 @@ describe("ModelRetrySettingsTab", () => {
const inputs = screen.getAllByRole("spinbutton");
await user.clear(inputs[0]);
await user.type(inputs[0], "2");
fireEvent.change(inputs[0], { target: { value: "2" } });
expect(setModelGroupRetryPolicy).toHaveBeenCalled();
const updater = setModelGroupRetryPolicy.mock.calls.at(-1)![0];

4
ui/litellm-dashboard/src/app/(dashboard)/organizations/OrganizationFilters.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import OrganizationFilters, { FilterState } from "./OrganizationFilters";
@ -64,7 +64,7 @@ describe("OrganizationFilters", () => {
);
const input = screen.getByPlaceholderText("Search by Organization Name");
await user.type(input, "test");
fireEvent.change(input, { target: { value: "test" } });
await waitFor(
() => {

2
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.test.tsx
View file

@ -165,7 +165,7 @@ describe("AdditionalModelSettings", () => {
const temperatureField = screen.getByLabelText("Temperature value");
await user.clear(temperatureField);
await user.type(temperatureField, "9");
fireEvent.change(temperatureField, { target: { value: "9" } });
await user.tab();
expect((temperatureField as HTMLInputElement).value).toBe("2");

8
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor, within } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -161,7 +161,7 @@ describe("AgentBuilderView", () => {
await waitForRoster();
await user.click(screen.getByRole("button", { name: /New agent/i }));
await user.type(screen.getByPlaceholderText("My Agent"), "billing-agent");
fireEvent.change(screen.getByPlaceholderText("My Agent"), { target: { value: "billing-agent" } });
await user.click(screen.getByRole("button", { name: /Save Agent/i }));
await waitFor(() => expect(modelCreateCall).toHaveBeenCalled());
@ -258,7 +258,7 @@ describe("AgentBuilderView", () => {
await user.click(screen.getByRole("tab", { name: /Chat/i }));
const scratch = await screen.findByLabelText("chat scratch");
await user.type(scratch, "half a thought");
fireEvent.change(scratch, { target: { value: "half a thought" } });
expect(scratch).toHaveValue("half a thought");
await user.click(screen.getByRole("tab", { name: /Configure/i }));
@ -274,7 +274,7 @@ describe("AgentBuilderView", () => {
await waitForRoster();
await user.click(screen.getByRole("tab", { name: /Batch Test/i }));
await user.type(await screen.findByLabelText("batch scratch"), "seven cases");
fireEvent.change(await screen.findByLabelText("batch scratch"), { target: { value: "seven cases" } });
await user.click(screen.getByRole("tab", { name: /Connect/i }));
await screen.findByTestId("code-block");

2
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx
View file

@ -651,7 +651,7 @@ describe("ChatUI", () => {
await user.click(await screen.findByRole("option", { name: "Virtual Key" }));
const keyField = await screen.findByPlaceholderText("Enter custom Virtual Key");
await user.type(keyField, "sk-test");
fireEvent.change(keyField, { target: { value: "sk-test" } });
await waitFor(() => {
expect(screen.getByPlaceholderText("Loading models...")).toBeInTheDocument();

4
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import EndpointSelector from "./EndpointSelector";
@ -21,7 +21,7 @@ describe("EndpointSelector", () => {
const input = screen.getByRole("combobox");
await user.click(input);
await user.clear(input);
await user.type(input, "audio");
fireEvent.change(input, { target: { value: "audio" } });
expect(await screen.findByText("/v1/audio/speech")).toBeInTheDocument();
expect(await screen.findByText("/v1/audio/transcriptions")).toBeInTheDocument();

6
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.test.tsx
View file

@ -1,4 +1,4 @@
import { act, render, screen } from "@testing-library/react";
import { act, fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import RealtimePlayground from "./RealtimePlayground";
@ -177,7 +177,9 @@ describe("RealtimePlayground", () => {
render(<RealtimePlayground {...props} />);
await connect(user);
await user.type(screen.getByPlaceholderText("Type a message or use the mic..."), "hello there");
fireEvent.change(screen.getByPlaceholderText("Type a message or use the mic..."), {
target: { value: "hello there" },
});
await user.click(screen.getByRole("button", { name: /send/i }));
const payloads = latestSocket().sent.map((raw) => JSON.parse(raw));

4
ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import CompareUI from "./CompareUI";
@ -142,7 +142,7 @@ describe("CompareUI", () => {
});
const textarea = getByTestId("message-textarea");
await user.type(textarea, "Describe this image");
fireEvent.change(textarea, { target: { value: "Describe this image" } });
const sendButton = getByTestId("send-button");
expect(sendButton).toBeEnabled();

4
ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { UnifiedSelector } from "./UnifiedSelector";
@ -90,7 +90,7 @@ describe("UnifiedSelector", () => {
const combobox = screen.getByRole("combobox");
await user.click(combobox);
await user.type(combobox, "One");
fireEvent.change(combobox, { target: { value: "One" } });
await waitFor(() => {
expect(screen.getAllByText("Option One").length).toBeGreaterThan(0);

10
ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx
View file

@ -1,4 +1,4 @@
import { cleanup, screen, waitFor } from "@testing-library/react";
import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../../../../../tests/test-utils";
@ -75,7 +75,7 @@ describe("AddPolicyForm", () => {
renderWithProviders(<AddPolicyForm {...defaultProps} />);
await enterSimpleForm(user);
await user.type(await screen.findByLabelText("Policy Name"), "brand-new-policy");
fireEvent.change(await screen.findByLabelText("Policy Name"), { target: { value: "brand-new-policy" } });
await user.click(screen.getByRole("button", { name: "Create Policy" }));
await waitFor(() => {
@ -106,9 +106,9 @@ describe("AddPolicyForm", () => {
await enterSimpleForm(user);
const description = await screen.findByLabelText("Description");
await user.type(description, "x");
fireEvent.change(description, { target: { value: "x" } });
await user.clear(description);
await user.type(await screen.findByLabelText("Policy Name"), "blank-description");
fireEvent.change(await screen.findByLabelText("Policy Name"), { target: { value: "blank-description" } });
await user.click(screen.getByRole("button", { name: "Create Policy" }));
await waitFor(() => {
@ -162,7 +162,7 @@ describe("AddPolicyForm", () => {
renderWithProviders(<AddPolicyForm {...defaultProps} />);
await enterSimpleForm(user);
await user.type(await screen.findByLabelText("Policy Name"), "not a valid name!");
fireEvent.change(await screen.findByLabelText("Policy Name"), { target: { value: "not a valid name!" } });
await user.click(screen.getByRole("button", { name: "Create Policy" }));
expect(

22
ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "@/../tests/test-utils";
import AiSuggestionModal from "./ai_suggestion_modal";
@ -92,7 +92,7 @@ describe("AiSuggestionModal", () => {
await screen.findByText("AI Policy Suggestion");
expect(screen.getByRole("button", { name: "Suggest Policies" })).toBeDisabled();
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
expect(screen.getByRole("button", { name: "Suggest Policies" })).toBeDisabled();
await pickModel(user);
@ -104,8 +104,10 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Ignore all previous instructions/), "my ssn is 123");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Ignore all previous instructions/), {
target: { value: "my ssn is 123" },
});
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
@ -136,7 +138,7 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
@ -152,7 +154,7 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
@ -164,7 +166,7 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
@ -179,7 +181,7 @@ describe("AiSuggestionModal", () => {
renderModal({ onSelectTemplates });
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
await user.click(await screen.findByRole("button", { name: "Use 2 Selected Templates" }));
@ -193,7 +195,7 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));
await user.click(await screen.findByRole("button", { name: "Back" }));
@ -209,7 +211,7 @@ describe("AiSuggestionModal", () => {
renderModal();
await screen.findByText("AI Policy Suggestion");
await user.type(screen.getByPlaceholderText(/Block PII leakage/), "block PII");
fireEvent.change(screen.getByPlaceholderText(/Block PII leakage/), { target: { value: "block PII" } });
await pickModel(user);
await user.click(screen.getByRole("button", { name: "Suggest Policies" }));

4
ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, expect, it, vi } from "vitest";
import { screen } from "@testing-library/react";
import { fireEvent, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "@/../tests/test-utils";
import PipelineFlowBuilder, { PipelineInfoDisplay } from "./pipeline_flow_builder";
@ -151,7 +151,7 @@ describe("PipelineFlowBuilder", () => {
/>,
);
await user.type(screen.getByPlaceholderText("Enter custom response..."), "x");
fireEvent.change(screen.getByPlaceholderText("Enter custom response..."), { target: { value: "x" } });
expect(onChange.mock.calls[0][0].steps[0].modify_response_message).toBe("x");
});

12
ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "@/../tests/test-utils";
import TemplateParameterModal from "./template_parameter_modal";
@ -93,7 +93,7 @@ describe("TemplateParameterModal", () => {
await screen.findByText("Basic Redaction");
expect(screen.getByRole("button", { name: "Continue" })).toBeDisabled();
await user.type(screen.getByPlaceholderText("e.g. Contoso"), "Contoso");
fireEvent.change(screen.getByPlaceholderText("e.g. Contoso"), { target: { value: "Contoso" } });
expect(screen.getByRole("button", { name: "Continue" })).toBeEnabled();
});
@ -104,7 +104,7 @@ describe("TemplateParameterModal", () => {
renderModal({ onConfirm });
await screen.findByText("Basic Redaction");
await user.type(screen.getByPlaceholderText("e.g. Contoso"), "Contoso");
fireEvent.change(screen.getByPlaceholderText("e.g. Contoso"), { target: { value: "Contoso" } });
await user.click(screen.getByRole("button", { name: "Continue" }));
expect(onConfirm).toHaveBeenCalledTimes(1);
@ -157,7 +157,7 @@ describe("TemplateParameterModal", () => {
renderModal({ template: enrichmentTemplate });
await screen.findByText("Competitor Discovery");
await user.type(screen.getByPlaceholderText("e.g. Acme Airlines"), "Contoso");
fireEvent.change(screen.getByPlaceholderText("e.g. Acme Airlines"), { target: { value: "Contoso" } });
expect(screen.getByRole("button", { name: "Continue" })).toBeDisabled();
});
@ -172,7 +172,7 @@ describe("TemplateParameterModal", () => {
renderModal({ template: enrichmentTemplate });
await screen.findByText("Competitor Discovery");
await user.type(screen.getByPlaceholderText("e.g. Acme Airlines"), "Contoso");
fireEvent.change(screen.getByPlaceholderText("e.g. Acme Airlines"), { target: { value: "Contoso" } });
await user.click(screen.getAllByRole("combobox")[0]);
const options = await screen.findAllByText("gpt-5.1");
await user.click(options[options.length - 1]);
@ -195,7 +195,7 @@ describe("TemplateParameterModal", () => {
renderModal({ template: enrichmentTemplate, onConfirm });
await screen.findByText("Competitor Discovery");
await user.type(screen.getByPlaceholderText("e.g. Acme Airlines"), "Contoso");
fireEvent.change(screen.getByPlaceholderText("e.g. Acme Airlines"), { target: { value: "Contoso" } });
await user.click(screen.getAllByRole("combobox")[0]);
const options = await screen.findAllByText("gpt-5.1");
await user.click(options[options.length - 1]);

42
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/CreateProjectModal.integration.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { CreateProjectModal } from "./CreateProjectModal";
const mutate = vi.fn();
@ -68,7 +68,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await submit(user);
@ -100,7 +100,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await submit(user);
expect(await screen.findByText("Please select a team")).toBeInTheDocument();
@ -111,10 +111,10 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await user.type(screen.getByLabelText("Description"), "Handles support");
await user.type(screen.getByPlaceholderText("0.00"), "42.567");
fireEvent.change(screen.getByLabelText("Description"), { target: { value: "Handles support" } });
fireEvent.change(screen.getByPlaceholderText("0.00"), { target: { value: "42.567" } });
await submit(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());
@ -126,7 +126,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await user.click(screen.getByLabelText(/Allowed Models/));
await user.click(await screen.findByTitle("gpt-4"));
@ -140,7 +140,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await user.click(screen.getByLabelText(/Allowed Models/));
await user.click(await screen.findByTitle("gpt-4"));
@ -155,7 +155,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
await user.click(screen.getByRole("switch"));
@ -169,7 +169,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
await submit(user);
@ -185,14 +185,14 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
await user.click(screen.getByRole("button", { name: /add model limit/i }));
await user.type(screen.getByPlaceholderText("Model name (e.g. gpt-4)"), "gpt-4");
await user.type(screen.getByPlaceholderText("TPM Limit"), "100");
await user.type(screen.getByPlaceholderText("RPM Limit"), "20");
fireEvent.change(screen.getByPlaceholderText("Model name (e.g. gpt-4)"), { target: { value: "gpt-4" } });
fireEvent.change(screen.getByPlaceholderText("TPM Limit"), { target: { value: "100" } });
fireEvent.change(screen.getByPlaceholderText("RPM Limit"), { target: { value: "20" } });
await submit(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());
@ -204,13 +204,13 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
await user.click(screen.getByRole("button", { name: /add key-value pair/i }));
await user.type(screen.getByPlaceholderText("Key"), "owner");
await user.type(screen.getByPlaceholderText("Value"), "platform");
fireEvent.change(screen.getByPlaceholderText("Key"), { target: { value: "owner" } });
fireEvent.change(screen.getByPlaceholderText("Value"), { target: { value: "platform" } });
await submit(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());
@ -221,7 +221,7 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
@ -238,15 +238,15 @@ describe("CreateProjectModal submit payload", () => {
const user = setup();
renderModal();
await user.type(screen.getByLabelText("Project Name"), "My Project");
fireEvent.change(screen.getByLabelText("Project Name"), { target: { value: "My Project" } });
await pickTeam(user);
await expandAdvanced(user);
await user.click(screen.getByRole("button", { name: /add model limit/i }));
await user.click(screen.getByRole("button", { name: /add model limit/i }));
const modelInputs = screen.getAllByPlaceholderText("Model name (e.g. gpt-4)");
await user.type(modelInputs[0], "gpt-4");
await user.type(modelInputs[1], "gpt-4");
fireEvent.change(modelInputs[0], { target: { value: "gpt-4" } });
fireEvent.change(modelInputs[1], { target: { value: "gpt-4" } });
await submit(user);
expect(await screen.findByText("Duplicate model")).toBeInTheDocument();

4
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/EditProjectModal.integration.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
import { EditProjectModal } from "./EditProjectModal";
import { ProjectResponse } from "@/app/(dashboard)/hooks/projects/useProjects";
@ -171,7 +171,7 @@ describe("EditProjectModal submit payload", () => {
const nameInput = await screen.findByDisplayValue("My Project");
await user.clear(nameInput);
await user.type(nameInput, "Renamed");
fireEvent.change(nameInput, { target: { value: "Renamed" } });
await save(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());

8
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx
View file

@ -1,7 +1,7 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent from "@testing-library/user-event";
import type { UrlUpdateEvent } from "nuqs/adapters/testing";
import { renderWithProviders, screen, waitFor, within } from "../../../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor, within } from "../../../../../tests/test-utils";
import { ProjectsPage } from "./ProjectsPage";
import { ProjectResponse } from "@/app/(dashboard)/hooks/projects/useProjects";
@ -137,7 +137,7 @@ describe("ProjectsPage", () => {
const user = userEvent.setup();
mockUseProjects.mockReturnValue({ data: mockProjects, isLoading: false });
renderWithProviders(<ProjectsPage />);
await user.type(screen.getByPlaceholderText(/search projects/i), "Alpha");
fireEvent.change(screen.getByPlaceholderText(/search projects/i), { target: { value: "Alpha" } });
await waitFor(() => {
expect(screen.getByText("Alpha Project")).toBeInTheDocument();
expect(screen.queryByText("Beta Project")).not.toBeInTheDocument();
@ -166,7 +166,7 @@ describe("ProjectsPage", () => {
const user = userEvent.setup();
mockUseProjects.mockReturnValue({ data: mockProjects, isLoading: false });
renderWithProviders(<ProjectsPage />);
await user.type(screen.getByPlaceholderText(/search projects/i), "zzz-no-match");
fireEvent.change(screen.getByPlaceholderText(/search projects/i), { target: { value: "zzz-no-match" } });
await waitFor(() => {
expect(screen.getByText("No matching projects")).toBeInTheDocument();
});
@ -199,7 +199,7 @@ describe("ProjectsPage", () => {
await user.click(screen.getByTestId("pagination-next"));
expect(screen.getByTestId("pagination-page")).toHaveTextContent("Page 2 of 2");
await user.type(screen.getByPlaceholderText(/search projects/i), "Project 01");
fireEvent.change(screen.getByPlaceholderText(/search projects/i), { target: { value: "Project 01" } });
await waitFor(() => {
expect(screen.getByText("Project 01")).toBeInTheDocument();
expect(screen.getByTestId("pagination-page")).toHaveTextContent("Page 1 of 1");

16
ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import * as networking from "@/components/networking";
@ -55,10 +55,10 @@ describe("CreateSearchTools submit payload", () => {
renderModal();
await screen.findByLabelText(/Search Tool Name/);
await user.type(screen.getByLabelText(/Search Tool Name/), "my-search");
fireEvent.change(screen.getByLabelText(/Search Tool Name/), { target: { value: "my-search" } });
await pickProvider(user, "Perplexity AI");
await user.type(screen.getByLabelText(/API Key/), "sk-secret");
await user.type(screen.getByLabelText(/Description/), "finds things");
fireEvent.change(screen.getByLabelText(/API Key/), { target: { value: "sk-secret" } });
fireEvent.change(screen.getByLabelText(/Description/), { target: { value: "finds things" } });
await user.click(screen.getByRole("button", { name: "Add Search Tool" }));
await waitFor(() => expect(networking.createSearchTool).toHaveBeenCalledTimes(1));
@ -85,7 +85,7 @@ describe("CreateSearchTools submit payload", () => {
renderModal();
await screen.findByLabelText(/Search Tool Name/);
await user.type(screen.getByLabelText(/Search Tool Name/), "minimal");
fireEvent.change(screen.getByLabelText(/Search Tool Name/), { target: { value: "minimal" } });
await pickProvider(user, "Tavily Search");
await user.click(screen.getByRole("button", { name: "Add Search Tool" }));
@ -113,9 +113,9 @@ describe("CreateSearchTools submit payload", () => {
renderModal();
await screen.findByLabelText(/Search Tool Name/);
await user.type(screen.getByLabelText(/Search Tool Name/), "probe-tool");
fireEvent.change(screen.getByLabelText(/Search Tool Name/), { target: { value: "probe-tool" } });
await pickProvider(user, "Perplexity AI");
await user.type(screen.getByLabelText(/API Key/), "sk-secret");
fireEvent.change(screen.getByLabelText(/API Key/), { target: { value: "sk-secret" } });
await user.click(screen.getByRole("button", { name: "Test Connection" }));
await waitFor(() => expect(networking.createSearchTool).toHaveBeenCalledTimes(1));
@ -139,7 +139,7 @@ describe("CreateSearchTools submit payload", () => {
renderModal();
await screen.findByLabelText(/Search Tool Name/);
await user.type(screen.getByLabelText(/Search Tool Name/), "bad name!");
fireEvent.change(screen.getByLabelText(/Search Tool Name/), { target: { value: "bad name!" } });
await pickProvider(user, "Perplexity AI");
await user.click(screen.getByRole("button", { name: "Add Search Tool" }));

4
ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import * as networking from "@/components/networking";
@ -112,7 +112,7 @@ describe("SearchTools edit payload", () => {
await openEditModal(user);
await user.clear(screen.getByLabelText("Description"));
await user.type(screen.getByLabelText("Description"), "updated copy");
fireEvent.change(screen.getByLabelText("Description"), { target: { value: "updated copy" } });
await user.click(screen.getByRole("button", { name: "OK" }));
await waitFor(() => expect(networking.updateSearchTool).toHaveBeenCalledTimes(1));

4
ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import CreateTagModal from "./CreateTagModal";
@ -41,7 +41,7 @@ describe("CreateTagModal", () => {
render(<CreateTagModal {...defaultProps} />);
const tagNameInput = screen.getByLabelText("Tag Name");
await user.type(tagNameInput, "test-tag");
fireEvent.change(tagNameInput, { target: { value: "test-tag" } });
const submitButton = screen.getByRole("button", { name: /Create Tag/i });
await user.click(submitButton);

12
ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -52,11 +52,11 @@ describe("TagInfoView save payload", () => {
const { user, nameInput } = await renderEditor();
await user.clear(nameInput);
await user.type(nameInput, "renamed-tag");
fireEvent.change(nameInput, { target: { value: "renamed-tag" } });
const descriptionInput = screen.getByLabelText("Description");
await user.clear(descriptionInput);
await user.type(descriptionInput, "updated description");
fireEvent.change(descriptionInput, { target: { value: "updated description" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
@ -81,7 +81,7 @@ describe("TagInfoView save payload", () => {
const maxBudgetInput = await screen.findByLabelText("Max Budget (USD)");
await user.clear(maxBudgetInput);
await user.type(maxBudgetInput, "150.75");
fireEvent.change(maxBudgetInput, { target: { value: "150.75" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
@ -115,7 +115,7 @@ describe("TagInfoView save payload", () => {
await user.click(toggle());
const maxBudgetInput = await screen.findByLabelText("Max Budget (USD)");
await user.clear(maxBudgetInput);
await user.type(maxBudgetInput, "150.75");
fireEvent.change(maxBudgetInput, { target: { value: "150.75" } });
await user.click(toggle());
await user.click(toggle());
@ -142,7 +142,7 @@ describe("TagInfoView save payload", () => {
const descriptionInput = screen.getByLabelText("Description");
await user.clear(descriptionInput);
await user.type(descriptionInput, "abandoned description");
fireEvent.change(descriptionInput, { target: { value: "abandoned description" } });
await user.click(screen.getByRole("button", { name: "Cancel" }));

6
ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@ -69,8 +69,8 @@ describe("UIThemeSettings", () => {
await waitFor(() => expect(fetchMock).toHaveBeenCalled());
await user.type(screen.getByPlaceholderText(LOGO_PLACEHOLDER), "https://a.test/logo.png");
await user.type(screen.getByPlaceholderText(FAVICON_PLACEHOLDER), "https://a.test/fav.ico");
fireEvent.change(screen.getByPlaceholderText(LOGO_PLACEHOLDER), { target: { value: "https://a.test/logo.png" } });
fireEvent.change(screen.getByPlaceholderText(FAVICON_PLACEHOLDER), { target: { value: "https://a.test/fav.ico" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await waitFor(() => expect(patchCalls()).toHaveLength(1));

4
ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx
View file

@ -1,6 +1,6 @@
/* @vitest-environment jsdom */
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -128,7 +128,7 @@ describe("ViewUserDashboard", () => {
expect(settingsTab).toHaveAttribute("aria-selected", "true");
expect(usersTab).toHaveAttribute("aria-selected", "false");
expect(screen.getByRole("region", { name: "Default user settings panel" })).toBeInTheDocument();
await user.type(screen.getByRole("textbox", { name: "Default setting" }), "unsaved change");
fireEvent.change(screen.getByRole("textbox", { name: "Default setting" }), { target: { value: "unsaved change" } });
await user.click(usersTab);

2
ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx
View file

@ -177,7 +177,7 @@ describe("CreateVectorStore submit payload characterization", () => {
expect((await screen.findAllByText("text-embedding-3-small")).at(-1)).toBeInTheDocument();
expect(screen.queryByText("gpt-5")).not.toBeInTheDocument();
await user.type(modelInput, "large");
fireEvent.change(modelInput, { target: { value: "large" } });
await user.click((await screen.findAllByText("text-embedding-3-large")).at(-1) as HTMLElement);
await clickCreate();

6
ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { CredentialItem, vectorStoreCreateCall } from "@/components/networking";
@ -49,7 +49,7 @@ describe("VectorStoreForm", () => {
const user = userEvent.setup();
renderForm();
await user.type(screen.getByLabelText(/Vector Store ID/), "vs-created");
fireEvent.change(screen.getByLabelText(/Vector Store ID/), { target: { value: "vs-created" } });
await user.click(screen.getByRole("button", { name: "Create" }));
await vi.waitFor(() => expect(vectorStoreCreateCall).toHaveBeenCalledTimes(1));
@ -61,7 +61,7 @@ describe("VectorStoreForm", () => {
const onCancel = vi.fn();
renderForm(onCancel);
await user.type(screen.getByLabelText(/Vector Store ID/), "vs-abandoned");
fireEvent.change(screen.getByLabelText(/Vector Store ID/), { target: { value: "vs-abandoned" } });
await user.click(screen.getByRole("button", { name: "Cancel" }));
expect(onCancel).toHaveBeenCalledTimes(1);

8
ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -78,7 +78,7 @@ describe("VectorStoreInfoView save payload", () => {
const nameInput = await screen.findByDisplayValue("support-docs-store");
await user.clear(nameInput);
await user.type(nameInput, "renamed-store");
fireEvent.change(nameInput, { target: { value: "renamed-store" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await vi.waitFor(() => expect(mockUpdate).toHaveBeenCalledTimes(1));
@ -100,7 +100,7 @@ describe("VectorStoreInfoView save payload", () => {
await user.click(editButtons[0]);
const descriptionInput = await screen.findByDisplayValue("Docs for support");
await user.clear(descriptionInput);
await user.type(descriptionInput, "new description");
fireEvent.change(descriptionInput, { target: { value: "new description" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await vi.waitFor(() => expect(mockUpdate).toHaveBeenCalledTimes(1));
@ -139,7 +139,7 @@ describe("VectorStoreInfoView save payload", () => {
const metadataInput = await screen.findByPlaceholderText('{"key": "value"}');
await user.clear(metadataInput);
await user.type(metadataInput, "not json");
fireEvent.change(metadataInput, { target: { value: "not json" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await vi.waitFor(() => expect(mockToast.fromError).toHaveBeenCalledWith("Invalid JSON in metadata field"));

16
ui/litellm-dashboard/src/app/login/LoginPage.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import LoginPage from "./LoginPage";
@ -99,8 +99,8 @@ describe("LoginPage submit payload", () => {
renderLoginPage();
await screen.findByRole("heading", { name: "Login" });
await user.type(screen.getByLabelText("Username"), "admin");
await user.type(screen.getByLabelText("Password"), "sk-1234");
fireEvent.change(screen.getByLabelText("Username"), { target: { value: "admin" } });
fireEvent.change(screen.getByLabelText("Password"), { target: { value: "sk-1234" } });
await user.click(screen.getByRole("button", { name: "Login" }));
await waitFor(() => expect(mockMutate).toHaveBeenCalledTimes(1));
@ -113,7 +113,7 @@ describe("LoginPage submit payload", () => {
renderLoginPage();
await screen.findByRole("heading", { name: "Login" });
await user.type(screen.getByLabelText("Username"), "admin");
fireEvent.change(screen.getByLabelText("Username"), { target: { value: "admin" } });
await user.type(screen.getByLabelText("Password"), "sk-1234{Enter}");
await waitFor(() => expect(mockMutate).toHaveBeenCalledTimes(1));
@ -154,8 +154,8 @@ describe("LoginPage submit payload", () => {
await user.click(screen.getAllByRole("combobox")[0]);
await user.click(await screen.findByText("Worker B"));
await user.type(screen.getByLabelText("Username"), "admin");
await user.type(screen.getByLabelText("Password"), "sk-1234");
fireEvent.change(screen.getByLabelText("Username"), { target: { value: "admin" } });
fireEvent.change(screen.getByLabelText("Password"), { target: { value: "sk-1234" } });
await user.click(screen.getByRole("button", { name: "Login" }));
await waitFor(() => expect(mockMutate).toHaveBeenCalledTimes(1));
@ -181,8 +181,8 @@ describe("LoginPage submit payload", () => {
renderLoginPage();
await screen.findByRole("heading", { name: "Login" });
await user.type(screen.getByLabelText("Username"), "admin");
await user.type(screen.getByLabelText("Password"), "sk-1234");
fireEvent.change(screen.getByLabelText("Username"), { target: { value: "admin" } });
fireEvent.change(screen.getByLabelText("Password"), { target: { value: "sk-1234" } });
await user.click(screen.getByRole("button", { name: "Login" }));
await waitFor(() => expect(mockMutate).toHaveBeenCalledTimes(1));

4
ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { OnboardingFormBody } from "./OnboardingFormBody";
@ -20,7 +20,7 @@ describe("OnboardingFormBody submit payload", () => {
const onSubmit = vi.fn();
render(<OnboardingFormBody {...defaultProps} onSubmit={onSubmit} />);
await user.type(screen.getByLabelText("Password"), "hunter2");
fireEvent.change(screen.getByLabelText("Password"), { target: { value: "hunter2" } });
await user.click(screen.getByRole("button", { name: "Sign Up" }));
await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));

4
ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { OnboardingFormBody } from "./OnboardingFormBody";
@ -70,7 +70,7 @@ describe("OnboardingFormBody", () => {
const onSubmit = vi.fn();
render(<OnboardingFormBody {...defaultProps} onSubmit={onSubmit} />);
await user.type(screen.getByLabelText("Password"), "mypassword");
fireEvent.change(screen.getByLabelText("Password"), { target: { value: "mypassword" } });
await user.click(screen.getByRole("button", { name: /sign up/i }));
await waitFor(() => {

10
ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.test.tsx
View file

@ -1,6 +1,6 @@
import { toast } from "@/lib/toast";
import { getProxyBaseUrl, getPublicModelHubInfo, updateUsefulLinksCall } from "@/components/networking";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import UsefulLinksManagement from "./UsefulLinksManagement";
@ -46,8 +46,8 @@ describe("UsefulLinksManagement", () => {
const displayNameInput = await screen.findByPlaceholderText("Friendly name");
const urlInput = screen.getByPlaceholderText("https://example.com");
await user.type(displayNameInput, "Docs");
await user.type(urlInput, "https://docs.example.com");
fireEvent.change(displayNameInput, { target: { value: "Docs" } });
fireEvent.change(urlInput, { target: { value: "https://docs.example.com" } });
await user.click(screen.getByRole("button", { name: /add link/i }));
await waitFor(() =>
@ -148,7 +148,7 @@ describe("UsefulLinksManagement", () => {
// Update the display name
const displayNameInput = screen.getByDisplayValue("Test Link");
await user.clear(displayNameInput);
await user.type(displayNameInput, "Updated Link");
fireEvent.change(displayNameInput, { target: { value: "Updated Link" } });
// Click save
await user.click(screen.getByRole("button", { name: /save/i }));
@ -184,7 +184,7 @@ describe("UsefulLinksManagement", () => {
// Update the display name
const displayNameInput = screen.getByDisplayValue("Test Link");
await user.clear(displayNameInput);
await user.type(displayNameInput, "Updated Link");
fireEvent.change(displayNameInput, { target: { value: "Updated Link" } });
// Click cancel
await user.click(screen.getByRole("button", { name: /cancel/i }));

14
ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroCreateModal.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -41,9 +41,9 @@ describe("CloudZeroCreateModal submit payload", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("CloudZero API Key"), "cz-secret-key");
await user.type(screen.getByLabelText("Connection ID"), "conn-42");
await user.type(screen.getByLabelText("Timezone"), "America/New_York");
fireEvent.change(screen.getByLabelText("CloudZero API Key"), { target: { value: "cz-secret-key" } });
fireEvent.change(screen.getByLabelText("Connection ID"), { target: { value: "conn-42" } });
fireEvent.change(screen.getByLabelText("Timezone"), { target: { value: "America/New_York" } });
await user.click(screen.getByRole("button", { name: "Create" }));
await vi.waitFor(() =>
@ -59,8 +59,8 @@ describe("CloudZeroCreateModal submit payload", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("CloudZero API Key"), "cz-secret-key");
await user.type(screen.getByLabelText("Connection ID"), "conn-42");
fireEvent.change(screen.getByLabelText("CloudZero API Key"), { target: { value: "cz-secret-key" } });
fireEvent.change(screen.getByLabelText("Connection ID"), { target: { value: "conn-42" } });
await user.click(screen.getByRole("button", { name: "Create" }));
await vi.waitFor(() =>
@ -87,7 +87,7 @@ describe("CloudZeroCreateModal submit payload", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("CloudZero API Key"), "cz-secret-key");
fireEvent.change(screen.getByLabelText("CloudZero API Key"), { target: { value: "cz-secret-key" } });
await user.type(screen.getByLabelText("Connection ID"), "conn-42{Enter}");
expect(mutate).not.toHaveBeenCalled();

4
ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroUpdateModal.integration.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -72,7 +72,7 @@ describe("CloudZeroUpdateModal submit payload", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("CloudZero API Key"), "cz-rotated-key");
fireEvent.change(screen.getByLabelText("CloudZero API Key"), { target: { value: "cz-rotated-key" } });
await user.click(screen.getByRole("button", { name: "Update" }));
await vi.waitFor(() =>

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

@ -156,7 +156,7 @@ describe("WorkerDropdown", () => {
});
await user.clear(screen.getByRole("combobox"));
await user.type(screen.getByRole("combobox"), "worker 3");
fireEvent.change(screen.getByRole("combobox"), { target: { value: "worker 3" } });
await waitFor(() => {
expect(screen.queryByText("Worker 1")).not.toBeInTheDocument();

12
ui/litellm-dashboard/src/components/SCIM.test.tsx
View file

@ -1,4 +1,4 @@
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -37,7 +37,7 @@ describe("SCIMConfig", () => {
const user = userEvent.setup();
renderSCIM();
await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
fireEvent.change(screen.getByLabelText("Token Name"), { target: { value: "My SCIM Token" } });
await user.click(screen.getByRole("button", { name: /create scim token/i }));
await waitFor(() => {
@ -82,7 +82,7 @@ describe("SCIMConfig", () => {
const user = userEvent.setup();
renderSCIM();
await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
fireEvent.change(screen.getByLabelText("Token Name"), { target: { value: "My SCIM Token" } });
await user.click(screen.getByRole("button", { name: /create scim token/i }));
expect(await screen.findByText("Your SCIM Token")).toBeInTheDocument();
@ -95,7 +95,7 @@ describe("SCIMConfig", () => {
const user = userEvent.setup();
renderSCIM();
await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
fireEvent.change(screen.getByLabelText("Token Name"), { target: { value: "My SCIM Token" } });
await user.click(screen.getByRole("button", { name: /create scim token/i }));
await user.click(await screen.findByRole("button", { name: /create another token/i }));
@ -106,7 +106,7 @@ describe("SCIMConfig", () => {
const user = userEvent.setup();
renderSCIM({ accessToken: null });
await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
fireEvent.change(screen.getByLabelText("Token Name"), { target: { value: "My SCIM Token" } });
await user.click(screen.getByRole("button", { name: /create scim token/i }));
await waitFor(() => {
@ -120,7 +120,7 @@ describe("SCIMConfig", () => {
const user = userEvent.setup();
renderSCIM();
await user.type(screen.getByLabelText("Token Name"), "My SCIM Token");
fireEvent.change(screen.getByLabelText("Token Name"), { target: { value: "My SCIM Token" } });
await user.click(screen.getByRole("button", { name: /create scim token/i }));
await waitFor(() => {

6
ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx
View file

@ -1,4 +1,4 @@
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -101,7 +101,7 @@ describe("EditHashicorpVaultModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Token"), "rotated-token");
fireEvent.change(screen.getByLabelText("Token"), { target: { value: "rotated-token" } });
await save(user);
await waitFor(() => {
@ -139,7 +139,7 @@ describe("EditHashicorpVaultModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText("Vault Address"), "vault.example.com");
fireEvent.change(screen.getByLabelText("Vault Address"), { target: { value: "vault.example.com" } });
await save(user);
expect(await screen.findByText("Must start with http:// or https://")).toBeInTheDocument();

10
ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx
View file

@ -228,7 +228,7 @@ describe("MCPSemanticFilterSettings", () => {
const topK = screen.getByRole("spinbutton");
await user.clear(topK);
await user.type(topK, "7");
fireEvent.change(topK, { target: { value: "7" } });
await user.click(screen.getByRole("button", { name: /save settings/i }));
expect(mockMutate).toHaveBeenCalledWith(DEFAULTED_PAYLOAD, expect.anything());
@ -243,7 +243,7 @@ describe("MCPSemanticFilterSettings", () => {
const topK = screen.getByRole("spinbutton");
await user.clear(topK);
await user.type(topK, "25");
fireEvent.change(topK, { target: { value: "25" } });
const slider = screen.getByRole("slider", { hidden: true });
fireEvent.keyDown(slider, { key: "ArrowRight", keyCode: 39, which: 39 });
@ -251,7 +251,7 @@ describe("MCPSemanticFilterSettings", () => {
const embeddingModel = screen.getByRole("combobox");
await user.click(embeddingModel);
await user.clear(embeddingModel);
await user.type(embeddingModel, "large");
fireEvent.change(embeddingModel, { target: { value: "large" } });
fireEvent.keyDown(embeddingModel, { key: "ArrowDown", keyCode: 40, which: 40 });
fireEvent.keyDown(embeddingModel, { key: "Enter", keyCode: 13, which: 13 });
@ -277,7 +277,7 @@ describe("MCPSemanticFilterSettings", () => {
const topK = screen.getByRole("spinbutton");
await user.clear(topK);
await user.type(topK, "500");
fireEvent.change(topK, { target: { value: "500" } });
await user.tab();
await user.click(screen.getByRole("button", { name: /save settings/i }));
@ -290,7 +290,7 @@ describe("MCPSemanticFilterSettings", () => {
const topK = screen.getByRole("spinbutton");
await user.clear(topK);
await user.type(topK, "0");
fireEvent.change(topK, { target: { value: "0" } });
await user.tab();
await user.click(screen.getByRole("button", { name: /save settings/i }));

10
ui/litellm-dashboard/src/components/Settings/AdminSettings/PluginSettings/PluginSettings.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -36,9 +36,9 @@ describe("PluginSettings config payload", () => {
expect(await screen.findAllByText("No data")).not.toHaveLength(0);
await user.click(screen.getByRole("button", { name: /add plugin/i }));
await user.type(await screen.findByLabelText(/Name \(identifier\)/), "beta");
await user.type(screen.getByLabelText(/Display Name/), "Beta");
await user.type(screen.getByLabelText(/^URL/), "https://beta.example.com");
fireEvent.change(await screen.findByLabelText(/Name \(identifier\)/), { target: { value: "beta" } });
fireEvent.change(screen.getByLabelText(/Display Name/), { target: { value: "Beta" } });
fireEvent.change(screen.getByLabelText(/^URL/), { target: { value: "https://beta.example.com" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => expect(updateConfigFieldSettingMock).toHaveBeenCalledTimes(1));
@ -89,7 +89,7 @@ describe("PluginSettings config payload", () => {
expect(await screen.findByText("Alpha")).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "edit" }));
await user.type(await screen.findByLabelText(/Plugin Key/), "sk-brand-new");
fireEvent.change(await screen.findByLabelText(/Plugin Key/), { target: { value: "sk-brand-new" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => expect(updateConfigFieldSettingMock).toHaveBeenCalledTimes(1));

4
ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../../../../../../tests/test-utils";
@ -54,7 +54,7 @@ describe("EditSSOSettingsModal (real form tree)", () => {
renderWithProviders(<EditSSOSettingsModal isVisible={true} onCancel={vi.fn()} onSuccess={vi.fn()} />);
await user.clear(await screen.findByLabelText("Google Client ID"));
await user.type(screen.getByLabelText("Google Client ID"), "rotated-client-id");
fireEvent.change(screen.getByLabelText("Google Client ID"), { target: { value: "rotated-client-id" } });
await user.click(saveButton());
await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1));

8
ui/litellm-dashboard/src/components/ToolPolicies/ToolPoliciesTable.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { describe, expect, it, vi } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "../../../tests/test-utils";
@ -93,7 +93,7 @@ describe("ToolPoliciesTable search", () => {
const user = userEvent.setup();
renderTable();
await user.type(screen.getByTestId("datatable-search"), "weather");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "weather" } });
await waitFor(() => expect(rowIds()).toEqual(["tool-1"]));
});
@ -102,7 +102,7 @@ describe("ToolPoliciesTable search", () => {
const user = userEvent.setup();
renderTable();
await user.type(screen.getByTestId("datatable-search"), "hash-bbb");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "hash-bbb" } });
await waitFor(() => expect(rowIds()).toEqual(["tool-2"]));
});
@ -111,7 +111,7 @@ describe("ToolPoliciesTable search", () => {
const user = userEvent.setup();
renderTable();
await user.type(screen.getByTestId("datatable-search"), "curl");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "curl" } });
await waitFor(() => expect(rowIds()).toEqual([]));
expect(screen.getByText("No matching tools")).toBeInTheDocument();

10
ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.test.tsx
View file

@ -1,4 +1,4 @@
import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import userEvent from "@testing-library/user-event";
import { vi } from "vitest";
import AutoRouterRoutingTest from "./AutoRouterRoutingTest";
@ -67,7 +67,9 @@ describe("AutoRouterRoutingTest", () => {
vi.mocked(testAutoRouterRouting).mockResolvedValue(successResponse);
renderWithProviders(<Harness />);
await user.type(screen.getByTestId("auto-router-routing-test-prompt"), "think step by step");
fireEvent.change(screen.getByTestId("auto-router-routing-test-prompt"), {
target: { value: "think step by step" },
});
await user.click(screen.getByTestId("auto-router-routing-test-send"));
expect(testAutoRouterRouting).toHaveBeenCalledWith("token", expectedRequest);
@ -84,7 +86,7 @@ describe("AutoRouterRoutingTest", () => {
});
renderWithProviders(<Harness />);
await user.type(screen.getByTestId("auto-router-routing-test-prompt"), "hello");
fireEvent.change(screen.getByTestId("auto-router-routing-test-prompt"), { target: { value: "hello" } });
await user.click(screen.getByTestId("auto-router-routing-test-send"));
expect(await screen.findByTestId("auto-router-routing-test-unconfigured")).toBeInTheDocument();
@ -95,7 +97,7 @@ describe("AutoRouterRoutingTest", () => {
vi.mocked(testAutoRouterRouting).mockResolvedValue({ status: "error", error: "no tier has a model" });
renderWithProviders(<Harness />);
await user.type(screen.getByTestId("auto-router-routing-test-prompt"), "hello");
fireEvent.change(screen.getByTestId("auto-router-routing-test-prompt"), { target: { value: "hello" } });
await user.click(screen.getByTestId("auto-router-routing-test-send"));
expect(await screen.findByText("no tier has a model")).toBeInTheDocument();

4
ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx
View file

@ -1,4 +1,4 @@
import { renderWithProviders, screen } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils";
import userEvent from "@testing-library/user-event";
import { vi } from "vitest";
import ClassifierPromptEditor from "./ClassifierPromptEditor";
@ -87,7 +87,7 @@ describe("ClassifierPromptEditor", () => {
const onChange = await openEditor();
const textarea = screen.getByLabelText("Classifier system prompt");
await userEvent.clear(textarea);
await userEvent.type(textarea, "Grade data sensitivity");
fireEvent.change(textarea, { target: { value: "Grade data sensitivity" } });
await userEvent.click(screen.getByRole("button", { name: "Save prompt" }));
expect(onChange).toHaveBeenCalledWith("Grade data sensitivity");
});

2
ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.test.tsx
View file

@ -281,7 +281,7 @@ describe("ComplexityRouterConfig", () => {
fireEvent.click(screen.getByText("Advanced: Classification Method"));
const keywordsSection = screen.getByText("Custom Technical Keywords").closest("div")?.parentElement as HTMLElement;
const input = within(keywordsSection).getByRole("combobox");
await user.type(input, "udp,");
fireEvent.change(input, { target: { value: "udp," } });
expect(onCustomTechnicalKeywordsChange).toHaveBeenCalledWith(["udp"]);
});

2
ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.test.tsx
View file

@ -159,7 +159,7 @@ describe("RouterConfigBuilder", () => {
});
const descriptionInput = screen.getByPlaceholderText("Describe when this route should be used...");
await user.type(descriptionInput, "For code generation");
fireEvent.change(descriptionInput, { target: { value: "For code generation" } });
await waitFor(() => {
const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1];

24
ui/litellm-dashboard/src/components/add_pass_through.integration.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { renderWithProviders, screen, waitFor } from "../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../tests/test-utils";
import AddPassThroughEndpoint from "./add_pass_through";
const createPassThroughEndpoint = vi.fn();
@ -35,11 +35,13 @@ const openModal = async (user: User) => {
};
const fillRequiredFields = async (user: User) => {
await user.type(screen.getByPlaceholderText("bria"), "bria");
await user.type(screen.getByPlaceholderText("https://engine.prod.bria-api.com"), "https://example.com");
fireEvent.change(screen.getByPlaceholderText("bria"), { target: { value: "bria" } });
fireEvent.change(screen.getByPlaceholderText("https://engine.prod.bria-api.com"), {
target: { value: "https://example.com" },
});
await user.click(screen.getByRole("button", { name: /add header/i }));
await user.type(screen.getByPlaceholderText("Header Name"), "Authorization");
await user.type(screen.getByPlaceholderText("Header Value"), "Bearer abc");
fireEvent.change(screen.getByPlaceholderText("Header Name"), { target: { value: "Authorization" } });
fireEvent.change(screen.getByPlaceholderText("Header Value"), { target: { value: "Bearer abc" } });
};
const submit = async (user: User) => user.click(screen.getByRole("button", { name: "Add Pass-Through Endpoint" }));
@ -57,8 +59,8 @@ describe("add_pass_through submit payload", () => {
renderForm();
await openModal(user);
await fillRequiredFields(user);
await user.type(screen.getByPlaceholderText("600"), "900");
await user.type(screen.getByPlaceholderText("2.0000"), "1.5");
fireEvent.change(screen.getByPlaceholderText("600"), { target: { value: "900" } });
fireEvent.change(screen.getByPlaceholderText("2.0000"), { target: { value: "1.5" } });
await submit(user);
@ -84,8 +86,8 @@ describe("add_pass_through submit payload", () => {
renderForm();
await openModal(user);
await fillRequiredFields(user);
await user.type(screen.getByPlaceholderText("600"), "900");
await user.type(screen.getByPlaceholderText("2.0000"), "1.5");
fireEvent.change(screen.getByPlaceholderText("600"), { target: { value: "900" } });
fireEvent.change(screen.getByPlaceholderText("2.0000"), { target: { value: "1.5" } });
await submit(user);
@ -183,7 +185,9 @@ describe("add_pass_through submit payload", () => {
await fillRequiredFields(user);
await user.clear(screen.getByPlaceholderText("https://engine.prod.bria-api.com"));
await user.type(screen.getByPlaceholderText("https://engine.prod.bria-api.com"), "not a url");
fireEvent.change(screen.getByPlaceholderText("https://engine.prod.bria-api.com"), {
target: { value: "not a url" },
});
await submit(user);

16
ui/litellm-dashboard/src/components/cloudzero_export_modal.integration.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import CloudZeroExportModal from "./cloudzero_export_modal";
@ -44,8 +44,8 @@ describe("CloudZeroExportModal", () => {
const user = userEvent.setup();
open();
await user.type(await screen.findByLabelText("CloudZero API Key"), "cz-key-123");
await user.type(screen.getByLabelText("Connection ID"), "conn-abc");
fireEvent.change(await screen.findByLabelText("CloudZero API Key"), { target: { value: "cz-key-123" } });
fireEvent.change(screen.getByLabelText("Connection ID"), { target: { value: "conn-abc" } });
await user.click(screen.getByRole("button", { name: "Export to CloudZero" }));
await waitFor(() => expect(callsTo(fetchMock, "/cloudzero/init")).toHaveLength(1));
@ -63,8 +63,8 @@ describe("CloudZeroExportModal", () => {
const user = userEvent.setup();
open();
await user.type(await screen.findByLabelText("CloudZero API Key"), "cz-key-123");
await user.type(screen.getByLabelText("Connection ID"), "conn-abc");
fireEvent.change(await screen.findByLabelText("CloudZero API Key"), { target: { value: "cz-key-123" } });
fireEvent.change(screen.getByLabelText("Connection ID"), { target: { value: "conn-abc" } });
await user.click(screen.getByRole("button", { name: "Export to CloudZero" }));
await waitFor(() => expect(callsTo(fetchMock, "/cloudzero/export")).toHaveLength(1));
@ -78,7 +78,7 @@ describe("CloudZeroExportModal", () => {
const user = userEvent.setup();
open();
await user.type(await screen.findByLabelText("CloudZero API Key"), "cz-key-123");
fireEvent.change(await screen.findByLabelText("CloudZero API Key"), { target: { value: "cz-key-123" } });
await user.click(screen.getByRole("button", { name: "Export to CloudZero" }));
await screen.findByText("Please enter the CloudZero connection ID");
@ -125,8 +125,8 @@ describe("CloudZeroExportModal", () => {
const user = userEvent.setup();
open();
await user.type(await screen.findByLabelText("CloudZero API Key"), "cz-key-123456789");
await user.type(screen.getByLabelText("Connection ID"), "conn-abc");
fireEvent.change(await screen.findByLabelText("CloudZero API Key"), { target: { value: "cz-key-123456789" } });
fireEvent.change(screen.getByLabelText("Connection ID"), { target: { value: "conn-abc" } });
await user.click(screen.getByRole("button", { name: "Export to CloudZero" }));
await waitFor(() => expect(callsTo(fetchMock, "/cloudzero/export")).toHaveLength(1));

10
ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
View file

@ -1,6 +1,6 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import userEvent from "@testing-library/user-event";
import { renderWithProviders, screen } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils";
import DeleteResourceModal from "./DeleteResourceModal";
describe("DeleteResourceModal", () => {
@ -107,7 +107,7 @@ describe("DeleteResourceModal", () => {
const user = userEvent.setup();
renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);
const input = screen.getByPlaceholderText("DELETE");
await user.type(input, "DELET");
fireEvent.change(input, { target: { value: "DELET" } });
const deleteButton = screen.getByRole("button", { name: /delete/i });
expect(deleteButton).toBeDisabled();
});
@ -116,7 +116,7 @@ describe("DeleteResourceModal", () => {
const user = userEvent.setup();
renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);
const input = screen.getByPlaceholderText("DELETE");
await user.type(input, "DELETE");
fireEvent.change(input, { target: { value: "DELETE" } });
const deleteButton = screen.getByRole("button", { name: /delete/i });
expect(deleteButton).toBeEnabled();
});
@ -125,7 +125,7 @@ describe("DeleteResourceModal", () => {
const user = userEvent.setup();
const { rerender } = renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);
const input = screen.getByPlaceholderText("DELETE");
await user.type(input, "DELETE");
fireEvent.change(input, { target: { value: "DELETE" } });
expect(input).toHaveValue("DELETE");
rerender(<DeleteResourceModal {...defaultProps} isOpen={false} requiredConfirmation="DELETE" />);
@ -177,7 +177,7 @@ describe("DeleteResourceModal", () => {
const user = userEvent.setup();
renderWithProviders(<DeleteResourceModal {...defaultProps} confirmLoading={true} requiredConfirmation="DELETE" />);
const input = screen.getByPlaceholderText("DELETE");
await user.type(input, "DELETE");
fireEvent.change(input, { target: { value: "DELETE" } });
const deleteButton = screen.getByText("Deleting...").closest("button");
expect(deleteButton).toBeDisabled();
});

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

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import userEvent, { PointerEventsCheckLevel } from "@testing-library/user-event";
import { describe, expect, it, vi, beforeEach } from "vitest";
import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import KeyLifecycleSettings from "./KeyLifecycleSettings";
const CREATE_PLACEHOLDER = "e.g., 30d or leave empty to never expire";
@ -87,7 +87,7 @@ describe("KeyLifecycleSettings", () => {
const onFinish = vi.fn();
renderWithProviders(<Harness onFinish={onFinish} />);
await user.type(getDurationInput(), "1d");
fireEvent.change(getDurationInput(), { target: { value: "1d" } });
await user.click(screen.getByRole("button", { name: "submit" }));
await waitFor(() => expect(onFinish).toHaveBeenCalledTimes(1));
@ -98,7 +98,7 @@ describe("KeyLifecycleSettings", () => {
const user = userEvent.setup();
renderWithProviders(<Harness />);
await user.type(getDurationInput(), "1d");
fireEvent.change(getDurationInput(), { target: { value: "1d" } });
expect(getDurationInput().value).toBe("1d");
await user.click(screen.getByRole("button", { name: "reset" }));
@ -112,7 +112,7 @@ describe("KeyLifecycleSettings", () => {
renderWithProviders(<Harness onFinish={onFinish} />);
// First create: type "1d" and submit -> "1d" is sent.
await user.type(getDurationInput(), "1d");
fireEvent.change(getDurationInput(), { target: { value: "1d" } });
await user.click(screen.getByRole("button", { name: "submit" }));
await waitFor(() => expect(onFinish).toHaveBeenCalledTimes(1));
expect(onFinish.mock.calls[0][0]).toMatchObject({ duration: "1d" });
@ -135,7 +135,7 @@ describe("KeyLifecycleSettings", () => {
const onFinish = vi.fn();
renderWithProviders(<Harness isCreateMode={false} onFinish={onFinish} />);
await user.type(getDurationInput(false), "30d");
fireEvent.change(getDurationInput(false), { target: { value: "30d" } });
expect(getDurationInput(false).value).toBe("30d");
await user.click(screen.getByRole("checkbox", { name: /never expire/i }));
@ -200,7 +200,7 @@ describe("KeyLifecycleSettings", () => {
await user.click(await screen.findByText("Custom interval"));
const customInput = await screen.findByPlaceholderText("e.g., 1s, 5m, 2h, 14d");
await user.type(customInput, "14d");
fireEvent.change(customInput, { target: { value: "14d" } });
await waitFor(() => expect(screen.getByTestId("rotation-interval-value")).toHaveTextContent("14d"));
expect((customInput as HTMLInputElement).value).toBe("14d");
@ -216,7 +216,7 @@ describe("KeyLifecycleSettings", () => {
await user.click(screen.getByRole("combobox"));
await user.click(await screen.findByText("Custom interval"));
const customInput = await screen.findByPlaceholderText("e.g., 1s, 5m, 2h, 14d");
await user.type(customInput, "14d");
fireEvent.change(customInput, { target: { value: "14d" } });
await waitFor(() => expect(screen.getByTestId("rotation-interval-value")).toHaveTextContent("14d"));
await user.click(screen.getByRole("combobox"));

10
ui/litellm-dashboard/src/components/common_components/MetadataKeyValueFields.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { describe, expect, it, vi } from "vitest";
@ -139,8 +139,8 @@ describe("MetadataKeyValueFields", () => {
render(<Harness onFinish={onFinish} />);
await user.click(screen.getByRole("button", { name: /add key-value pair/i }));
await user.type(screen.getByPlaceholderText("Key"), "cost_center");
await user.type(screen.getByPlaceholderText("Value"), "eng-1");
fireEvent.change(screen.getByPlaceholderText("Key"), { target: { value: "cost_center" } });
fireEvent.change(screen.getByPlaceholderText("Value"), { target: { value: "eng-1" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => {
@ -196,7 +196,7 @@ describe("MetadataKeyValueFields", () => {
render(<Harness onFinish={onFinish} />);
await user.click(screen.getByRole("button", { name: /add key-value pair/i }));
await user.type(screen.getByPlaceholderText("Value"), "orphan");
fireEvent.change(screen.getByPlaceholderText("Value"), { target: { value: "orphan" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => {
@ -230,7 +230,7 @@ describe("MetadataKeyValueFields with a declared schema", () => {
const onFinish = vi.fn();
render(<Harness onFinish={onFinish} schemaFields={[{ key: "cost_center", label: "Cost Center" }]} />);
await user.type(await screen.findByPlaceholderText("Value"), "CC-1001");
fireEvent.change(await screen.findByPlaceholderText("Value"), { target: { value: "CC-1001" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => {

4
ui/litellm-dashboard/src/components/common_components/OrganizationDropdown.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import OrganizationDropdown from "./OrganizationDropdown";
@ -63,7 +63,7 @@ describe("OrganizationDropdown", () => {
render(<OrganizationDropdown organizations={MOCK_ORGS} />);
await user.click(screen.getByRole("combobox"));
await user.type(screen.getByRole("combobox"), "org-2");
fireEvent.change(screen.getByRole("combobox"), { target: { value: "org-2" } });
expect(await screen.findByText("Sales")).toBeInTheDocument();
expect(screen.queryByText("Engineering")).not.toBeInTheDocument();

2
ui/litellm-dashboard/src/components/common_components/UserDropdown.test.tsx
View file

@ -79,7 +79,7 @@ describe("UserDropdown", () => {
render(<UserDropdown onChange={vi.fn()} />);
await user.click(combobox());
await user.type(combobox(), "alice");
fireEvent.change(combobox(), { target: { value: "alice" } });
await waitFor(() => expect(mockUseInfiniteUsers).toHaveBeenCalledWith(50, "alice"));
expect(screen.getByText("bob@example.com (user-2)")).toBeInTheDocument();

4
ui/litellm-dashboard/src/components/email_settings.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { renderWithProviders } from "@/../tests/test-utils";
import EmailSettings from "./email_settings";
@ -72,7 +72,7 @@ describe("EmailSettings", () => {
renderWithProviders(<EmailSettings accessToken="sk-test" premiumUser alerts={alerts} />);
await user.clear(inputNamed("SMTP_HOST"));
await user.type(inputNamed("SMTP_HOST"), "smtp.changed.com");
fireEvent.change(inputNamed("SMTP_HOST"), { target: { value: "smtp.changed.com" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await waitFor(() => {

6
ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.test.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect } from "vitest";
import { TagRateLimitEditor, TagRateLimitEntry, tagLimitsToRows, tagRowsToLimits } from "./TagRateLimitEditor";
@ -40,7 +40,7 @@ describe("TagRateLimitEditor", () => {
const user = userEvent.setup();
render(<Harness initial={rowsWith("", null)} />);
await user.type(screen.getByRole("textbox", { name: "Tag" }), "cell-2");
fireEvent.change(screen.getByRole("textbox", { name: "Tag" }), { target: { value: "cell-2" } });
expect(screen.getByRole("textbox", { name: "Tag" })).toHaveValue("cell-2");
});
@ -50,7 +50,7 @@ describe("TagRateLimitEditor", () => {
const seen: TagRateLimitEntry[][] = [];
render(<Harness initial={rowsWith("cell-1", null)} onValue={(v: TagRateLimitEntry[]) => seen.push(v)} />);
await user.type(screen.getByRole("spinbutton", { name: "RPM limit" }), "60");
fireEvent.change(screen.getByRole("spinbutton", { name: "RPM limit" }), { target: { value: "60" } });
const latest = seen[seen.length - 1][0];
expect(latest.rpm_limit).toBe(60);

6
ui/litellm-dashboard/src/components/key_value_input.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -18,8 +18,8 @@ describe("KeyValueInput", () => {
render(<KeyValueInput onChange={onChange} />);
await user.click(screen.getByRole("button", { name: /Add Header$/ }));
await user.type(screen.getByPlaceholderText("Header Name"), "X-Trace");
await user.type(screen.getByPlaceholderText("Header Value"), "enabled");
fireEvent.change(screen.getByPlaceholderText("Header Name"), { target: { value: "X-Trace" } });
fireEvent.change(screen.getByPlaceholderText("Header Value"), { target: { value: "enabled" } });
expect(onChange).toHaveBeenLastCalledWith({ "X-Trace": "enabled" });
});

4
ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -20,7 +20,7 @@ const jsonResponse = (body: unknown, status = 200) =>
async function fillAndSubmit(user: ReturnType<typeof userEvent.setup>) {
await user.click(screen.getByText("Continue to Authentication"));
await user.type(screen.getByPlaceholderText("Enter your API key"), "linear-key");
fireEvent.change(screen.getByPlaceholderText("Enter your API key"), { target: { value: "linear-key" } });
await user.click(screen.getByRole("button", { name: /Connect & Authorize/ }));
}

4
ui/litellm-dashboard/src/components/model_add/reuse_credentials.test.tsx
View file

@ -1,7 +1,7 @@
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { renderWithProviders, screen } from "@/../tests/test-utils";
import { fireEvent, renderWithProviders, screen } from "@/../tests/test-utils";
import type { CredentialItem } from "../networking";
import ReuseCredentialsModal from "./reuse_credentials";
@ -38,7 +38,7 @@ describe("ReuseCredentialsModal", () => {
const nameInput = screen.getByLabelText("Credential Name:");
await user.clear(nameInput);
await user.type(nameInput, "reused-openai");
fireEvent.change(nameInput, { target: { value: "reused-openai" } });
await submit(user);
expect(onAddCredential).toHaveBeenCalledTimes(1);

8
ui/litellm-dashboard/src/components/model_info_view.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React, { ReactNode } from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -492,7 +492,7 @@ describe("ModelInfoView", () => {
const modelNameInput = await screen.findByPlaceholderText("Enter model name");
await user.clear(modelNameInput);
await user.type(modelNameInput, "Updated Model Name");
fireEvent.change(modelNameInput, { target: { value: "Updated Model Name" } });
expect(modelNameInput).toHaveValue("Updated Model Name");
});
@ -738,7 +738,7 @@ describe("ModelInfoView", () => {
expect(screen.getByPlaceholderText("Enter input cost")).toBeInTheDocument();
});
await user.clear(screen.getByPlaceholderText("Enter input cost"));
await user.type(screen.getByPlaceholderText("Enter input cost"), "2.5");
fireEvent.change(screen.getByPlaceholderText("Enter input cost"), { target: { value: "2.5" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
await waitFor(() => {
@ -768,7 +768,7 @@ describe("ModelInfoView", () => {
await waitFor(() => {
expect(screen.getByPlaceholderText("e.g. 15")).toBeInTheDocument();
});
await user.type(screen.getByPlaceholderText("e.g. 15"), "15");
fireEvent.change(screen.getByPlaceholderText("e.g. 15"), { target: { value: "15" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
await waitFor(() => {

14
ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { describe, expect, it, vi } from "vitest";
@ -102,7 +102,7 @@ describe("OrgSettingsForm", () => {
const { patchOrganization } = renderForm();
await user.clear(screen.getByLabelText("Organization Name"));
await user.type(screen.getByLabelText("Organization Name"), "acme-2");
fireEvent.change(screen.getByLabelText("Organization Name"), { target: { value: "acme-2" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await waitFor(() => expect(patchOrganization).toHaveBeenCalledTimes(1));
@ -115,7 +115,7 @@ describe("OrgSettingsForm", () => {
const budget: HTMLInputElement = screen.getByLabelText("Max Budget (USD)");
await user.clear(budget);
await user.type(budget, "0.001");
fireEvent.change(budget, { target: { value: "0.001" } });
// jsdom never blocks the submit itself, so assert the constraint the real browser
// enforces before handleSubmit ever runs
@ -198,7 +198,7 @@ describe("OrgSettingsForm", () => {
const alias = screen.getByLabelText("Organization Name");
await user.clear(alias);
await user.type(alias, "acme");
fireEvent.change(alias, { target: { value: "acme" } });
await waitFor(() => expect(screen.getByRole("button", { name: "Save Changes" })).toBeDisabled());
});
@ -207,7 +207,7 @@ describe("OrgSettingsForm", () => {
const user = userEvent.setup();
const { patchOrganization } = renderForm();
await user.type(screen.getByLabelText("Metadata"), "not json");
fireEvent.change(screen.getByLabelText("Metadata"), { target: { value: "not json" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
expect(await screen.findByRole("alert")).toHaveTextContent("Metadata must be a valid JSON object");
@ -223,7 +223,7 @@ describe("OrgSettingsForm", () => {
});
await user.clear(screen.getByLabelText("Organization Name"));
await user.type(screen.getByLabelText("Organization Name"), "acme-2");
fireEvent.change(screen.getByLabelText("Organization Name"), { target: { value: "acme-2" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await waitFor(() => expect(patchOrganization).toHaveBeenCalledTimes(1));
@ -236,7 +236,7 @@ describe("OrgSettingsForm", () => {
renderForm({ onSaved });
await user.clear(screen.getByLabelText("Requests per minute Limit (RPM)"));
await user.type(screen.getByLabelText("Requests per minute Limit (RPM)"), "75");
fireEvent.change(screen.getByLabelText("Requests per minute Limit (RPM)"), { target: { value: "75" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));
await waitFor(() => expect(onSaved).toHaveBeenCalledTimes(1));

4
ui/litellm-dashboard/src/components/organization/organization_view.test.tsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { vi, test, expect, beforeEach } from "vitest";
import { renderWithProviders } from "../../../tests/test-utils";
@ -282,7 +282,7 @@ test("should keep unsaved settings edits when switching tabs and back", async ()
const alias = await screen.findByLabelText(/Organization Name/i);
await user.clear(alias);
await user.type(alias, "Renamed Org");
fireEvent.change(alias, { target: { value: "Renamed Org" } });
expect(alias).toHaveValue("Renamed Org");
await user.click(screen.getByRole("tab", { name: "Overview" }));

2
ui/litellm-dashboard/src/components/price_data_reload.test.tsx
View file

@ -75,7 +75,7 @@ describe("PriceDataReload", () => {
expect(screen.getByRole("dialog", { name: "Set Up Periodic Reload" })).toBeInTheDocument();
const hours = screen.getByRole("spinbutton", { name: "Reload interval in hours" });
await user.clear(hours);
await user.type(hours, "12");
fireEvent.change(hours, { target: { value: "12" } });
await user.click(screen.getByRole("button", { name: "Schedule" }));
await waitFor(() => expect(scheduleModelCostMapReload).toHaveBeenCalledWith("sk-test", 12));

6
ui/litellm-dashboard/src/components/query_param_input.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -18,8 +18,8 @@ describe("QueryParamInput", () => {
render(<QueryParamInput onChange={onChange} />);
await user.click(screen.getByRole("button", { name: /Add Query Parameter$/ }));
await user.type(screen.getByPlaceholderText("Parameter Name (e.g., version)"), "region");
await user.type(screen.getByPlaceholderText("Parameter Value (e.g., v1)"), "us-west");
fireEvent.change(screen.getByPlaceholderText("Parameter Name (e.g., version)"), { target: { value: "region" } });
fireEvent.change(screen.getByPlaceholderText("Parameter Value (e.g., v1)"), { target: { value: "us-west" } });
expect(onChange).toHaveBeenLastCalledWith({ region: "us-west" });
});

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

@ -1,5 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
import userEvent from "@testing-library/user-event";
import RouterSettings from "./index";
@ -144,7 +144,7 @@ describe("RouterSettings", () => {
const numRetries = await screen.findByRole("textbox", { name: /num_retries/i });
await user.clear(numRetries);
await user.type(numRetries, "42");
fireEvent.change(numRetries, { target: { value: "42" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));

6
ui/litellm-dashboard/src/components/settings.test.tsx
View file

@ -1,4 +1,4 @@
import { act, render, screen, waitFor, within } from "@testing-library/react";
import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FormProvider, useForm } from "react-hook-form";
import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
@ -189,7 +189,7 @@ describe("Settings", () => {
});
await user.clear(screen.getByLabelText("Host"));
await user.type(screen.getByLabelText("Host"), "https://edited.langfuse.com");
fireEvent.change(screen.getByLabelText("Host"), { target: { value: "https://edited.langfuse.com" } });
await user.click(within(screen.getByRole("dialog")).getByRole("button", { name: "Save Changes" }));
await waitFor(() => {
@ -227,7 +227,7 @@ describe("Settings", () => {
const webhookInput = document.querySelector('input[name="llm_exceptions"]') as HTMLInputElement;
expect(webhookInput).not.toBeNull();
await user.type(webhookInput, "https://hooks.example.com/llm-exceptions");
fireEvent.change(webhookInput, { target: { value: "https://hooks.example.com/llm-exceptions" } });
await user.click(screen.getByRole("button", { name: "Save Changes" }));

4
ui/litellm-dashboard/src/components/shared/DataTable/DataTableFilterDrawer.test.tsx
View file

@ -1,5 +1,5 @@
import type { ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { useState } from "react";
import { describe, expect, it } from "vitest";
@ -65,7 +65,7 @@ describe("DataTableFilterDrawer", () => {
expect(names()).toEqual(["Alice", "Bob", "Carol"]);
await user.click(screen.getByTestId("datatable-filters-trigger"));
await user.type(await screen.findByTestId("draft-name"), "Bob");
fireEvent.change(await screen.findByTestId("draft-name"), { target: { value: "Bob" } });
expect(names()).toEqual(["Alice", "Bob", "Carol"]);
expect(screen.queryByTestId("filter-chip-name")).not.toBeInTheDocument();

2
ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.test.tsx
View file

@ -38,7 +38,7 @@ describe("PaginatedSearchSelect", () => {
const input = screen.getByRole("combobox");
await user.click(input);
await user.type(input, "gamma");
fireEvent.change(input, { target: { value: "gamma" } });
await waitFor(() => expect(onSearchChange).toHaveBeenCalledWith("gamma"));

6
ui/litellm-dashboard/src/components/shared/SearchSelect.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -40,7 +40,7 @@ describe("SearchSelect", () => {
render(<SearchSelect options={OPTIONS} onValueChange={vi.fn()} />);
const input = screen.getByRole("combobox");
await user.click(input);
await user.type(input, "grow");
fireEvent.change(input, { target: { value: "grow" } });
expect(await screen.findByText("Growth")).toBeInTheDocument();
expect(screen.queryByText("Acme Prod")).not.toBeInTheDocument();
});
@ -56,7 +56,7 @@ describe("SearchSelect", () => {
const input = screen.getByRole("combobox");
await user.click(input);
expect(await screen.findByText("team-abc-123")).toBeInTheDocument();
await user.type(input, "abc-123");
fireEvent.change(input, { target: { value: "abc-123" } });
expect(await screen.findByText("Acme Prod")).toBeInTheDocument();
});

6
ui/litellm-dashboard/src/components/shared/form/FormField.test.tsx
View file

@ -1,5 +1,5 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import * as React from "react";
import { useForm } from "react-hook-form";
@ -73,7 +73,7 @@ describe("FormField", () => {
render(<TestForm onSubmit={onSubmit} />);
await user.clear(screen.getByLabelText("Team Name"));
await user.type(screen.getByLabelText("Team Name"), "team-b");
fireEvent.change(screen.getByLabelText("Team Name"), { target: { value: "team-b" } });
await user.click(screen.getByRole("button", { name: "Save" }));
await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
@ -118,7 +118,7 @@ describe("FormField", () => {
await user.click(screen.getByRole("button", { name: "Save" }));
expect(await screen.findByRole("alert")).toBeInTheDocument();
await user.type(screen.getByLabelText("Team Name"), "team-c");
fireEvent.change(screen.getByLabelText("Team Name"), { target: { value: "team-c" } });
await waitFor(() => expect(screen.queryByRole("alert")).not.toBeInTheDocument());
});

2
ui/litellm-dashboard/src/components/team/TeamInfo.test.tsx
View file

@ -1236,7 +1236,7 @@ describe("TeamInfoView", () => {
expect(screen.getAllByPlaceholderText("Value")[0]).toHaveValue("CC-OLD");
await user.clear(screen.getAllByPlaceholderText("Value")[0]);
await user.type(screen.getAllByPlaceholderText("Value")[0], "CC-NEW");
fireEvent.change(screen.getAllByPlaceholderText("Value")[0], { target: { value: "CC-NEW" } });
await user.click(screen.getByRole("button", { name: /save changes/i }));
await waitFor(() => {

6
ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx
View file

@ -1,6 +1,6 @@
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi, MockedFunction } from "vitest";
import { renderWithProviders, screen, waitFor, within } from "../../../tests/test-utils";
import { fireEvent, renderWithProviders, screen, waitFor, within } from "../../../tests/test-utils";
import { TeamVirtualKeysTable } from "./TeamVirtualKeysTable";
import { KeysResponse, useKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
import { KeyResponse } from "../key_team_helpers/key_list";
@ -264,7 +264,7 @@ describe("TeamVirtualKeysTable", () => {
await user.click(await screen.findByTestId("datatable-filters-trigger"));
const drawerBody = await screen.findByTestId("filter-drawer-body");
const userInput = within(drawerBody).getByPlaceholderText("Filter by user ID…");
await user.type(userInput, "user-42");
fireEvent.change(userInput, { target: { value: "user-42" } });
await user.click(screen.getByTestId("filter-drawer-apply"));
await waitFor(() =>
@ -288,7 +288,7 @@ describe("TeamVirtualKeysTable", () => {
renderWithProviders(<TeamVirtualKeysTable {...defaultProps} />);
await user.type(await screen.findByTestId("datatable-search"), "check-002");
fireEvent.change(await screen.findByTestId("datatable-search"), { target: { value: "check-002" } });
await waitFor(() =>
expect(mockUseKeys).toHaveBeenLastCalledWith(1, 50, expect.objectContaining({ selectedKeyAlias: "check-002" })),

10
ui/litellm-dashboard/src/components/update_model_credentials_modal.test.tsx
View file

@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
import UpdateModelCredentialsModal from "./update_model_credentials_modal";
@ -55,7 +55,7 @@ describe("UpdateModelCredentialsModal", () => {
const onCancel = vi.fn();
renderModal({ onUpdated, onCancel });
await user.type(screen.getByLabelText(/new api key/i), "sk-rotated-9988");
fireEvent.change(screen.getByLabelText(/new api key/i), { target: { value: "sk-rotated-9988" } });
await user.click(screen.getByRole("button", { name: /update api key/i }));
await waitFor(() => expect(mockModelPatchUpdateCall).toHaveBeenCalledTimes(1));
@ -92,7 +92,7 @@ describe("UpdateModelCredentialsModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText(/new api key/i), " ");
fireEvent.change(screen.getByLabelText(/new api key/i), { target: { value: " " } });
await user.click(screen.getByRole("button", { name: /update api key/i }));
await waitFor(() => expect(mockToast.fromError).toHaveBeenCalledWith("Enter a new API key"));
@ -103,7 +103,7 @@ describe("UpdateModelCredentialsModal", () => {
const user = userEvent.setup();
renderModal();
await user.type(screen.getByLabelText(/new api key/i), " sk-pad-77 ");
fireEvent.change(screen.getByLabelText(/new api key/i), { target: { value: " sk-pad-77 " } });
await user.click(screen.getByRole("button", { name: /update api key/i }));
await waitFor(() => expect(mockModelPatchUpdateCall).toHaveBeenCalledTimes(1));
@ -131,7 +131,7 @@ describe("UpdateModelCredentialsModal", () => {
renderModal();
const field = screen.getByLabelText(/new api key/i);
await user.type(field, "sk-peek-42");
fireEvent.change(field, { target: { value: "sk-peek-42" } });
expect(field).toHaveAttribute("type", "password");
await user.click(screen.getByRole("button", { name: /show password/i }));

4
ui/litellm-dashboard/src/components/view_logs/AuditLogsTable.test.tsx
View file

@ -1,5 +1,5 @@
import type { ColumnFiltersState, PaginationState } from "@tanstack/react-table";
import { render, screen } from "@testing-library/react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
@ -135,7 +135,7 @@ describe("AuditLogsTable", () => {
renderTable({ onColumnFiltersChange });
await user.click(screen.getByTestId("datatable-filters-trigger"));
await user.type(await screen.findByPlaceholderText("Enter object ID…"), "obj-9");
fireEvent.change(await screen.findByPlaceholderText("Enter object ID…"), { target: { value: "obj-9" } });
await user.click(screen.getByTestId("filter-drawer-apply"));
expect(onColumnFiltersChange).toHaveBeenCalledTimes(1);

6
ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx
View file

@ -1,4 +1,4 @@
import { screen, waitFor } from "@testing-library/react";
import { fireEvent, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, describe, expect, it, vi } from "vitest";
@ -120,7 +120,7 @@ describe("RequestLogsFilters", () => {
const input = await screen.findByPlaceholderText("Search an internal user");
await user.click(input);
await user.type(input, "alice@example.com");
fireEvent.change(input, { target: { value: "alice@example.com" } });
await waitFor(() => expect(useInfiniteSpendLogUsers).toHaveBeenCalledWith(LOGS_WINDOW, 50, "alice@example.com"));
});
@ -189,7 +189,7 @@ describe("RequestLogsFilters", () => {
const input = await screen.findByPlaceholderText("Search an end user");
await user.click(input);
await user.type(input, "acme");
fireEvent.change(input, { target: { value: "acme" } });
await waitFor(() => expect(useInfiniteSpendLogEndUsers).toHaveBeenCalledWith(LOGS_WINDOW, 50, "acme"));
});

4
ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx
View file

@ -1,5 +1,5 @@
import { QueryClientProvider } from "@tanstack/react-query";
import { screen, waitFor, within } from "@testing-library/react";
import { fireEvent, screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import moment from "moment";
import { NuqsTestingAdapter, type UrlUpdateEvent } from "nuqs/adapters/testing";
@ -190,7 +190,7 @@ describe("RequestLogsPanel", () => {
await waitFor(() => expect(uiSpendLogsCall).toHaveBeenCalled());
await user.type(screen.getByTestId("datatable-search"), "req-on-another-page");
fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "req-on-another-page" } });
await waitFor(() => {
const call = lastCall();

Some files were not shown because too many files have changed in this diff Show more