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>
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import { describe, it, expect } from "vitest";
|
|
import { render } from "./helpers/renderTui";
|
|
import { Tabs } from "../src/components/Tabs.js";
|
|
|
|
const noop = () => {};
|
|
|
|
describe("Tabs", () => {
|
|
it("renders the default visible tabs (auth + logging shown, requests hidden)", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs activeTab="info" onTabChange={noop} width={120} />,
|
|
);
|
|
const frame = lastFrame() ?? "";
|
|
expect(frame).toContain("Info");
|
|
expect(frame).toContain("Auth");
|
|
expect(frame).toContain("Console");
|
|
expect(frame).toContain("Protocol");
|
|
// Network defaults to hidden
|
|
expect(frame).not.toContain("Network");
|
|
});
|
|
|
|
it("hides the auth tab when showAuth is false", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs activeTab="info" onTabChange={noop} width={120} showAuth={false} />,
|
|
);
|
|
expect(lastFrame() ?? "").not.toContain("Auth");
|
|
});
|
|
|
|
it("hides the logging tab when showLogging is false", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs
|
|
activeTab="info"
|
|
onTabChange={noop}
|
|
width={120}
|
|
showLogging={false}
|
|
/>,
|
|
);
|
|
expect(lastFrame() ?? "").not.toContain("Console");
|
|
});
|
|
|
|
it("shows the requests tab when showRequests is true", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs
|
|
activeTab="info"
|
|
onTabChange={noop}
|
|
width={120}
|
|
showRequests={true}
|
|
/>,
|
|
);
|
|
expect(lastFrame() ?? "").toContain("Network");
|
|
});
|
|
|
|
it("marks the active tab with the ▶ marker", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs activeTab="tools" onTabChange={noop} width={120} />,
|
|
);
|
|
expect(lastFrame() ?? "").toContain("▶");
|
|
});
|
|
|
|
it("renders counts when provided and omits them otherwise", () => {
|
|
const withCounts = render(
|
|
<Tabs
|
|
activeTab="info"
|
|
onTabChange={noop}
|
|
width={120}
|
|
counts={{ tools: 3, resources: 0 }}
|
|
/>,
|
|
);
|
|
const frame = withCounts.lastFrame() ?? "";
|
|
expect(frame).toContain("(3)");
|
|
// count of 0 is defined, so it still renders
|
|
expect(frame).toContain("(0)");
|
|
});
|
|
|
|
it("highlights the focused active tab", () => {
|
|
const { lastFrame } = render(
|
|
<Tabs activeTab="info" onTabChange={noop} width={120} focused={true} />,
|
|
);
|
|
// focused active tab path renders without error and shows the marker
|
|
expect(lastFrame() ?? "").toContain("▶");
|
|
});
|
|
});
|