diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx index 4b8698b9762..b77e962f5f3 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, waitFor } from "@testing-library/react"; +import { render, waitFor, screen, fireEvent, act } from "@testing-library/react"; import { describe, it, expect, vi, beforeEach } from "vitest"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import MCPServers from "./mcp_servers"; @@ -228,4 +228,120 @@ describe("MCPServers", () => { expect(networking.fetchMCPServerHealth).toHaveBeenCalled(); }); }); + + it("should filter servers by team when a team is selected", async () => { + // Mock MCP servers with different teams + const mockServers = [ + { + server_id: "server-1", + server_name: "Team A Server", + alias: "team-a-server", + url: "https://example.com/mcp", + transport: "http", + auth_type: "none", + created_at: "2024-01-01T00:00:00Z", + created_by: "user-1", + updated_at: "2024-01-01T00:00:00Z", + updated_by: "user-1", + teams: [{ team_id: "team-a", team_alias: "Team A" }], + mcp_access_groups: [], + }, + { + server_id: "server-2", + server_name: "Team B Server", + alias: "team-b-server", + url: "https://example2.com/mcp", + transport: "sse", + auth_type: "api_key", + created_at: "2024-01-02T00:00:00Z", + created_by: "user-2", + updated_at: "2024-01-02T00:00:00Z", + updated_by: "user-2", + teams: [{ team_id: "team-b", team_alias: "Team B" }], + mcp_access_groups: [], + }, + { + server_id: "server-3", + server_name: "Team A Server 2", + alias: "team-a-server-2", + url: "https://example3.com/mcp", + transport: "http", + auth_type: "none", + created_at: "2024-01-03T00:00:00Z", + created_by: "user-1", + updated_at: "2024-01-03T00:00:00Z", + updated_by: "user-1", + teams: [{ team_id: "team-a", team_alias: "Team A" }], + mcp_access_groups: [], + }, + ]; + + vi.mocked(networking.fetchMCPServers).mockResolvedValue(mockServers); + vi.mocked(networking.fetchMCPServerHealth).mockResolvedValue([]); + + const queryClient = createQueryClient(); + render( + + + , + ); + + // Wait for the component to load + await waitFor(() => { + expect(screen.getByText("MCP Servers")).toBeInTheDocument(); + }); + + // Wait for servers to be rendered + await waitFor(() => { + expect(screen.getByText("Team A Server")).toBeInTheDocument(); + }); + + // Verify all servers are initially displayed + expect(screen.getByText("Team A Server")).toBeInTheDocument(); + expect(screen.getByText("Team B Server")).toBeInTheDocument(); + expect(screen.getByText("Team A Server 2")).toBeInTheDocument(); + + // Find the team select dropdown by looking for the "Current Team:" label + const teamLabel = screen.getByText("Current Team:"); + const teamSelectContainer = teamLabel.closest("div")?.querySelector(".ant-select"); + expect(teamSelectContainer).toBeTruthy(); + + // Open the dropdown by clicking on the selector + const selectSelector = teamSelectContainer?.querySelector(".ant-select-selector"); + expect(selectSelector).toBeTruthy(); + + act(() => { + fireEvent.mouseDown(selectSelector!); + }); + + // Wait for dropdown to open + await waitFor( + () => { + const dropdownOptions = document.querySelectorAll(".ant-select-item-option"); + expect(dropdownOptions.length).toBeGreaterThan(0); + }, + { timeout: 5000 }, + ); + + // Find and click on "Team A" option + const dropdownOptions = document.querySelectorAll(".ant-select-item-option"); + const teamAOption = Array.from(dropdownOptions).find((option) => + option.textContent?.includes("Team A"), + ); + expect(teamAOption).toBeTruthy(); + + act(() => { + fireEvent.click(teamAOption!); + }); + + // Wait for filtering to complete + await waitFor(() => { + // Team A servers should still be visible + expect(screen.getByText("Team A Server")).toBeInTheDocument(); + expect(screen.getByText("Team A Server 2")).toBeInTheDocument(); + }); + + // Team B server should not be visible + expect(screen.queryByText("Team B Server")).not.toBeInTheDocument(); + }); });