Yunfei He
8585598d14
Transform nodes now participate in yoga layout with flexShrink=1, flexDirection='row', matching Ink's Transform which renders as ink-text. This fixes multi-line text under Transform not getting proper layout height. Transform nodes inside Text parents remain inline (excluded from yoga tree) to preserve renderTextWithInlineStyles behavior. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { defineComponent } from "vue";
|
|
import { expect, test } from "vite-plus/test";
|
|
import { render } from "@vue-tui/testing";
|
|
import { Box, Text, Transform } from "@vue-tui/runtime";
|
|
|
|
test("Transform participates in yoga layout (multi-line text)", async () => {
|
|
// When Transform is a yoga carrier, the root layout height accounts for
|
|
// multi-line text under a Transform node.
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Transform transform={(s: string, idx: number) => `[${idx}: ${s}]`}>
|
|
<Text>{"hello\nworld"}</Text>
|
|
</Transform>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Both lines should be visible with the transform applied
|
|
expect(lastFrame()).toBe("[0: hello]\n[1: world]");
|
|
});
|
|
|
|
test("Transform defaults to flexShrink=1 and flexDirection='row'", async () => {
|
|
// Transform should behave like Ink's ink-text node with these defaults
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box width={20}>
|
|
<Transform transform={(s: string) => s.toUpperCase()}>
|
|
<Text>hello</Text>
|
|
</Transform>
|
|
<Text> world</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Transform and Text are siblings in a row-direction Box.
|
|
// They should be on the same line.
|
|
expect(lastFrame({ trimLines: true })).toBe("HELLO world");
|
|
});
|