From 88ca3562a918b432b0f9b40a7176c96a92fefa60 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 24 Apr 2026 14:56:48 +0000 Subject: [PATCH] chore(ui): repair failing vitest tests after shadcn migration (batch B) Co-authored-by: yuneng-jiang --- .../src/components/guardrails.test.tsx | 12 ++++-- .../guardrails/guardrail_info.test.tsx | 4 +- .../components/team/TeamMemberTab.test.tsx | 2 +- .../team/member_permissions.test.tsx | 41 +++++++++---------- .../LogDetailsDrawer/InputCard.test.tsx | 14 +++---- .../LogDetailsDrawer/OutputCard.test.tsx | 14 +++---- 6 files changed, 43 insertions(+), 44 deletions(-) diff --git a/ui/litellm-dashboard/src/components/guardrails.test.tsx b/ui/litellm-dashboard/src/components/guardrails.test.tsx index 99c2474347e..29cfeb49446 100644 --- a/ui/litellm-dashboard/src/components/guardrails.test.tsx +++ b/ui/litellm-dashboard/src/components/guardrails.test.tsx @@ -1,4 +1,5 @@ -import { render, screen, fireEvent } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"; import GuardrailsPanel from "./guardrails"; import { getGuardrailsList } from "./networking"; @@ -101,10 +102,13 @@ describe("GuardrailsPanel", () => { }); it("should render the component", async () => { + const user = userEvent.setup(); render(); - expect(screen.getByText("Guardrails")).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "Guardrails" })).toBeInTheDocument(); // Activate the Guardrails tab so its content (including the Add button) is rendered - fireEvent.click(screen.getByText("Guardrails")); - expect(screen.getByText("+ Add New Guardrail")).toBeInTheDocument(); + await user.click(screen.getByRole("tab", { name: "Guardrails" })); + expect( + await screen.findByRole("button", { name: /\+ Add New Guardrail/i }), + ).toBeInTheDocument(); }); }); diff --git a/ui/litellm-dashboard/src/components/guardrails/guardrail_info.test.tsx b/ui/litellm-dashboard/src/components/guardrails/guardrail_info.test.tsx index acf112cf9a9..e864756c8b5 100644 --- a/ui/litellm-dashboard/src/components/guardrails/guardrail_info.test.tsx +++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_info.test.tsx @@ -120,8 +120,8 @@ describe("Guardrail Info", () => { expect(getByText("Guardrail Settings")).toBeInTheDocument(); }); - // Find the info icon and hover over it - const infoIcon = container.querySelector(".anticon-info-circle"); + // Find the info icon (lucide Info svg) and hover over it + const infoIcon = container.querySelector(".lucide-info"); expect(infoIcon).toBeInTheDocument(); if (infoIcon) { diff --git a/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx b/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx index ac0ae16a44f..ce3517e9495 100644 --- a/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx +++ b/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx @@ -130,7 +130,7 @@ describe("TeamMembersComponent", () => { renderWithProviders( { expect(screen.getByText("Member Permissions")).toBeInTheDocument(); }); + const user = userEvent.setup(); const checkboxes = screen.getAllByRole("checkbox"); - const unselectedCheckbox = checkboxes.find((cb) => !(cb as HTMLInputElement).checked); + const unselectedCheckbox = checkboxes.find( + (cb) => cb.getAttribute("aria-checked") === "false", + ); + expect(unselectedCheckbox).toBeDefined(); - if (unselectedCheckbox) { - await act(async () => { - fireEvent.click(unselectedCheckbox); - }); - - await waitFor(() => { - const saveButton = screen.getByRole("button", { name: /save changes/i }); - expect(saveButton).toBeInTheDocument(); - }); + await user.click(unselectedCheckbox!); + await waitFor(() => { const saveButton = screen.getByRole("button", { name: /save changes/i }); - await act(async () => { - fireEvent.click(saveButton); - }); + expect(saveButton).toBeInTheDocument(); + }); - await waitFor(() => { - expect(networking.teamPermissionsUpdateCall).toHaveBeenCalledWith( - "token-123", - "team-123", - expect.arrayContaining(["/key/generate", "/key/list"]), - ); - }); - } + const saveButton = screen.getByRole("button", { name: /save changes/i }); + await user.click(saveButton); + + await waitFor(() => { + expect(networking.teamPermissionsUpdateCall).toHaveBeenCalledWith( + "token-123", + "team-123", + expect.arrayContaining(["/key/generate", "/key/list"]), + ); + }); }); it("should render team daily activity permission with correct method and description", async () => { diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/InputCard.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/InputCard.test.tsx index 87b4bddb043..41da044cdb1 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/InputCard.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/InputCard.test.tsx @@ -112,10 +112,9 @@ describe("InputCard", () => { render(); const copyButtons = screen.getAllByRole("button"); - const copyButton = copyButtons.find((button) => { - const icon = button.querySelector('[aria-label="copy"]'); - return icon !== null; - }); + const copyButton = copyButtons.find((button) => + button.querySelector(".lucide-copy"), + ); expect(copyButton).toBeInTheDocument(); @@ -210,10 +209,9 @@ describe("InputCard", () => { ]; render(); const copyButtons = screen.getAllByRole("button"); - const copyButton = copyButtons.find((button) => { - const icon = button.querySelector('[aria-label="copy"]'); - return icon !== null; - }); + const copyButton = copyButtons.find((button) => + button.querySelector(".lucide-copy"), + ); expect(copyButton).toBeInTheDocument(); }); }); diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/OutputCard.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/OutputCard.test.tsx index 708e388366e..63af9543b1e 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/OutputCard.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/OutputCard.test.tsx @@ -67,10 +67,9 @@ describe("OutputCard", () => { render(); const copyButtons = screen.getAllByRole("button"); - const copyButton = copyButtons.find((button) => { - const icon = button.querySelector('[aria-label="copy"]'); - return icon !== null; - }); + const copyButton = copyButtons.find((button) => + button.querySelector(".lucide-copy"), + ); expect(copyButton).toBeInTheDocument(); @@ -89,10 +88,9 @@ describe("OutputCard", () => { render(); const copyButtons = screen.getAllByRole("button"); - const copyButton = copyButtons.find((button) => { - const icon = button.querySelector('[aria-label="copy"]'); - return icon !== null; - }); + const copyButton = copyButtons.find((button) => + button.querySelector(".lucide-copy"), + ); expect(copyButton).toBeInTheDocument(); await user.click(copyButton!);