test(ui): cover 20 selected MCP servers rendering as separate chips

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin AI 2026-09-15 12:32:57 +00:00
parent 7369015c15
commit 377797ff44

View file

@ -14,8 +14,13 @@ vi.mock("@/app/(dashboard)/hooks/agents/useAgents", () => ({
useAgents: () => ({ data: { agents: [{ agent_id: "agent-1", agent_name: "Support Bot" }] } }),
}));
const manyServers = Array.from({ length: 20 }, (_, i) => ({
server_id: `srv-${i + 1}`,
server_name: `Server ${i + 1}`,
}));
vi.mock("@/app/(dashboard)/hooks/mcpServers/useMCPServers", () => ({
useMCPServers: () => ({ data: [{ server_id: "srv-1", server_name: "Files" }] }),
useMCPServers: () => ({ data: [{ server_id: "srv-1", server_name: "Files" }, ...manyServers.slice(1)] }),
}));
vi.mock("@/components/ModelSelect/ModelSelect", () => ({
@ -181,6 +186,30 @@ describe("AccessGroupEditModal submit payload", () => {
expect(variables().params.access_mcp_server_ids).toStrictEqual([]);
});
it("keeps 20 selected MCP servers as separate chips instead of one joined string", async () => {
const user = setup();
renderModal({ ...accessGroup, access_mcp_server_ids: manyServers.map((s) => s.server_id) });
await screen.findByDisplayValue("Engineering");
await user.click(screen.getByRole("tab", { name: /MCP Servers/ }));
await screen.findByLabelText("Server 20");
const chips = screen.getAllByLabelText(/^(Files|Server \d+)$/);
expect(chips).toHaveLength(20);
expect(chips.map((chip) => chip.textContent)).toStrictEqual([
"Files",
...manyServers.slice(1).map((s) => s.server_name),
]);
expect(screen.queryByText(/Server 2, Server 3/)).not.toBeInTheDocument();
await user.click(within(screen.getByLabelText("Server 7")).getByRole("button"));
await save(user);
await waitFor(() => expect(mutate).toHaveBeenCalled());
expect(variables().params.access_mcp_server_ids).toStrictEqual(
manyServers.map((s) => s.server_id).filter((id) => id !== "srv-7"),
);
});
it("sends models chosen on the Models tab", async () => {
const user = setup();
renderModal({ ...accessGroup, access_model_names: [] });