From c1384fa8e321a387bbbc9a2c33f3e3bb0395f0f7 Mon Sep 17 00:00:00 2001
From: Lucas Song <lucas0.song@gmail.com>
Date: Fri, 17 Apr 2026 18:43:31 -0700
Subject: [PATCH] test(add hook test)

---
 .../src/components/networking.tsx             |  2 +-
 .../src/hooks/keys/useGetKeyModels.test.tsx   | 64 +++++++++++++++++++
 .../src/hooks/keys/useGetKeyModels.ts         |  4 +-
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.test.tsx

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index d88c530515f..a10967ec3bb 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -3313,7 +3313,7 @@ export interface keyModelResponse {
   models: string[];
 }
 
-export const keyModelCall = async (
+export const fetchKeyModelCall = async (
   accessToken: string,
   key_id: string
 ): Promise<keyModelResponse> => {
diff --git a/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.test.tsx b/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.test.tsx
new file mode 100644
index 00000000000..5ff5c0f9246
--- /dev/null
+++ b/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.test.tsx
@@ -0,0 +1,64 @@
+/* @vitest-environment jsdom */
+import React from "react";
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { UseGetKeyModels } from "./useGetKeyModels";
+import * as networking from "@/components/networking";
+
+vi.mock("@/components/networking", () => ({
+  fetchKeyModelCall: vi.fn(),
+}));
+
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
+  default: vi.fn(() => ({
+    accessToken: "test-token-456",
+  })),
+}));
+
+const createQueryClient = () =>
+  new QueryClient({
+  });
+
+const wrapper = ({ children }: { children: React.ReactNode }) => {
+  const queryClient = createQueryClient();
+  return React.createElement(QueryClientProvider, { client: queryClient }, children);
+};
+
+const mockAccessToken = "test-token-456";
+const mockAccessGroups = ["group-1", "group-2", "group-3"];
+
+describe("useGetKeyModels", () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    const useAuthorizedModule = await import("@/app/(dashboard)/hooks/useAuthorized");
+    vi.mocked(useAuthorizedModule.default).mockReturnValue({
+      accessToken: mockAccessToken,
+    } as any);
+  });
+
+  it("should return hook result without errors", () => {
+    vi.mocked(networking.fetchKeyModelCall).mockResolvedValue({source: '', models: []});
+
+    const { result } = renderHook(() => UseGetKeyModels('test-key-id'), { wrapper });
+
+    expect(result.current).toBeDefined();
+    expect(result.current).toHaveProperty("data");
+    expect(result.current).toHaveProperty("isSuccess");
+    expect(result.current).toHaveProperty("isError");
+    expect(result.current).toHaveProperty("status");
+  });
+
+  it("should return MCP access groups when access token is present", async () => {
+    vi.mocked(networking.fetchKeyModelCall).mockResolvedValue({source: '', models: []});
+
+    const { result } = renderHook(() => UseGetKeyModels('test-key-id'), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(networking.fetchKeyModelCall).toHaveBeenCalledWith(mockAccessToken);
+    expect(result.current.data).toEqual(mockAccessGroups);
+  });
+});
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.ts b/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.ts
index 4a6670ff4ae..684861a86ac 100644
--- a/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.ts
+++ b/ui/litellm-dashboard/src/hooks/keys/useGetKeyModels.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { keyModelCall } from '@/components/networking';
+import { fetchKeyModelCall } from '@/components/networking';
 import useAuthorized from '@/app/(dashboard)/hooks/useAuthorized';
 
 export const UseGetKeyModels = (key_id: string) => {
@@ -9,7 +9,7 @@ export const UseGetKeyModels = (key_id: string) => {
     queryKey: ['keyModels', key_id],
     queryFn: () => {
         if (!accessToken) throw new Error("Access Token required");
-        return keyModelCall(accessToken, key_id);
+        return fetchKeyModelCall(accessToken, key_id);
     },
   });
 };