inspector/clients/tui/__tests__/PromptTestModal.test.tsx
cliffhall a3bb679f1e fix: strip ANSI from TUI test frames so FORCE_COLOR cannot break assertions (#2207)
Ink writes styling as escape sequences inside the styled run, so an
accelerator underline splits the word it decorates: `<Text underline>I</Text>nfo`
reaches the frame buffer with escapes between `I` and `nfo`, and a plain
`toContain("Info")` fails against a component that is rendering correctly.
Chalk only emits color when it detects a TTY, so CI stays green and the six
failures land only on a developer whose shell exports FORCE_COLOR.

Add `__tests__/helpers/renderTui.tsx` — ink-testing-library's `render` with
`lastFrame()` and `frames` ANSI-stripped — and point all 16 renderer test
files at it. `frames` is a getter reading through to the live array, since
Ink appends to it as the component re-renders; the raw bytes stay reachable
as `stdout.lastFrame()`.

Pinning FORCE_COLOR=0 would turn the six green while hiding the class: any
future assertion on styled text has the same problem, and the suite would
stop covering the styled path at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MFp2LVH7UJST5i8bDBJghw
Signed-off-by: cliffhall <cliff@futurescale.com>
2026-09-06 20:00:15 -04:00

375 lines
11 KiB
TypeScript

import React from "react";
import { describe, it, expect, vi, afterEach } from "vitest";
import { render } from "./helpers/renderTui";
import type { InspectorClient } from "@inspector/core/mcp/index.js";
import { AuthRecoveryRequiredError } from "@inspector/core/auth/challenge.js";
import type { Prompt } from "@modelcontextprotocol/client";
// ScrollView: passthrough so the results JSX actually mounts (and is counted
// for coverage) and the imperative ref API exists for the scroll handlers.
vi.mock("ink-scroll-view", () => import("./helpers/inkScrollViewMock.js"));
// Form: a double that fires onSubmit when the user presses Enter ("\r").
vi.mock("ink-form", () => import("./helpers/inkFormMock.js"));
import { PromptTestModal } from "../src/components/PromptTestModal.js";
// Ink processes stdin keypresses asynchronously — await this after stdin.write
// and let the async getPrompt promise + setState settle.
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 ENTER = "\r";
const makePrompt = (over: Partial<Prompt> = {}): Prompt =>
({
name: "alpha",
description: "First prompt",
arguments: [{ name: "topic", description: "a topic", required: true }],
...over,
}) as unknown as Prompt;
// Set the value the mock Form submits on Enter; reset afterward so cases
// don't leak into one another.
function setFormSubmitValue(value: Record<string, string> | undefined) {
if (value === undefined) {
delete (globalThis as Record<string, unknown>).__INK_FORM_SUBMIT_VALUE__;
} else {
(globalThis as Record<string, unknown>).__INK_FORM_SUBMIT_VALUE__ = value;
}
}
afterEach(() => {
setFormSubmitValue(undefined);
vi.restoreAllMocks();
});
describe("PromptTestModal", () => {
it("submits the form, calls getPrompt, and shows results (success path)", async () => {
const getPrompt = vi.fn().mockResolvedValue({
result: {
description: "ok",
messages: [{ role: "user", content: { type: "text", text: "hello" } }],
},
});
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const prompt = makePrompt();
// Submit a non-empty value so the "Arguments:" block (input length > 0)
// is rendered in the results view.
setFormSubmitValue({ topic: "weather" });
const { stdin } = render(
<PromptTestModal
prompt={prompt}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledWith("alpha", { topic: "weather" });
// Now in results mode — drive every scroll key branch.
stdin.write(DOWN);
await tick();
stdin.write(UP);
await tick();
stdin.write(PAGE_DOWN);
await tick();
stdin.write(PAGE_UP);
await tick();
});
it("renders the loading state while getPrompt is pending", async () => {
let resolveGetPrompt!: (value: { result: { messages: unknown[] } }) => void;
const getPrompt = vi.fn().mockReturnValue(
new Promise<{ result: { messages: unknown[] } }>((resolve) => {
resolveGetPrompt = resolve;
}),
);
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
// One tick: state has transitioned to "loading" but the promise is still
// pending, so the loading JSX is mounted.
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
// Now let it resolve and settle into results.
resolveGetPrompt({ result: { messages: [] } });
await tick();
await tick();
});
it("renders results with no arguments block when submitted value is empty", async () => {
const getPrompt = vi.fn().mockResolvedValue({
result: { messages: [] },
});
const inspectorClient = { getPrompt } as unknown as InspectorClient;
// Default submit value is {} → Object.keys(input).length === 0 branch.
const { stdin } = render(
<PromptTestModal
prompt={makePrompt({ description: undefined })}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
});
it("shows error results when getPrompt rejects with an Error", async () => {
const getPrompt = vi.fn().mockRejectedValue(new Error("boom"));
const inspectorClient = { getPrompt } as unknown as InspectorClient;
setFormSubmitValue({ topic: "x" });
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
// Scroll through the error results to exercise the results scroll branches.
stdin.write(DOWN);
await tick();
});
it("handles a rejected getPrompt that throws a string", async () => {
const getPrompt = vi.fn().mockRejectedValue("string failure");
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
});
it("handles a rejected getPrompt that throws an object with a message", async () => {
const getPrompt = vi
.fn()
.mockRejectedValue({ message: "obj msg", code: 7 });
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
});
it("handles a rejected getPrompt that throws an object without a message", async () => {
const getPrompt = vi.fn().mockRejectedValue({ code: 99 });
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
});
it("handles a rejected getPrompt that throws a non-object, non-string value", async () => {
const getPrompt = vi.fn().mockRejectedValue(42);
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(getPrompt).toHaveBeenCalledTimes(1);
});
it("does nothing when inspectorClient is null (early return)", async () => {
const onClose = vi.fn();
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={null}
width={120}
height={30}
onClose={onClose}
/>,
);
await tick();
// Submitting the form hits handleFormSubmit which returns early because
// inspectorClient is null — state stays "form", no crash.
stdin.write(ENTER);
await tick();
await tick();
// Still in form mode: a non-escape key is ignored by the form-state branch.
stdin.write("a");
await tick();
expect(onClose).not.toHaveBeenCalled();
});
it("closes on ESC and resets state", async () => {
const onClose = vi.fn();
const getPrompt = vi.fn().mockResolvedValue({ result: { messages: [] } });
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={onClose}
/>,
);
await tick();
// Get into results mode first so the escape-from-results path runs.
stdin.write(ENTER);
await tick();
await tick();
stdin.write(ESC);
await tick();
expect(onClose).toHaveBeenCalledTimes(1);
});
it("unmounts cleanly, running cleanup effects", async () => {
const getPrompt = vi.fn().mockResolvedValue({ result: { messages: [] } });
const inspectorClient = { getPrompt } as unknown as InspectorClient;
const { unmount } = render(
<PromptTestModal
prompt={makePrompt({ arguments: undefined, description: undefined })}
inspectorClient={inspectorClient}
width={120}
height={30}
onClose={() => {}}
/>,
);
await tick();
unmount();
await tick();
expect(true).toBe(true);
});
it("delegates AuthRecoveryRequiredError to onAuthRecoveryRequired and closes", async () => {
const recovery = new AuthRecoveryRequiredError(
new URL("https://auth.example.com/authorize"),
{ reason: "insufficient_scope", requiredScopes: ["weather:read"] },
);
const getPrompt = vi.fn().mockRejectedValue(recovery);
const onClose = vi.fn();
const onAuthRecoveryRequired = vi.fn();
setFormSubmitValue({ topic: "x" });
const { stdin } = render(
<PromptTestModal
prompt={makePrompt()}
inspectorClient={{ getPrompt } as unknown as InspectorClient}
width={120}
height={30}
onClose={onClose}
onAuthRecoveryRequired={onAuthRecoveryRequired}
/>,
);
await tick();
stdin.write(ENTER);
await tick();
await tick();
expect(onAuthRecoveryRequired).toHaveBeenCalledWith(recovery);
expect(onClose).toHaveBeenCalledTimes(1);
});
});