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>
57 lines
2 KiB
TypeScript
57 lines
2 KiB
TypeScript
import React from "react";
|
|
import { Text } from "ink";
|
|
import { describe, expect, it } from "vitest";
|
|
import { render, stripFrameStyling } from "./helpers/renderTui";
|
|
|
|
// The escape sequences ink emits for `<Text underline>`, spelled out here so
|
|
// the assertions hold regardless of whether the ambient environment has
|
|
// FORCE_COLOR set — chalk emits nothing without a TTY, which is exactly why
|
|
// #2207 never reproduced in CI.
|
|
const ESC = "\u001B";
|
|
const UNDERLINE_OPEN = `${ESC}[4m`;
|
|
const UNDERLINE_CLOSE = `${ESC}[24m`;
|
|
const SPLIT_WORD = `${UNDERLINE_OPEN}I${UNDERLINE_CLOSE}nfo`;
|
|
|
|
describe("stripFrameStyling", () => {
|
|
it("removes styling that splits a word", () => {
|
|
expect(stripFrameStyling(SPLIT_WORD)).toBe("Info");
|
|
});
|
|
|
|
it("leaves an unstyled frame untouched", () => {
|
|
expect(stripFrameStyling("Info")).toBe("Info");
|
|
});
|
|
|
|
it("passes undefined through", () => {
|
|
expect(stripFrameStyling(undefined)).toBeUndefined();
|
|
});
|
|
});
|
|
|
|
describe("render", () => {
|
|
it("strips styling from lastFrame", () => {
|
|
const { stdout, lastFrame } = render(<Text>placeholder</Text>);
|
|
stdout.write(SPLIT_WORD);
|
|
expect(lastFrame()).toBe("Info");
|
|
});
|
|
|
|
it("strips styling from frames, and keeps reading the live array", () => {
|
|
const instance = render(<Text>placeholder</Text>);
|
|
const before = instance.frames.length;
|
|
instance.stdout.write(SPLIT_WORD);
|
|
expect(instance.frames).toHaveLength(before + 1);
|
|
expect(instance.frames.at(-1)).toBe("Info");
|
|
});
|
|
|
|
it("leaves the raw bytes reachable through stdout", () => {
|
|
const instance = render(<Text>placeholder</Text>);
|
|
instance.stdout.write(SPLIT_WORD);
|
|
expect(instance.stdout.lastFrame()).toBe(SPLIT_WORD);
|
|
});
|
|
|
|
it("still exposes the rest of the ink-testing-library instance", () => {
|
|
const { rerender, lastFrame, unmount } = render(<Text>first</Text>);
|
|
expect(lastFrame()).toContain("first");
|
|
rerender(<Text>second</Text>);
|
|
expect(lastFrame()).toContain("second");
|
|
unmount();
|
|
});
|
|
});
|