test: add comprehensive MCP UI test coverage with MSW infrastructure

## MSW Infrastructure Enhancement
- Add 5 MCP API handlers to tests/msw/handlers.ts:
  - get_mcp_config: Fetch MCP configuration for app type
  - import_mcp_from_claude/codex: Mock import operations (returns count: 1)
  - set_mcp_enabled: Toggle MCP server enabled state
  - upsert_mcp_server_in_config: Create/update MCP server
  - delete_mcp_server_in_config: Remove MCP server
- Add MCP state management to tests/msw/state.ts:
  - McpConfigState type with per-app server storage
  - Default test data (stdio server for Claude, http server for Codex)
  - CRUD functions: getMcpConfig, setMcpServerEnabled, upsertMcpServer, deleteMcpServer
  - Immutable state operations with deep cloning

## McpFormModal Component Tests (4 tests)
- Test preset application: Verify ID and config JSON auto-fill from preset selection
- Test conflict detection: Async validation shows warning when syncing to conflicting ID
- Test field sanitization: Verify trim whitespace, split tags, clean URLs before save
- Test validation errors: Block submit and show toast error for invalid stdio config (missing command)

## McpPanel Integration Tests (3 tests)
- Test toggle enabled state: Click toggle button triggers useMcpActions.toggleEnabled with correct params
- Test create server flow: Open form → submit → saveServer called with syncOtherSide option
- Test delete server flow: Click delete → confirm dialog → deleteServer called with ID

## Test Utilities
- Add createTestQueryClient helper with retry: false for faster test execution

## Test Coverage
- Test files: 15 → 17 (+2)
- Total tests: 105 → 112 (+6.7%)
- All 112 tests passing
- Execution time: 3.15s
This commit is contained in:
Jason
2025-10-26 13:52:42 +08:00
parent c8c4656e0e
commit c3f712bc18
5 changed files with 602 additions and 2 deletions

View File

