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!);