import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
import type { McpServerListResponse } from "@qltysh/fabro-api-client";
import TestRenderer, { act } from "react-test-renderer";
import { MemoryRouter } from "react-router";
import { setupReactTestEnv } from "../lib/test-utils";
let mcpServers: McpServerListResponse | undefined;
let teardownReactTestEnv: (() => void) | undefined;
mock.module("../lib/queries", () => ({
useMcpServers: () => ({ data: mcpServers }),
}));
const { default: SettingsMcps } = await import("./settings-mcps");
const mountedRenderers: TestRenderer.ReactTestRenderer[] = [];
function renderSettingsMcps() {
let renderer: TestRenderer.ReactTestRenderer | undefined;
act(() => {
renderer = TestRenderer.create(
,
);
});
mountedRenderers.push(renderer!);
return renderer!;
}
function textContent(node: ReturnType): string {
if (node == null || typeof node === "boolean") return "";
if (typeof node === "string" || typeof node === "number") return String(node);
if (Array.isArray(node)) return node.map(textContent).join("");
return node.children?.map(textContent).join("") ?? "";
}
describe("SettingsMcps route", () => {
beforeEach(() => {
teardownReactTestEnv = setupReactTestEnv();
});
afterEach(() => {
act(() => {
for (const renderer of mountedRenderers.splice(0)) {
renderer.unmount();
}
});
mcpServers = undefined;
teardownReactTestEnv?.();
teardownReactTestEnv = undefined;
});
test("renders MCP server rows", () => {
mcpServers = {
data: [
{
id: "github",
revision: "rev-1",
display_name: "GitHub MCP",
description: "GitHub tools",
startup_timeout_secs: 10,
tool_timeout_secs: 60,
transport: {
type: "http",
url: "https://example.com/mcp",
header_keys: ["Authorization"],
},
},
{
id: "filesystem",
revision: "rev-2",
display_name: "Filesystem MCP",
description: null,
startup_timeout_secs: 10,
tool_timeout_secs: 60,
transport: {
type: "stdio",
command: ["npx", "server"],
env_keys: [],
},
},
],
meta: { total: 2 },
};
const renderer = renderSettingsMcps();
const text = textContent(renderer.toJSON());
expect(text).toContain("GitHub MCP");
expect(text).toContain("github");
expect(text).toContain("http");
expect(text).toContain("Filesystem MCP");
expect(text).toContain("stdio");
});
test("renders an empty state", () => {
mcpServers = { data: [], meta: { total: 0 } };
const renderer = renderSettingsMcps();
const text = textContent(renderer.toJSON());
expect(text).toContain("No MCP servers defined yet.");
});
});