@@ -0,0 +1,227 @@
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import McpFormModal from "@/components/mcp/McpFormModal";
const toastErrorMock = vi.hoisted(() => vi.fn());
const toastSuccessMock = vi.hoisted(() => vi.fn());
const getConfigMock = vi.hoisted(() => vi.fn().mockResolvedValue({ servers: {} }));
vi.mock("sonner", () => ({
toast: {
error: (...args: unknown[]) => toastErrorMock(...args),
success: (...args: unknown[]) => toastSuccessMock(...args),
},
}));
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (key: string, params?: Record<string, unknown>) =>
params ? `${key}:${JSON.stringify(params)}` : key,
}),
}));
vi.mock("@/config/mcpPresets", () => ({
mcpPresets: [
{
id: "preset-stdio",
server: { type: "stdio", command: "preset-cmd" },
},
],
getMcpPresetWithDescription: (preset: any) => ({
...preset,
description: "Preset description",
tags: ["preset"],
}),
}));
vi.mock("@/components/ui/button", () => ({
Button: ({ children, onClick, type = "button", ...rest }: any) => (
<button type={type} onClick={onClick} {...rest}>
{children}
</button>
),
}));
vi.mock("@/components/ui/input", () => ({
Input: ({ value, onChange, ...rest }: any) => (
<input
value={value}
onChange={(event) => onChange?.({ target: { value: event.target.value } })}
{...rest}
/>
),
}));
vi.mock("@/components/ui/textarea", () => ({
Textarea: ({ value, onChange, ...rest }: any) => (
<textarea
value={value}
onChange={(event) => onChange?.({ target: { value: event.target.value } })}
{...rest}
/>
),
}));
vi.mock("@/components/ui/dialog", () => ({
Dialog: ({ children }: any) => <div>{children}</div>,
DialogContent: ({ children }: any) => <div>{children}</div>,
DialogHeader: ({ children }: any) => <div>{children}</div>,
DialogTitle: ({ children }: any) => <div>{children}</div>,
DialogFooter: ({ children }: any) => <div>{children}</div>,
}));
vi.mock("@/components/mcp/McpWizardModal", () => ({
default: () => null,
}));
vi.mock("@/lib/api", async () => {
const actual = await vi.importActual<typeof import("@/lib/api")>("@/lib/api");
return {
...actual,
mcpApi: {
...actual.mcpApi,
getConfig: (...args: unknown[]) => getConfigMock(...args),
},
};
});
describe("McpFormModal", () => {
beforeEach(() => {
toastErrorMock.mockReset();
toastSuccessMock.mockReset();
getConfigMock.mockReset();
getConfigMock.mockResolvedValue({ servers: {} });
});
const renderForm = (props?: Partial<React.ComponentProps<typeof McpFormModal>>) => {
const onSave = vi.fn().mockResolvedValue(undefined);
const onClose = vi.fn();
render(
<McpFormModal
appType="claude"
onSave={onSave}
onClose={onClose}
existingIds={[]}
{...props}
/>,
);
return { onSave, onClose };
};
it("应用预设后填充 ID 与配置内容", async () => {
renderForm();
await waitFor(() =>
expect(screen.getByPlaceholderText("mcp.form.titlePlaceholder")).toBeInTheDocument(),
);
fireEvent.click(screen.getByText("preset-stdio"));
const idInput = screen.getByPlaceholderText(
"mcp.form.titlePlaceholder",
) as HTMLInputElement;
expect(idInput.value).toBe("preset-stdio");
const configTextarea = screen.getByPlaceholderText(
"mcp.form.jsonPlaceholder",
) as HTMLTextAreaElement;
expect(configTextarea.value).toBe('{\n "type": "stdio",\n "command": "preset-cmd"\n}');
});
it("在同步另一侧存在冲突时展示警告", async () => {
getConfigMock.mockResolvedValue({ servers: { conflict: {} } });
renderForm();
const idInput = screen.getByPlaceholderText(
"mcp.form.titlePlaceholder",
) as HTMLInputElement;
fireEvent.change(idInput, { target: { value: "conflict" } });
await waitFor(() => expect(getConfigMock).toHaveBeenCalled());
const checkbox = screen.getByLabelText(
'mcp.form.syncOtherSide:{"target":"apps.codex"}',
) as HTMLInputElement;
fireEvent.click(checkbox);
await waitFor(() =>
expect(
screen.getByText('mcp.form.willOverwriteWarning:{"target":"apps.codex"}'),
).toBeInTheDocument(),
);
});
it("提交时清洗字段并调用 onSave", async () => {
const { onSave } = renderForm();
fireEvent.change(screen.getByPlaceholderText("mcp.form.titlePlaceholder"), {
target: { value: " my-server " },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.namePlaceholder"), {
target: { value: " Friendly " },
});
fireEvent.click(screen.getByText("mcp.form.additionalInfo"));
fireEvent.change(screen.getByPlaceholderText("mcp.form.descriptionPlaceholder"), {
target: { value: " Description " },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.tagsPlaceholder"), {
target: { value: " tag1 , tag2 " },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.homepagePlaceholder"), {
target: { value: " https://example.com " },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.docsPlaceholder"), {
target: { value: " https://docs.example.com " },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.jsonPlaceholder"), {
target: { value: '{"type":"stdio","command":"run"}' },
});
const syncCheckbox = screen.getByLabelText(
'mcp.form.syncOtherSide:{"target":"apps.codex"}',
) as HTMLInputElement;
fireEvent.click(syncCheckbox);
fireEvent.click(screen.getByText("common.add"));
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
const [id, payload, options] = onSave.mock.calls[0];
expect(id).toBe("my-server");
expect(payload).toMatchObject({
id: "my-server",
name: "Friendly",
description: "Description",
homepage: "https://example.com",
docs: "https://docs.example.com",
tags: ["tag1", "tag2"],
server: {
type: "stdio",
command: "run",
},
});
expect(options).toEqual({ syncOtherSide: true });
expect(toastErrorMock).not.toHaveBeenCalled();
});
it("缺少配置命令时阻止提交并提示错误", async () => {
const { onSave } = renderForm();
fireEvent.change(screen.getByPlaceholderText("mcp.form.titlePlaceholder"), {
target: { value: "no-command" },
});
fireEvent.change(screen.getByPlaceholderText("mcp.form.jsonPlaceholder"), {
target: { value: '{"type":"stdio"}' },
});
fireEvent.click(screen.getByText("common.add"));
await waitFor(() => expect(toastErrorMock).toHaveBeenCalled());
expect(onSave).not.toHaveBeenCalled();
const [message] = toastErrorMock.mock.calls.at(-1) ?? [];
expect(message).toBe("mcp.error.jsonInvalid");
});
});

