diff --git a/ui/litellm-dashboard/CLAUDE.md b/ui/litellm-dashboard/CLAUDE.md index 197e6d17fc6..d7e0a11aaa1 100644 --- a/ui/litellm-dashboard/CLAUDE.md +++ b/ui/litellm-dashboard/CLAUDE.md @@ -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 diff --git a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx index 2eef71f9156..2e65be36796 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx @@ -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()); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.test.tsx index e43febb9c0d..55ce5061af7 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.test.tsx @@ -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(); - 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(); - 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(); - 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(); - 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(); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx index f11edd7023d..8c3ca7bd9ff 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/admin-panel/_components/AdminPanel.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx index e3c5e1dd94f..dcd6d8a978a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_card_discovery.test.tsx @@ -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(); - 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(); - 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(); - 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(); - 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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.integration.test.tsx index d0968eacf01..79bd2f6a21b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/agent_info.integration.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_modal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_modal.integration.test.tsx index 419da23af3a..bc920e55abd 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_modal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_modal.integration.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.test.tsx index e709732e908..60e886754ce 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.test.tsx @@ -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(() => diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.integration.test.tsx index 207f789e7f0..3fa96b54f1d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.integration.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx index 8029dff0c9e..07cc73cddc4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx @@ -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()); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.test.tsx index 0f768372ad9..b1ed2b8a5ab 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.test.tsx @@ -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()); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.integration.test.tsx index e2b78edb7e0..ca63a074ea7 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/coordination_redis_settings/index.integration.test.tsx @@ -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()); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.integration.test.tsx index 785976b8df4..3a0cd04891f 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.integration.test.tsx @@ -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(); - 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(); - 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(); - 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(); - 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" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx index ddcd4cf2993..f811b55bc86 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx @@ -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") diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.test.tsx index 6739beb81d9..4954dcc92fd 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.test.tsx @@ -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(); 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(); 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(); - 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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_discount_table.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_discount_table.test.tsx index 24280873cf0..6606a4e6aaf 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_discount_table.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_discount_table.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.test.tsx index 3663783347d..f1ff635b603 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.test.tsx index 41aa1087782..646d711cadc 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/EvaluationSettingsModal.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CustomPatternModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CustomPatternModal.test.tsx index f6d5ad91c99..6e177e99fc0 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CustomPatternModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CustomPatternModal.test.tsx @@ -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}"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx index dda479f1579..b87df6d8996 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx @@ -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"); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx index c9cd4eda086..ea957c471b8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.integration.test.tsx index 78d89b7e19e..29887989cb7 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.integration.test.tsx @@ -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"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.integration.test.tsx index 2b192f1777d..bd391b4e7c3 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.integration.test.tsx @@ -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 = { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.integration.test.tsx index 9c91a25cf37..ee9efdd3e72 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.integration.test.tsx @@ -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(() => { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx index f9a75813bda..bdd937a8e6f 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx @@ -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(); 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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.test.tsx index a4547e4923f..6aa43901955 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.test.tsx @@ -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(); - 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, diff --git a/ui/litellm-dashboard/src/app/(dashboard)/memory/_components/MemoryTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/memory/_components/MemoryTable.test.tsx index f664c650cd4..5100b998b80 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/memory/_components/MemoryTable.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/memory/_components/MemoryTable.test.tsx @@ -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(); - 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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx index d65763aaeaf..6378e88c10a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx @@ -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(); - await user.type(screen.getByTestId("datatable-search"), "claude"); + fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "claude" } }); await waitFor(() => { expect(lastModelsInfoCall().search).toBe("claude"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx index 8a9b6847fd2..8ba71e82d48 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTable.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx index ee91ad0f099..14549420623 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx @@ -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]; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/organizations/OrganizationFilters.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/organizations/OrganizationFilters.test.tsx index c1eda1be670..7de188bd75d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/organizations/OrganizationFilters.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/organizations/OrganizationFilters.test.tsx @@ -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( () => { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.test.tsx index 4c0f2831c6e..5f0d46c9844 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.test.tsx @@ -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"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx index dbf2251168b..247d7e71d0a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx @@ -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"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx index 5d61714ee97..f07b66efdf8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx index 2a17c9f72ba..a1e88e51053 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointSelector.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.test.tsx index f374582fb41..7f866eb2548 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.test.tsx @@ -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(); 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)); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx index cb8a5c16d3b..f1bf0c634bb 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx index 29a8092e2b0..d471a6ddaf8 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx index abf409a0cba..5940dc4049e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx @@ -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(); 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(); 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( diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.test.tsx index c504d0759ae..d0e4b29efa1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.test.tsx @@ -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" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx index cb763c2d22f..59bd63fd0ed 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx @@ -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"); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.test.tsx index c3b55cd18ff..d7b726a32fc 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/template_parameter_modal.test.tsx @@ -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]); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/CreateProjectModal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/CreateProjectModal.integration.test.tsx index 2c57db89436..c7d0d00057c 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/CreateProjectModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/CreateProjectModal.integration.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/EditProjectModal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/EditProjectModal.integration.test.tsx index 52277d62494..9abea27ceda 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/EditProjectModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/EditProjectModal.integration.test.tsx @@ -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()); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx index 0bba9d49fd3..55ff741a6da 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx @@ -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(); - 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(); - 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"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx index 553ba0428b4..8933b773c57 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx @@ -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" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.integration.test.tsx index ef2bb8ce3b9..5073c721e08 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/SearchTools.integration.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.test.tsx index 997faf4a004..42e0ee6e74e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/components/CreateTagModal.test.tsx @@ -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(); 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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.integration.test.tsx index 8e81c544041..c23f7112f31 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/tag-management/_components/tag_info.integration.test.tsx @@ -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" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.test.tsx index e8ea6a8fad2..cbb7fc7aa33 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/ui-theme/UIThemeSettings.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx index 6c7718141ca..095bdbf7250 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx index c79d35d46c3..9ad64abd1bb 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/CreateVectorStore.characterization.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx index 09a0c7651f1..71e2a7224ae 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.integration.test.tsx index 33264c71fd6..e5ad3e126ab 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/vector_store_info.integration.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/app/login/LoginPage.integration.test.tsx b/ui/litellm-dashboard/src/app/login/LoginPage.integration.test.tsx index 73b776c347c..bfcc895e579 100644 --- a/ui/litellm-dashboard/src/app/login/LoginPage.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/login/LoginPage.integration.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.integration.test.tsx b/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.integration.test.tsx index 720320926d2..87dbe71bcbe 100644 --- a/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.integration.test.tsx @@ -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(); - 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)); diff --git a/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.test.tsx b/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.test.tsx index f3286984706..289a7966811 100644 --- a/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.test.tsx +++ b/ui/litellm-dashboard/src/app/onboarding/OnboardingFormBody.test.tsx @@ -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(); - 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(() => { diff --git a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.test.tsx b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.test.tsx index 95b292227a7..36d3d940ccd 100644 --- a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.test.tsx +++ b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.test.tsx @@ -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 })); diff --git a/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroCreateModal.integration.test.tsx b/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroCreateModal.integration.test.tsx index 4df208bece2..6085e3266d2 100644 --- a/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroCreateModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroCreateModal.integration.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroUpdateModal.integration.test.tsx b/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroUpdateModal.integration.test.tsx index a0582657281..a33d3f91354 100644 --- a/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroUpdateModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/CloudZeroCostTracking/CloudZeroUpdateModal.integration.test.tsx @@ -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(() => diff --git a/ui/litellm-dashboard/src/components/Navbar/WorkerDropdown/WorkerDropdown.test.tsx b/ui/litellm-dashboard/src/components/Navbar/WorkerDropdown/WorkerDropdown.test.tsx index 0930270eb4b..ba21aae488c 100644 --- a/ui/litellm-dashboard/src/components/Navbar/WorkerDropdown/WorkerDropdown.test.tsx +++ b/ui/litellm-dashboard/src/components/Navbar/WorkerDropdown/WorkerDropdown.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/components/SCIM.test.tsx b/ui/litellm-dashboard/src/components/SCIM.test.tsx index 4e3a9fd260d..b2cb034517d 100644 --- a/ui/litellm-dashboard/src/components/SCIM.test.tsx +++ b/ui/litellm-dashboard/src/components/SCIM.test.tsx @@ -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(() => { diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx index 2eb2137ab6d..28c107f66ed 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/HashicorpVault/EditHashicorpVaultModal.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx index b2ede55e3c4..5fa3f30fad7 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx @@ -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 })); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/PluginSettings/PluginSettings.integration.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/PluginSettings/PluginSettings.integration.test.tsx index bd2cfbcb57d..998fa0ecd99 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/PluginSettings/PluginSettings.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/PluginSettings/PluginSettings.integration.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx index cfc99c0fa76..14bfe5d6ac9 100644 --- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/Modals/EditSSOSettingsModal.integration.test.tsx @@ -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(); 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)); diff --git a/ui/litellm-dashboard/src/components/ToolPolicies/ToolPoliciesTable.test.tsx b/ui/litellm-dashboard/src/components/ToolPolicies/ToolPoliciesTable.test.tsx index 9c1d490c71f..50f673fbd6c 100644 --- a/ui/litellm-dashboard/src/components/ToolPolicies/ToolPoliciesTable.test.tsx +++ b/ui/litellm-dashboard/src/components/ToolPolicies/ToolPoliciesTable.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.test.tsx b/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.test.tsx index 442d4121603..74e7193c8b0 100644 --- a/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/AutoRouterRoutingTest.test.tsx @@ -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(); - 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(); - 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(); - 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(); diff --git a/ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx b/ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx index 42b7fd72e9f..ca590360260 100644 --- a/ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx @@ -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"); }); diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.test.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.test.tsx index 217d3ca0989..d0fda9962e5 100644 --- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.test.tsx @@ -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"]); }); diff --git a/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.test.tsx b/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.test.tsx index 9932e812815..ecd5abfa451 100644 --- a/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.test.tsx @@ -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]; diff --git a/ui/litellm-dashboard/src/components/add_pass_through.integration.test.tsx b/ui/litellm-dashboard/src/components/add_pass_through.integration.test.tsx index 7adc6958a6d..3e2af8821e4 100644 --- a/ui/litellm-dashboard/src/components/add_pass_through.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/add_pass_through.integration.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/components/cloudzero_export_modal.integration.test.tsx b/ui/litellm-dashboard/src/components/cloudzero_export_modal.integration.test.tsx index 07eff973ea3..7f52342ceb3 100644 --- a/ui/litellm-dashboard/src/components/cloudzero_export_modal.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/cloudzero_export_modal.integration.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx index ebcb8221b1a..4ff13599a2e 100644 --- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx @@ -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(); 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(); 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(); const input = screen.getByPlaceholderText("DELETE"); - await user.type(input, "DELETE"); + fireEvent.change(input, { target: { value: "DELETE" } }); expect(input).toHaveValue("DELETE"); rerender(); @@ -177,7 +177,7 @@ describe("DeleteResourceModal", () => { const user = userEvent.setup(); renderWithProviders(); 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(); }); diff --git a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx index d23e9da703a..6e627e3b45c 100644 --- a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.test.tsx @@ -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(); - 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(); - 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(); // 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(); - 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")); diff --git a/ui/litellm-dashboard/src/components/common_components/MetadataKeyValueFields.test.tsx b/ui/litellm-dashboard/src/components/common_components/MetadataKeyValueFields.test.tsx index 073b11947a5..721653c6427 100644 --- a/ui/litellm-dashboard/src/components/common_components/MetadataKeyValueFields.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/MetadataKeyValueFields.test.tsx @@ -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(); 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(); 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(); - 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(() => { diff --git a/ui/litellm-dashboard/src/components/common_components/OrganizationDropdown.test.tsx b/ui/litellm-dashboard/src/components/common_components/OrganizationDropdown.test.tsx index aff61d2ecc4..e0b2b897b36 100644 --- a/ui/litellm-dashboard/src/components/common_components/OrganizationDropdown.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/OrganizationDropdown.test.tsx @@ -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(); 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(); diff --git a/ui/litellm-dashboard/src/components/common_components/UserDropdown.test.tsx b/ui/litellm-dashboard/src/components/common_components/UserDropdown.test.tsx index 82cad3999e4..d9c44fdd3a2 100644 --- a/ui/litellm-dashboard/src/components/common_components/UserDropdown.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/UserDropdown.test.tsx @@ -79,7 +79,7 @@ describe("UserDropdown", () => { render(); 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(); diff --git a/ui/litellm-dashboard/src/components/email_settings.test.tsx b/ui/litellm-dashboard/src/components/email_settings.test.tsx index 691e0f251f2..b4da242d582 100644 --- a/ui/litellm-dashboard/src/components/email_settings.test.tsx +++ b/ui/litellm-dashboard/src/components/email_settings.test.tsx @@ -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(); 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(() => { diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.test.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.test.tsx index 85f02f2045e..a4935acc7fc 100644 --- a/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.test.tsx +++ b/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.test.tsx @@ -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(); - 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( 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); diff --git a/ui/litellm-dashboard/src/components/key_value_input.test.tsx b/ui/litellm-dashboard/src/components/key_value_input.test.tsx index 5ffe85cd2be..0f9b8e682ae 100644 --- a/ui/litellm-dashboard/src/components/key_value_input.test.tsx +++ b/ui/litellm-dashboard/src/components/key_value_input.test.tsx @@ -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(); 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" }); }); diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.test.tsx index f23d06e492c..2cd43c526d3 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.test.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.test.tsx @@ -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) { 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/ })); } diff --git a/ui/litellm-dashboard/src/components/model_add/reuse_credentials.test.tsx b/ui/litellm-dashboard/src/components/model_add/reuse_credentials.test.tsx index 6d41d180efd..e36b1daf72a 100644 --- a/ui/litellm-dashboard/src/components/model_add/reuse_credentials.test.tsx +++ b/ui/litellm-dashboard/src/components/model_add/reuse_credentials.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/components/model_info_view.test.tsx b/ui/litellm-dashboard/src/components/model_info_view.test.tsx index 4ff9b96a5b9..3770c52b97d 100644 --- a/ui/litellm-dashboard/src/components/model_info_view.test.tsx +++ b/ui/litellm-dashboard/src/components/model_info_view.test.tsx @@ -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(() => { diff --git a/ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx b/ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx index 3103c673a3b..5633424902d 100644 --- a/ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx +++ b/ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/components/organization/organization_view.test.tsx b/ui/litellm-dashboard/src/components/organization/organization_view.test.tsx index 062e4df0181..0337fea4131 100644 --- a/ui/litellm-dashboard/src/components/organization/organization_view.test.tsx +++ b/ui/litellm-dashboard/src/components/organization/organization_view.test.tsx @@ -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" })); diff --git a/ui/litellm-dashboard/src/components/price_data_reload.test.tsx b/ui/litellm-dashboard/src/components/price_data_reload.test.tsx index 8b6c238f18a..01381df1620 100644 --- a/ui/litellm-dashboard/src/components/price_data_reload.test.tsx +++ b/ui/litellm-dashboard/src/components/price_data_reload.test.tsx @@ -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)); diff --git a/ui/litellm-dashboard/src/components/query_param_input.test.tsx b/ui/litellm-dashboard/src/components/query_param_input.test.tsx index a9bd1dc6cb9..fc68103c252 100644 --- a/ui/litellm-dashboard/src/components/query_param_input.test.tsx +++ b/ui/litellm-dashboard/src/components/query_param_input.test.tsx @@ -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(); 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" }); }); diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx index 407a46a5a1c..23f48d7e9ac 100644 --- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx @@ -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 })); diff --git a/ui/litellm-dashboard/src/components/settings.test.tsx b/ui/litellm-dashboard/src/components/settings.test.tsx index d29f3d44bbb..b97fef32402 100644 --- a/ui/litellm-dashboard/src/components/settings.test.tsx +++ b/ui/litellm-dashboard/src/components/settings.test.tsx @@ -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" })); diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTableFilterDrawer.test.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTableFilterDrawer.test.tsx index c6a8049de55..abd8f786166 100644 --- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTableFilterDrawer.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTableFilterDrawer.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.test.tsx b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.test.tsx index cfabeeab362..d36b414b726 100644 --- a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.test.tsx @@ -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")); diff --git a/ui/litellm-dashboard/src/components/shared/SearchSelect.test.tsx b/ui/litellm-dashboard/src/components/shared/SearchSelect.test.tsx index 5e8d63eda08..c241bc4fe04 100644 --- a/ui/litellm-dashboard/src/components/shared/SearchSelect.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/SearchSelect.test.tsx @@ -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(); 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(); }); diff --git a/ui/litellm-dashboard/src/components/shared/form/FormField.test.tsx b/ui/litellm-dashboard/src/components/shared/form/FormField.test.tsx index 3b37638b0bc..baeac29402f 100644 --- a/ui/litellm-dashboard/src/components/shared/form/FormField.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/form/FormField.test.tsx @@ -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(); 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()); }); diff --git a/ui/litellm-dashboard/src/components/team/TeamInfo.test.tsx b/ui/litellm-dashboard/src/components/team/TeamInfo.test.tsx index aeba85088bb..77f35762528 100644 --- a/ui/litellm-dashboard/src/components/team/TeamInfo.test.tsx +++ b/ui/litellm-dashboard/src/components/team/TeamInfo.test.tsx @@ -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(() => { diff --git a/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx b/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx index 2cefe33eb8d..8bf5d639d6c 100644 --- a/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx +++ b/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx @@ -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(); - 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" })), diff --git a/ui/litellm-dashboard/src/components/update_model_credentials_modal.test.tsx b/ui/litellm-dashboard/src/components/update_model_credentials_modal.test.tsx index 9602432efcc..f9a653105ed 100644 --- a/ui/litellm-dashboard/src/components/update_model_credentials_modal.test.tsx +++ b/ui/litellm-dashboard/src/components/update_model_credentials_modal.test.tsx @@ -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 })); diff --git a/ui/litellm-dashboard/src/components/view_logs/AuditLogsTable.test.tsx b/ui/litellm-dashboard/src/components/view_logs/AuditLogsTable.test.tsx index 7bdb8332095..7349c3019ae 100644 --- a/ui/litellm-dashboard/src/components/view_logs/AuditLogsTable.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/AuditLogsTable.test.tsx @@ -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); diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx index 70b01e49529..893d6219e64 100644 --- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx @@ -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")); }); diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx index 9e2abec4716..b68e12b9c3d 100644 --- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsPanel.test.tsx @@ -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(); diff --git a/ui/litellm-dashboard/src/lib/forms/useZodForm.test.tsx b/ui/litellm-dashboard/src/lib/forms/useZodForm.test.tsx index 0fac3331171..866451aba61 100644 --- a/ui/litellm-dashboard/src/lib/forms/useZodForm.test.tsx +++ b/ui/litellm-dashboard/src/lib/forms/useZodForm.test.tsx @@ -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 * as React from "react"; import { describe, expect, it, vi } from "vitest"; @@ -37,7 +37,7 @@ describe("useZodForm", () => { const onSubmit = vi.fn(); render(); - await user.type(screen.getByLabelText("Alias"), "acme"); + fireEvent.change(screen.getByLabelText("Alias"), { target: { value: "acme" } }); await user.click(screen.getByRole("button", { name: "Save" })); await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));