a3bb679f1e
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>
102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import { render } from "./helpers/renderTui";
|
|
import { Text } from "ink";
|
|
|
|
// ScrollView: passthrough so `content` mounts and the imperative ref API
|
|
// (scrollBy / getViewportHeight) exists for the scroll-key handlers.
|
|
vi.mock("ink-scroll-view", () => import("./helpers/inkScrollViewMock.js"));
|
|
|
|
import { DetailsModal } from "../src/components/DetailsModal.js";
|
|
|
|
// Ink processes stdin keypresses asynchronously — await this after stdin.write.
|
|
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~`;
|
|
|
|
describe("DetailsModal", () => {
|
|
it("renders without crashing with content", () => {
|
|
const { unmount } = render(
|
|
<DetailsModal
|
|
title="Details"
|
|
content={<Text>some content</Text>}
|
|
width={120}
|
|
height={30}
|
|
onClose={() => {}}
|
|
/>,
|
|
);
|
|
// Modal is position="absolute" so lastFrame is empty; just confirm it
|
|
// mounted and unmounts cleanly (running the resize cleanup effect).
|
|
unmount();
|
|
});
|
|
|
|
it("handles all scroll keys via the ScrollView ref", async () => {
|
|
const { stdin } = render(
|
|
<DetailsModal
|
|
title="Details"
|
|
content={<Text>scrollable</Text>}
|
|
width={120}
|
|
height={30}
|
|
onClose={() => {}}
|
|
/>,
|
|
);
|
|
|
|
await tick();
|
|
stdin.write(DOWN);
|
|
await tick();
|
|
stdin.write(UP);
|
|
await tick();
|
|
stdin.write(PAGE_DOWN);
|
|
await tick();
|
|
stdin.write(PAGE_UP);
|
|
await tick();
|
|
});
|
|
|
|
it("ignores keys it does not handle", async () => {
|
|
const onClose = vi.fn();
|
|
const { stdin } = render(
|
|
<DetailsModal
|
|
title="Details"
|
|
content={<Text>x</Text>}
|
|
width={120}
|
|
height={30}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
|
|
await tick();
|
|
// A plain character key matches none of the branches.
|
|
stdin.write("a");
|
|
await tick();
|
|
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("calls onClose on ESC", async () => {
|
|
const onClose = vi.fn();
|
|
const { stdin } = render(
|
|
<DetailsModal
|
|
title="Details"
|
|
content={<Text>x</Text>}
|
|
width={120}
|
|
height={30}
|
|
onClose={onClose}
|
|
/>,
|
|
);
|
|
|
|
await tick();
|
|
stdin.write(ESC);
|
|
await tick();
|
|
|
|
expect(onClose).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|