mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
eabf3a6e86
* feat(web): add collapsible MCP JSON helper component * feat(web): add collapsible MCP JSON field-mapping helper * test(web): add McpJsonHelper component tests for toggle behavior * fix(web): scope helper id per row and show helper * test(web): rewrite McpJsonHelper tests to use row-scoped ids * feat(mcp): use stable _localId for McpRow keys and aria-controls\n\n- Add _localId to DraftRow and genLocalId()\n- Use _localId as React key and helper id to avoid duplicate DOM ids\n- Move helper outside transport branches so helper is visible for all transports\n- Fix malformed template.homepage anchor * fix(web): restore _localId-scoped helperId and helper visibility for all transports * test(web): replace integration test with _localId-scoped helper tests * test(web): exercise McpJsonHelper via production McpClientSection in jsdom * fix(web): resolve typecheck errors * test(web):expand rows before querying helper toggles to fix timeout
58 lines
2 KiB
TypeScript
58 lines
2 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { beforeAll, describe, expect, it } from 'vitest';
|
|
import { McpClientSection } from '../../src/components/McpClientSection';
|
|
|
|
beforeAll(() => {
|
|
(global as any).fetch = (input: RequestInfo) => {
|
|
const url = typeof input === 'string' ? input : String(input);
|
|
if (url.endsWith('/api/mcp/servers')) {
|
|
return Promise.resolve(new Response(
|
|
JSON.stringify({
|
|
servers: [
|
|
{ id: 'srv-1', transport: 'stdio', enabled: true },
|
|
{ id: 'srv-2', transport: 'http', enabled: true },
|
|
],
|
|
templates: [],
|
|
}),
|
|
)) as any;
|
|
}
|
|
return Promise.resolve(new Response('{}')) as any;
|
|
};
|
|
});
|
|
|
|
describe('McpJsonHelper (production)', () => {
|
|
it('renders helper toggles and opens the per-row panel with a unique id', async () => {
|
|
render(<McpClientSection />);
|
|
|
|
const expandButtons = await screen.findAllByRole('button', {
|
|
name: /Expand this MCP server/i,
|
|
});
|
|
expect(expandButtons.length).toBeGreaterThanOrEqual(2);
|
|
fireEvent.click(expandButtons[0]!);
|
|
fireEvent.click(expandButtons[1]!);
|
|
|
|
const toggles = await screen.findAllByRole('button', { name: /Need help\?/i });
|
|
expect(toggles.length).toBeGreaterThanOrEqual(2);
|
|
|
|
const firstToggle = toggles[0];
|
|
const secondToggle = toggles[1];
|
|
if (!firstToggle || !secondToggle) {
|
|
throw new Error('Expected at least two MCP helper toggle buttons');
|
|
}
|
|
|
|
expect(firstToggle.getAttribute('aria-expanded')).toBe('false');
|
|
|
|
fireEvent.click(secondToggle);
|
|
|
|
const ariaControls = secondToggle.getAttribute('aria-controls');
|
|
expect(ariaControls).toBeTruthy();
|
|
expect(ariaControls).not.toBe('mcp-json-helper-panel');
|
|
expect(ariaControls).toMatch(/^mcp-json-helper-panel-/);
|
|
|
|
const panel = document.getElementById(ariaControls!);
|
|
expect(panel).toBeTruthy();
|
|
expect(panel?.textContent).toContain('Example MCP JSON');
|
|
});
|
|
});
|