Yunfei He
c4161c99a7
Match Ink's Box defaults by setting yoga properties at node creation time. This ensures proper row-based layout regardless of Vue's prop patching order. Updated affected test snapshots and added explicit flexDirection="column" where tests relied on the old column default. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
88 lines
2.5 KiB
TypeScript
88 lines
2.5 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("Box defaults to flexDirection='row'", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box>
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("AB");
|
|
});
|
|
|
|
test("Box defaults to flexShrink=1", async () => {
|
|
// Two boxes inside a constrained parent: if flexShrink defaults to 1,
|
|
// they should shrink to fit rather than overflowing.
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box width={10}>
|
|
<Box width={8}>
|
|
<Text>AAAAAAAA</Text>
|
|
</Box>
|
|
<Box width={8}>
|
|
<Text>BBBBBBBB</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Both boxes should shrink to fit within 10 columns
|
|
const frame = lastFrame({ trimLines: true })!;
|
|
// The frame should be at most 10 chars wide
|
|
const maxLineWidth = Math.max(...frame.split("\n").map((l) => l.length));
|
|
expect(maxLineWidth).toBeLessThanOrEqual(10);
|
|
});
|
|
|
|
test("Box defaults to flexWrap='nowrap'", async () => {
|
|
// With nowrap, items stay on one line even if they overflow
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box width={10}>
|
|
<Text>Hello</Text>
|
|
<Text>World</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// Items should be on the same line (row direction, nowrap)
|
|
const frame = lastFrame({ trimLines: true })!;
|
|
expect(frame.split("\n")).toHaveLength(1);
|
|
expect(frame).toBe("HelloWorld");
|
|
});
|
|
|
|
test("Box defaults to flexGrow=0", async () => {
|
|
// A box with no explicit flexGrow should not grow to fill available space
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box width={20}>
|
|
<Box>
|
|
<Text>A</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
// The inner box should only be as wide as its content (1 char), not 20
|
|
const frame = lastFrame({ trimLines: true })!;
|
|
expect(frame).toBe("A");
|
|
});
|
|
|
|
test("user-provided props override Box defaults", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="column">
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A\nB");
|
|
});
|