test(add hook test)

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> => {

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);
+  });
+});

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);
     },
   });
 };