Yunfei He
b8778c1847
Set flexDirection=row, flexShrink=1, flexGrow=0 on text yoga nodes at creation time, matching Ink's <ink-text> style defaults. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { defineComponent } from "vue";
|
|
import { expect, test } from "vite-plus/test";
|
|
import { render } from "@vue-tui/testing";
|
|
import { Box, Text } from "@vue-tui/runtime";
|
|
|
|
test("nested top-level Text nodes flow horizontally (row direction)", async () => {
|
|
// In Ink, <Text> renders with flexDirection='row' so that sibling
|
|
// top-level <Text> elements within a row-direction <Box> display inline.
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box>
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Box defaults to row, so A and B should be on the same line
|
|
expect(lastFrame({ trimLines: true })).toBe("AB");
|
|
});
|
|
|
|
test("top-level Text renders with flexDirection='row' for nested Text", async () => {
|
|
// Two <Text> children inside a column <Box>: each is its own yoga node.
|
|
// Within a single <Text>, nested <Text> renders as virtual-text (no yoga).
|
|
// This test confirms that top-level Text nodes participate in the parent's
|
|
// flex layout with row direction by default.
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="column">
|
|
<Text>
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Nested Text within a single Text renders inline (virtual-text), so "AB"
|
|
expect(lastFrame({ trimLines: true })).toBe("AB");
|
|
});
|