From aa4b3ba87addedf3f7869909e13a63e8d9687f82 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 26 Jan 2026 17:53:01 -0800
Subject: [PATCH] Adding tests:

---
 .../src/components/navbar.test.tsx            |   6 ++
 .../components/survey/NudgePrompt.test.tsx    | 101 ++++++++++++++++++
 .../src/components/survey/NudgePrompt.tsx     |   2 +-
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx

diff --git a/ui/litellm-dashboard/src/components/navbar.test.tsx b/ui/litellm-dashboard/src/components/navbar.test.tsx
index 5d3c7254ff..4db814d897 100644
--- a/ui/litellm-dashboard/src/components/navbar.test.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.test.tsx
@@ -16,6 +16,7 @@ vi.mock("@/utils/proxyUtils", () => ({
 let mockUseThemeImpl = () => ({ logoUrl: null as string | null });
 let mockUseHealthReadinessImpl = () => ({ data: null as any });
 let mockGetLocalStorageItemImpl = () => null as string | null;
+let mockUseDisableShowPromptsImpl = () => false;
 
 vi.mock("@/contexts/ThemeContext", () => ({
   useTheme: () => mockUseThemeImpl(),
@@ -25,7 +26,12 @@ vi.mock("@/app/(dashboard)/hooks/healthReadiness/useHealthReadiness", () => ({
   useHealthReadiness: () => mockUseHealthReadinessImpl(),
 }));
 
+vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({
+  useDisableShowPrompts: () => mockUseDisableShowPromptsImpl(),
+}));
+
 vi.mock("@/utils/localStorageUtils", () => ({
+  LOCAL_STORAGE_EVENT: "local-storage-change",
   getLocalStorageItem: () => mockGetLocalStorageItemImpl(),
   setLocalStorageItem: vi.fn(),
   removeLocalStorageItem: vi.fn(),
diff --git a/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx b/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx
new file mode 100644
index 0000000000..26db8a680c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/survey/NudgePrompt.test.tsx
@@ -0,0 +1,101 @@
+import { render, screen } from "@testing-library/react";
+import { MessageSquare } from "lucide-react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NudgePrompt } from "./NudgePrompt";
+
+vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({
+  useDisableShowPrompts: vi.fn(),
+}));
+
+vi.mock("@/utils/localStorageUtils", () => ({
+  setLocalStorageItem: vi.fn(),
+  emitLocalStorageChange: vi.fn(),
+  LOCAL_STORAGE_EVENT: "local-storage-change",
+}));
+
+import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts";
+import { emitLocalStorageChange, setLocalStorageItem } from "@/utils/localStorageUtils";
+
+const mockUseDisableShowPrompts = vi.mocked(useDisableShowPrompts);
+const mockSetLocalStorageItem = vi.mocked(setLocalStorageItem);
+const mockEmitLocalStorageChange = vi.mocked(emitLocalStorageChange);
+
+const defaultProps = {
+  onOpen: vi.fn(),
+  onDismiss: vi.fn(),
+  isVisible: true,
+  title: "Test Title",
+  description: "Test Description",
+  buttonText: "Open Modal",
+  icon: MessageSquare,
+  accentColor: "#3b82f6",
+};
+
+describe("NudgePrompt", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseDisableShowPrompts.mockReturnValue(false);
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render", () => {
+    render(<NudgePrompt {...defaultProps} />);
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  it("should render with all provided props", () => {
+    const { container } = render(<NudgePrompt {...defaultProps} />);
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open Modal" })).toBeInTheDocument();
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("should not render when isVisible is false", () => {
+    render(<NudgePrompt {...defaultProps} isVisible={false} />);
+
+    expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+  });
+
+  it("should not render when disableShowPrompts is true", () => {
+    mockUseDisableShowPrompts.mockReturnValue(true);
+
+    render(<NudgePrompt {...defaultProps} />);
+
+    expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+  });
+
+  it("should display progress bar with correct accent color", () => {
+    const { container } = render(<NudgePrompt {...defaultProps} accentColor="#ff0000" />);
+
+    const progressBar = container.querySelector("div[style*='width']");
+    expect(progressBar).toHaveStyle({ backgroundColor: "#ff0000" });
+  });
+
+  it("should reset progress when isVisible becomes false", () => {
+    const { rerender, container } = render(<NudgePrompt {...defaultProps} />);
+
+    vi.advanceTimersByTime(5000);
+
+    rerender(<NudgePrompt {...defaultProps} isVisible={false} />);
+
+    rerender(<NudgePrompt {...defaultProps} isVisible={true} />);
+
+    const progressBar = container.querySelector("div[style*='width']");
+    expect(progressBar?.getAttribute("style")).toContain("width: 100%");
+  });
+
+  it("should apply custom button style when provided", () => {
+    const buttonStyle = { backgroundColor: "#custom-color" };
+    render(<NudgePrompt {...defaultProps} buttonStyle={buttonStyle} />);
+
+    const openButton = screen.getByRole("button", { name: "Open Modal" });
+    expect(openButton).toHaveStyle(buttonStyle);
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx
index ef72144b89..3c7f10af74 100644
--- a/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx
+++ b/ui/litellm-dashboard/src/components/survey/NudgePrompt.tsx
@@ -138,7 +138,7 @@ export function NudgePrompt({
             onClick={handleDontAskAgain}
             className="text-xs"
           >
-            Don't ask me again
+            Don&apos;t ask me again
           </Button>
         </div>
       </div>