View File

@@ -0,0 +1,231 @@
import React from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { render, screen, waitFor, fireEvent } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import McpPanel from "@/components/mcp/McpPanel";
import type { McpServer } from "@/types";
import { createTestQueryClient } from "../utils/testQueryClient";
const toastSuccessMock = vi.hoisted(() => vi.fn());
const toastErrorMock = vi.hoisted(() => vi.fn());
vi.mock("sonner", () => ({
toast: {
success: (...args: unknown[]) => toastSuccessMock(...args),
error: (...args: unknown[]) => toastErrorMock(...args),
},
}));
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (key: string, params?: Record<string, unknown>) =>
params ? `${key}:${JSON.stringify(params)}` : key,
}),
}));
const importFromClaudeMock = vi.hoisted(() => vi.fn().mockResolvedValue(1));
const importFromCodexMock = vi.hoisted(() => vi.fn().mockResolvedValue(1));
const toggleEnabledMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
const saveServerMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
const deleteServerMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
const reloadMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
const baseServers: Record<string, McpServer> = {
sample: {
id: "sample",
name: "Sample Claude Server",
enabled: true,
server: {
type: "stdio",
command: "claude-server",
},
},
};
vi.mock("@/lib/api", async () => {
const actual = await vi.importActual<typeof import("@/lib/api")>("@/lib/api");
return {
...actual,
mcpApi: {
...actual.mcpApi,
importFromClaude: (...args: unknown[]) =>
importFromClaudeMock(...args),
importFromCodex: (...args: unknown[]) => importFromCodexMock(...args),
},
};
});
vi.mock("@/components/mcp/McpListItem", () => ({
default: ({ id, server, onToggle, onEdit, onDelete }: any) => (
<div data-testid={`mcp-item-${id}`}>
<span>{server.name || id}</span>
<button
type="button"
onClick={() => onToggle(id, !server.enabled)}
data-testid={`toggle-${id}`}
>
toggle
</button>
<button type="button" onClick={() => onEdit(id)} data-testid={`edit-${id}`}>
edit
</button>
<button
type="button"
onClick={() => onDelete(id)}
data-testid={`delete-${id}`}
>
delete
</button>
</div>
),
}));
vi.mock("@/components/mcp/McpFormModal", () => ({
default: ({ onSave, onClose }: any) => (
<div data-testid="mcp-form">
<button
type="button"
onClick={() =>
onSave(
"new-server",
{
id: "new-server",
name: "New Server",
enabled: true,
server: { type: "stdio", command: "new.cmd" },
},
{ syncOtherSide: true },
)
}
>
submit-form
</button>
<button type="button" onClick={onClose}>
close-form
</button>
</div>
),
}));
vi.mock("@/components/ui/button", () => ({
Button: ({ children, onClick, ...rest }: any) => (
<button type="button" onClick={onClick} {...rest}>
{children}
</button>
),
}));
vi.mock("@/components/ui/dialog", () => ({
Dialog: ({ open, children }: any) => (open ? <div>{children}</div> : null),
DialogContent: ({ children }: any) => <div>{children}</div>,
DialogHeader: ({ children }: any) => <div>{children}</div>,
DialogTitle: ({ children }: any) => <div>{children}</div>,
DialogFooter: ({ children }: any) => <div>{children}</div>,
}));
vi.mock("@/components/ConfirmDialog", () => ({
ConfirmDialog: ({ isOpen, onConfirm }: any) =>
isOpen ? (
<div data-testid="confirm-dialog">
<button type="button" onClick={onConfirm}>
confirm-delete
</button>
</div>
) : null,
}));
const renderPanel = (props?: Partial<React.ComponentProps<typeof McpPanel>>) => {
const client = createTestQueryClient();
return render(
<QueryClientProvider client={client}>
<McpPanel open onOpenChange={() => {}} appType="claude" {...props} />
</QueryClientProvider>,
);
};
const useMcpActionsMock = vi.hoisted(() => vi.fn());
vi.mock("@/hooks/useMcpActions", () => ({
useMcpActions: (...args: unknown[]) => useMcpActionsMock(...args),
}));
describe("McpPanel integration", () => {
beforeEach(() => {
toastSuccessMock.mockReset();
toastErrorMock.mockReset();
importFromClaudeMock.mockClear();
importFromClaudeMock.mockResolvedValue(1);
importFromCodexMock.mockClear();
importFromCodexMock.mockResolvedValue(1);
toggleEnabledMock.mockClear();
saveServerMock.mockClear();
deleteServerMock.mockClear();
reloadMock.mockClear();
useMcpActionsMock.mockReturnValue({
servers: baseServers,
loading: false,
reload: reloadMock,
toggleEnabled: toggleEnabledMock,
saveServer: saveServerMock,
deleteServer: deleteServerMock,
});
});
it("加载并切换 MCP 启用状态", async () => {
renderPanel();
await waitFor(() =>
expect(screen.getByTestId("mcp-item-sample")).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId("toggle-sample"));
await waitFor(() =>
expect(toggleEnabledMock).toHaveBeenCalledWith("sample", false),
);
});
it("新增 MCP 并触发保存与同步选项", async () => {
renderPanel();
await waitFor(() =>
expect(
screen.getByText((content) => content.startsWith("mcp.serverCount")),
).toBeInTheDocument(),
);
fireEvent.click(screen.getByText("mcp.add"));
await waitFor(() => expect(screen.getByTestId("mcp-form")).toBeInTheDocument());
fireEvent.click(screen.getByText("submit-form"));
await waitFor(() =>
expect(screen.queryByTestId("mcp-form")).not.toBeInTheDocument(),
);
await waitFor(() =>
expect(saveServerMock).toHaveBeenCalledWith(
"new-server",
expect.objectContaining({ id: "new-server" }),
{ syncOtherSide: true },
),
);
});
it("删除 MCP 并发送确认请求", async () => {
renderPanel();
await waitFor(() =>
expect(screen.getByTestId("mcp-item-sample")).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId("delete-sample"));
await waitFor(() =>
expect(screen.getByTestId("confirm-dialog")).toBeInTheDocument(),
);
fireEvent.click(screen.getByText("confirm-delete"));
await waitFor(() => expect(deleteServerMock).toHaveBeenCalledWith("sample"));
});
});

