* test(tui): cover useSelectableList hook + leaf Ink components (#1501) Add ink-testing-library and renderer-based tests for useSelectableList, SelectableItem, and Tabs. Widen the vitest include glob to .test.tsx and lift these files from the interim React-surface coverage exclusion. The blanket src/components/**/*.tsx exclude is expanded into an explicit per-file list so remaining components can be lifted incrementally. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): add ink-scroll-view passthrough mock for renderer tests (#1501) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): add ink-form passthrough mock for modal renderer tests (#1501) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): cover all Ink tab + modal components via renderer tests (#1501) Add ink-testing-library tests for the 12 Ink components (InfoTab, AuthTab, ResourcesTab, PromptsTab, ToolsTab, NotificationsTab, HistoryTab, RequestsTab, and the Tool/Resource/Prompt test modals + DetailsModal), mounting them through the ink-scroll-view / ink-form passthrough doubles and driving keypresses via stdin. Modal components render position:absolute (empty frame under the test renderer) so their tests assert on behavior — injected InspectorClient fakes and onClose — while the passthrough ScrollView still mounts the inner JSX for coverage. Lift these 12 components from the interim React-surface exclusion in vitest.config.ts; only App.tsx remains excluded. All files clear the uniform 90/90/90/90 per-file gate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): add App.tsx renderer-test harness + foundation tests (#1501) Mock the full @inspector/core surface (InspectorClient, the 7 managed-state classes, the 8 react hooks, transport + auth) behind a controllable harness, plus the ink-scroll-view/ink-form passthroughs, so App renders under ink-testing-library and its keyboard state machine can be driven via stdin. Concurrent ink mounts share raw-mode stdin, so each render is unmounted in afterEach. Foundation covers server-list nav, tab accelerators, connect/ disconnect, OAuth-tab gating, and connected-status rendering (~50% baseline). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): cover App.tsx via mocked-core renderer tests; lift final exclusion (#1501) Extend App.test.tsx to 67 tests driving the keyboard state machine, tab content, modals, OAuth flows, and connect/disconnect across the controllable @inspector/core mock. App.tsx now clears the 90/90/90/90 per-file gate (94.6/90.6/94.5/96.6). Remove the last React-surface exclusion (src/App.tsx) from clients/tui/vitest.config.ts. The whole clients/tui/src tree is now under the uniform per-file coverage gate with no React-surface exclusions, completing the interim-scope lift from #1484. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): raise stdout max-listeners in App test to silence warning (#1501) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): raise App.tsx branch coverage >90 and de-flake coverage runs (#1501) Add targeted App.tsx tests for the OAuth handlers' non-Error throw arms (quick onCallback, guided start/advance, run-to-completion) and a re-entrant quick-auth guard, lifting App.tsx branch coverage 90.6% -> 91.48% for a safer margin above the 90 gate. Harden the App renderer tests against the heavier v8 coverage instrumentation, where React+ink's multi-macrotask render scheduling races fixed ticks: - press() now settles two ticks per key so focus/tab changes flush before the next key is routed (ink re-subscribes useInput on re-render); - expectFrame()/waitUntil() poll for frame content and async flow state (callbackServer opts) instead of asserting after a single fixed tick; - ResourcesTab's content-clear test polls for fetched content likewise. Plain 'npm test' (the CI path) was already stable; this makes the local coverage gate stable too (13/13 clean runs vs ~2/8 flaky before). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): de-flake component renderer tests under slow CI (#1501) CI flaked on AuthTab's 'renders quick auth results' under the plain test run: its oauthFlowState is populated by a post-mount useEffect reading the inspectorClient, and a single-macrotask tick can race that effect -> setState -> re-render chain on a slow/loaded CI runner. Make each component test file's tick() flush several macrotask cycles so such chains settle deterministically before assertions (no test relies on precise tick timing — no fake timers / debounce). App.test.tsx already polls via expectFrame/waitUntil and passed CI, so it's unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(tui): address review — shared setupFile for max-listeners, consume-once ink-form global (#1501) Review follow-ups on #1538 (both non-blocking cleanups): - Hoist process.std{out,in}.setMaxListeners into a shared vitest setupFile (__tests__/setup.ts) wired via setupFiles, so every renderer test file inherits it and the MaxListenersExceededWarning is silenced across the whole suite — not just App.test.tsx. Remove the per-file call. - Make the ink-form double consume (clear) __INK_FORM_SUBMIT_VALUE__ on submit, eliminating the latent cross-test coupling on the shared global regardless of how the modal test files are organized. No production code changed; suite + coverage gate stay green (App.tsx 94.8/91.5/94.5/96.6), and the warning no longer prints. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
280 lines
8.4 KiB
TypeScript
280 lines
8.4 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect, vi, afterEach } from "vitest";
|
|
import { render } from "ink-testing-library";
|
|
import type { InspectorClient } from "@inspector/core/mcp/index.js";
|
|
import type { Tool } from "@modelcontextprotocol/sdk/types.js";
|
|
|
|
// ScrollView passthrough so the results JSX actually mounts (and is covered).
|
|
vi.mock("ink-scroll-view", () => import("./helpers/inkScrollViewMock.js"));
|
|
// Form double that fires onSubmit when the user presses Enter ("\r").
|
|
vi.mock("ink-form", () => import("./helpers/inkFormMock.js"));
|
|
|
|
import { ToolTestModal } from "../src/components/ToolTestModal.js";
|
|
|
|
// These modals render position="absolute", which produces an EMPTY frame under
|
|
// ink-testing-library (absolute boxes aren't laid out at the root). So we assert
|
|
// on BEHAVIOR — the injected client fake's methods, onClose, and the state
|
|
// transitions they drive — rather than on lastFrame() content. React still
|
|
// EXECUTES the inner results/error/loading JSX, so its coverage is collected.
|
|
|
|
const tick = async () => {
|
|
// Flush several macrotask cycles so an effect -> setState -> re-render chain
|
|
// settles before assertions, even on slow/loaded CI (a single tick can race).
|
|
for (let i = 0; i < 8; i++)
|
|
await new Promise((resolve) => setTimeout(resolve, 4));
|
|
};
|
|
const ESC = String.fromCharCode(27);
|
|
const UP = `${ESC}[A`;
|
|
const DOWN = `${ESC}[B`;
|
|
const PAGE_UP = `${ESC}[5~`;
|
|
const PAGE_DOWN = `${ESC}[6~`;
|
|
|
|
const makeTool = (over: Partial<Tool> = {}): Tool =>
|
|
({
|
|
name: "alpha",
|
|
description: "First tool",
|
|
inputSchema: { type: "object", properties: {} },
|
|
...over,
|
|
}) as unknown as Tool;
|
|
|
|
const fakeClient = (callTool: unknown): InspectorClient =>
|
|
({ callTool }) as unknown as InspectorClient;
|
|
|
|
// Set the value the Form double submits on Enter; cleared after each test.
|
|
const setSubmitValue = (value: Record<string, unknown>) => {
|
|
(globalThis as Record<string, unknown>).__INK_FORM_SUBMIT_VALUE__ = value;
|
|
};
|
|
|
|
afterEach(() => {
|
|
delete (globalThis as Record<string, unknown>).__INK_FORM_SUBMIT_VALUE__;
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
// Render → submit form → let the awaited callTool + setState settle.
|
|
const renderAndSubmit = async (
|
|
client: InspectorClient | null,
|
|
submitValue: Record<string, unknown> = {},
|
|
) => {
|
|
const onClose = vi.fn();
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={makeTool()}
|
|
inspectorClient={client}
|
|
width={80}
|
|
height={24}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
await tick();
|
|
setSubmitValue(submitValue);
|
|
api.stdin.write("\r");
|
|
await tick();
|
|
await tick();
|
|
return { ...api, onClose };
|
|
};
|
|
|
|
describe("ToolTestModal", () => {
|
|
it("renders the form initially without invoking the client", async () => {
|
|
const callTool = vi.fn();
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={makeTool()}
|
|
inspectorClient={fakeClient(callTool)}
|
|
width={80}
|
|
height={24}
|
|
onClose={vi.fn()}
|
|
/>,
|
|
);
|
|
await tick();
|
|
expect(callTool).not.toHaveBeenCalled();
|
|
api.unmount();
|
|
});
|
|
|
|
it("falls back to a default form structure (and name) when the tool has no inputSchema or name", async () => {
|
|
const callTool = vi.fn();
|
|
const tool = makeTool({ inputSchema: undefined, name: "" });
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={tool}
|
|
inspectorClient={fakeClient(callTool)}
|
|
width={80}
|
|
height={24}
|
|
onClose={vi.fn()}
|
|
/>,
|
|
);
|
|
await tick();
|
|
api.unmount();
|
|
});
|
|
|
|
it("uses the 'Unknown Tool' label when a schema-bearing tool has an empty name", async () => {
|
|
const callTool = vi.fn();
|
|
const tool = makeTool({ name: "" });
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={tool}
|
|
inspectorClient={fakeClient(callTool)}
|
|
width={80}
|
|
height={24}
|
|
onClose={vi.fn()}
|
|
/>,
|
|
);
|
|
await tick();
|
|
api.unmount();
|
|
});
|
|
|
|
it("renders the loading state while the call is in flight", async () => {
|
|
let resolveCall: (v: unknown) => void = () => {};
|
|
const pending = new Promise((resolve) => {
|
|
resolveCall = resolve;
|
|
});
|
|
const callTool = vi.fn().mockReturnValue(pending);
|
|
const onClose = vi.fn();
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={makeTool()}
|
|
inspectorClient={fakeClient(callTool)}
|
|
width={80}
|
|
height={24}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
await tick();
|
|
setSubmitValue({});
|
|
api.stdin.write("\r");
|
|
await tick();
|
|
// The component is now committed in the "loading" state (call not resolved).
|
|
expect(callTool).toHaveBeenCalled();
|
|
resolveCall({
|
|
success: true,
|
|
result: { content: [{ type: "text", text: "done" }] },
|
|
});
|
|
await tick();
|
|
await tick();
|
|
api.unmount();
|
|
});
|
|
|
|
it("calls callTool and shows successful output", async () => {
|
|
const callTool = vi.fn().mockResolvedValue({
|
|
success: true,
|
|
result: { content: [{ type: "text", text: "hello" }] },
|
|
error: undefined,
|
|
});
|
|
const { onClose, stdin, unmount } = await renderAndSubmit(
|
|
fakeClient(callTool),
|
|
{ foo: "bar" },
|
|
);
|
|
expect(callTool).toHaveBeenCalledWith(makeTool(), { foo: "bar" });
|
|
// Drive scroll keys in results state for scrollBy / page coverage.
|
|
stdin.write(DOWN);
|
|
await tick();
|
|
stdin.write(UP);
|
|
await tick();
|
|
stdin.write(PAGE_DOWN);
|
|
await tick();
|
|
stdin.write(PAGE_UP);
|
|
await tick();
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("renders the error branch when the result has isError === true", async () => {
|
|
const callTool = vi.fn().mockResolvedValue({
|
|
success: true,
|
|
result: { isError: true, content: [{ type: "text", text: "oops" }] },
|
|
});
|
|
const { unmount } = await renderAndSubmit(fakeClient(callTool));
|
|
expect(callTool).toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("renders the failed-call branch when success is false and result is null", async () => {
|
|
const callTool = vi.fn().mockResolvedValue({
|
|
success: false,
|
|
result: null,
|
|
error: "tool blew up",
|
|
});
|
|
const { unmount } = await renderAndSubmit(fakeClient(callTool));
|
|
expect(callTool).toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("uses the default error message when a failed call has no error string", async () => {
|
|
const callTool = vi.fn().mockResolvedValue({
|
|
success: false,
|
|
result: null,
|
|
});
|
|
const { unmount } = await renderAndSubmit(fakeClient(callTool));
|
|
expect(callTool).toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("catches an Error thrown by callTool", async () => {
|
|
const callTool = vi.fn().mockRejectedValue(new Error("network down"));
|
|
const { unmount } = await renderAndSubmit(fakeClient(callTool));
|
|
expect(callTool).toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("catches a non-Error value thrown by callTool", async () => {
|
|
const callTool = vi.fn().mockRejectedValue("boom");
|
|
const { unmount } = await renderAndSubmit(fakeClient(callTool));
|
|
expect(callTool).toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("does nothing on submit when inspectorClient is null (early-return guard)", async () => {
|
|
const { onClose, unmount } = await renderAndSubmit(null);
|
|
// No client to call; stays in form state and onClose untouched.
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
unmount();
|
|
});
|
|
|
|
it("closes on ESC while in form state", async () => {
|
|
const onClose = vi.fn();
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={makeTool()}
|
|
inspectorClient={fakeClient(vi.fn())}
|
|
width={80}
|
|
height={24}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
await tick();
|
|
api.stdin.write(ESC);
|
|
await tick();
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
api.unmount();
|
|
});
|
|
|
|
it("closes on ESC while in results state", async () => {
|
|
const callTool = vi.fn().mockResolvedValue({
|
|
success: true,
|
|
result: { content: [{ type: "text", text: "hi" }] },
|
|
});
|
|
const { onClose, stdin, unmount } = await renderAndSubmit(
|
|
fakeClient(callTool),
|
|
);
|
|
stdin.write(ESC);
|
|
await tick();
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
unmount();
|
|
});
|
|
|
|
it("responds to a stdout resize event", async () => {
|
|
const onClose = vi.fn();
|
|
const api = render(
|
|
<ToolTestModal
|
|
tool={makeTool()}
|
|
inspectorClient={fakeClient(vi.fn())}
|
|
width={80}
|
|
height={24}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
await tick();
|
|
process.stdout.emit("resize");
|
|
await tick();
|
|
api.unmount();
|
|
});
|
|
});
|