diff --git a/ui/litellm-dashboard/src/components/CreateUserButton.test.tsx b/ui/litellm-dashboard/src/components/CreateUserButton.test.tsx index 504ada09dd6..6780b00e698 100644 --- a/ui/litellm-dashboard/src/components/CreateUserButton.test.tsx +++ b/ui/litellm-dashboard/src/components/CreateUserButton.test.tsx @@ -5,6 +5,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; import { CreateUserButton } from "./CreateUserButton"; import * as networking from "./networking"; import { toast } from "@/lib/toast"; +import { chooseSelectOption } from "../../tests/test-utils"; vi.mock("./networking", () => ({ userCreateCall: vi.fn(), @@ -102,8 +103,8 @@ describe("CreateUserButton", () => { }; renderWithProviders(); await userEvent.click(screen.getByRole("combobox", { name: /user role/i })); - expect(screen.getByText("Admin")).toBeInTheDocument(); - expect(screen.getByText("User")).toBeInTheDocument(); + expect(await screen.findByRole("option", { name: /^Admin/ })).toBeInTheDocument(); + expect(screen.getByRole("option", { name: /^User/ })).toBeInTheDocument(); }); it("should close modal when cancel is clicked in standalone mode", async () => { @@ -141,8 +142,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "test@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -172,8 +172,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "embedded@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -194,8 +193,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "duplicate@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -221,8 +219,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "info@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -252,8 +249,7 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "standalone@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -281,8 +277,7 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "sso@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -321,13 +316,10 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "org@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); - // Select org from the dropdown const orgSelect = within(dialog).getByRole("combobox", { name: /organization/i }); - await user.click(orgSelect); - await user.click(screen.getByText("My Org (org-1)")); + await chooseSelectOption(user, orgSelect, "My Org (org-1)"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); @@ -368,8 +360,7 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "nomemberadd@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -393,8 +384,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "default@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -421,8 +411,7 @@ describe("CreateUserButton", () => { ); await user.type(screen.getByLabelText(/user email/i), "off@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("checkbox", { name: /send invitation email/i })); await user.click(screen.getByRole("button", { name: /create user/i })); @@ -457,8 +446,7 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "standalone-default@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -492,8 +480,7 @@ describe("CreateUserButton", () => { const dialog = screen.getByRole("dialog", { name: /invite user/i }); await user.type(within(dialog).getByLabelText(/user email/i), "standalone-off@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("checkbox", { name: /send invitation email/i })); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); @@ -547,8 +534,7 @@ describe("CreateUserButton", () => { const dialog = await openStandaloneModal(user); await user.type(within(dialog).getByLabelText(/user email/i), "parity@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -581,8 +567,7 @@ describe("CreateUserButton", () => { renderWithProviders(); await user.type(screen.getByLabelText(/user email/i), "embedded-parity@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -613,8 +598,7 @@ describe("CreateUserButton", () => { renderWithProviders(); await user.type(screen.getByLabelText(/user email/i), "admin-parity@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("Admin")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "Admin"); await user.click(screen.getByRole("button", { name: /create user/i })); await waitFor(() => { @@ -645,10 +629,8 @@ describe("CreateUserButton", () => { const dialog = await openStandaloneModal(user); await user.type(within(dialog).getByLabelText(/user email/i), "org-parity@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); - await user.click(within(dialog).getByRole("combobox", { name: /organization/i })); - await user.click(screen.getByText("My Org (org-1)")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /organization/i }), "My Org (org-1)"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -674,8 +656,7 @@ describe("CreateUserButton", () => { renderWithProviders(); await user.type(screen.getByLabelText(/user email/i), "meta-parity@example.com"); - await user.click(screen.getByRole("combobox", { name: /user role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, screen.getByRole("combobox", { name: /user role/i }), "User"); await user.type(screen.getByLabelText(/metadata/i), '{{"a":1}'); await user.click(screen.getByRole("button", { name: /create user/i })); @@ -693,8 +674,7 @@ describe("CreateUserButton", () => { const dialog = await openStandaloneModal(user); await user.type(within(dialog).getByLabelText(/user email/i), "standalone-admin@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("Admin")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "Admin"); await user.click(within(dialog).getByRole("button", { name: /invite user/i })); await waitFor(() => { @@ -711,9 +691,7 @@ describe("CreateUserButton", () => { }); it("should discard models picked in the personal key section once it is collapsed again", async () => { - // antd paints its Select placeholder with pointer-events: none, so the - // default check would reject the very click a real user makes on it. - const user = userEvent.setup({ pointerEventsCheck: 0 }); + const user = userEvent.setup(); mockUserCreateCall.mockResolvedValue({ data: { u: "u7" } }); mockInvitationCreateCall.mockResolvedValue({ id: "i7", user_id: "u7", has_user_setup_sso: false } as any); @@ -721,17 +699,11 @@ describe("CreateUserButton", () => { const dialog = await openStandaloneModal(user); await user.type(within(dialog).getByLabelText(/user email/i), "collapsed@example.com"); - await user.click(within(dialog).getByRole("combobox", { name: /global proxy role/i })); - await user.click(screen.getByText("User")); + await chooseSelectOption(user, within(dialog).getByRole("combobox", { name: /global proxy role/i }), "User"); await user.click(within(dialog).getByText("Personal Key Creation")); - // antd Select exposes no accessible name here, the migrated combobox does, - // so the same test has to reach the control either way. - const modelsSelect = - within(dialog).queryByRole("combobox", { name: /select models/i }) ?? - (await within(dialog).findByText("Select models")); - await user.click(modelsSelect); - await user.click(await screen.findByText("All Proxy Models")); + await user.click(within(dialog).getByRole("combobox", { name: /select models/i })); + await user.click(await screen.findByRole("option", { name: "All Proxy Models" })); await user.click(within(dialog).getByText("Personal Key Creation")); await user.click(within(dialog).getByRole("button", { name: /invite user/i }));