View File

@@ -1,6 +1,6 @@
import { http, HttpResponse } from "msw";
import type { AppType } from "@/lib/api/types";
import type { Provider, Settings } from "@/types";
import type { McpServer, Provider, Settings } from "@/types";
import {
addProvider,
deleteProvider,
@@ -15,6 +15,11 @@ import {
setSettings,
getAppConfigDirOverride,
setAppConfigDirOverrideState,
getMcpConfig,
setMcpConfig,
setMcpServerEnabled,
upsertMcpServer,
deleteMcpServer,
} from "./state";
const TAURI_ENDPOINT = "http://tauri.local";
@@ -100,6 +105,41 @@ export const handlers = [
http.post(`${TAURI_ENDPOINT}/open_external`, () => success(true)),
// MCP APIs
http.post(`${TAURI_ENDPOINT}/get_mcp_config`, async ({ request }) => {
const { app } = await withJson<{ app: AppType }>(request);
return success(getMcpConfig(app));
}),
http.post(`${TAURI_ENDPOINT}/import_mcp_from_claude`, () => success(1)),
http.post(`${TAURI_ENDPOINT}/import_mcp_from_codex`, () => success(1)),
http.post(`${TAURI_ENDPOINT}/set_mcp_enabled`, async ({ request }) => {
const { app, id, enabled } = await withJson<{
app: AppType;
id: string;
enabled: boolean;
}>(request);
setMcpServerEnabled(app, id, enabled);
return success(true);
}),
http.post(`${TAURI_ENDPOINT}/upsert_mcp_server_in_config`, async ({ request }) => {
const { app, id, spec } = await withJson<{
app: AppType;
id: string;
spec: McpServer;
}>(request);
upsertMcpServer(app, id, spec);
return success(true);
}),
http.post(`${TAURI_ENDPOINT}/delete_mcp_server_in_config`, async ({ request }) => {
const { app, id } = await withJson<{ app: AppType; id: string }>(request);
deleteMcpServer(app, id);
return success(true);
}),
http.post(`${TAURI_ENDPOINT}/restart_app`, () => success(true)),
http.post(`${TAURI_ENDPOINT}/get_settings`, () => success(getSettings())),

View File

@@ -1,8 +1,9 @@
import type { AppType } from "@/lib/api/types";
import type { Provider, Settings } from "@/types";
import type { McpServer, Provider, Settings } from "@/types";
type ProvidersByApp = Record<AppType, Record<string, Provider>>;
type CurrentProviderState = Record<AppType, string>;
type McpConfigState = Record<AppType, Record<string, McpServer>>;
const createDefaultProviders = (): ProvidersByApp => ({
claude: {
@@ -59,6 +60,30 @@ let settingsState: Settings = {
language: "zh",
};
let appConfigDirOverride: string | null = null;
let mcpConfigs: McpConfigState = {
claude: {
sample: {
id: "sample",
name: "Sample Claude Server",
enabled: true,
server: {
type: "stdio",
command: "claude-server",
},
},
},
codex: {
httpServer: {
id: "httpServer",
name: "HTTP Codex Server",
enabled: false,
server: {
type: "http",
url: "http://localhost:3000",
},
},
},
};
const cloneProviders = (value: ProvidersByApp) =>
JSON.parse(JSON.stringify(value)) as ProvidersByApp;
@@ -75,6 +100,30 @@ export const resetProviderState = () => {
language: "zh",
};
appConfigDirOverride = null;
mcpConfigs = {
claude: {
sample: {
id: "sample",
name: "Sample Claude Server",
enabled: true,
server: {
type: "stdio",
command: "claude-server",
},
},
},
codex: {
httpServer: {
id: "httpServer",
name: "HTTP Codex Server",
enabled: false,
server: {
type: "http",
url: "http://localhost:3000",
},
},
},
};
};
export const getProviders = (appType: AppType) =>
@@ -143,3 +192,45 @@ export const getAppConfigDirOverride = () => appConfigDirOverride;
export const setAppConfigDirOverrideState = (value: string | null) => {
appConfigDirOverride = value;
};
export const getMcpConfig = (appType: AppType) => {
const servers = JSON.parse(
JSON.stringify(mcpConfigs[appType] ?? {}),
) as Record<string, McpServer>;
return {
configPath: `/mock/${appType}.mcp.json`,
servers,
};
};
export const setMcpConfig = (appType: AppType, value: Record<string, McpServer>) => {
mcpConfigs[appType] = JSON.parse(JSON.stringify(value)) as Record<string, McpServer>;
};
export const setMcpServerEnabled = (
appType: AppType,
id: string,
enabled: boolean,
) => {
if (!mcpConfigs[appType]?.[id]) return;
mcpConfigs[appType][id] = {
...mcpConfigs[appType][id],
enabled,
};
};
export const upsertMcpServer = (
appType: AppType,
id: string,
server: McpServer,
) => {
if (!mcpConfigs[appType]) {
mcpConfigs[appType] = {};
}
mcpConfigs[appType][id] = JSON.parse(JSON.stringify(server)) as McpServer;
};
export const deleteMcpServer = (appType: AppType, id: string) => {
if (!mcpConfigs[appType]) return;
delete mcpConfigs[appType][id];
};

View File

@@ -0,0 +1,11 @@
import { QueryClient } from "@tanstack/react-query";
export const createTestQueryClient = () =>
new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});