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>
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect } from "vitest";
|
|
import { render } from "./helpers/renderTui";
|
|
import { SelectableItem } from "../src/components/SelectableItem.js";
|
|
|
|
describe("SelectableItem", () => {
|
|
it("shows the ▶ marker and label when selected", () => {
|
|
const { lastFrame } = render(
|
|
<SelectableItem isSelected>Tool A</SelectableItem>,
|
|
);
|
|
expect(lastFrame()).toContain("▶");
|
|
expect(lastFrame()).toContain("Tool A");
|
|
});
|
|
|
|
it("omits the marker when not selected", () => {
|
|
const { lastFrame } = render(
|
|
<SelectableItem isSelected={false}>Tool B</SelectableItem>,
|
|
);
|
|
expect(lastFrame()).not.toContain("▶");
|
|
expect(lastFrame()).toContain("Tool B");
|
|
});
|
|
|
|
it("renders bold and non-bold variants without error", () => {
|
|
const bold = render(
|
|
<SelectableItem isSelected bold>
|
|
Bold
|
|
</SelectableItem>,
|
|
);
|
|
expect(bold.lastFrame()).toContain("Bold");
|
|
|
|
const plain = render(
|
|
<SelectableItem isSelected={false}>Plain</SelectableItem>,
|
|
);
|
|
expect(plain.lastFrame()).toContain("Plain");
|
|
});
|
|
});
|