Yunfei He
22ecbe0f80
Translates flex, direction, wrap, align, justify, gap, padding, margin, width-height, position, display, and overflow tests from Ink. Adds trimLines mode and trailing-newline strip to test helper. Fixes Box type for alignContent (space-between/around/evenly) and alignSelf (stretch/baseline). 21 tests fail due to behavioral differences (overflow clipping, percentage dimensions, relative position offsets, align-content space-* variants). These represent real gaps to investigate. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
123 lines
3.3 KiB
TypeScript
123 lines
3.3 KiB
TypeScript
import { defineComponent } from "vue";
|
|
import { expect, test } from "vite-plus/test";
|
|
import { render } from "@vue-tui/testing";
|
|
import { Box, Text, Newline } from "@vue-tui/runtime";
|
|
|
|
test("row - align text to center", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="center" height={3}>
|
|
<Text>Test</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("\nTest\n");
|
|
});
|
|
|
|
test("row - align multiple text nodes to center", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="center" height={3}>
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("\nAB\n");
|
|
});
|
|
|
|
test("row - align text to bottom", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="flex-end" height={3}>
|
|
<Text>Test</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("\n\nTest");
|
|
});
|
|
|
|
test("row - align multiple text nodes to bottom", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="flex-end" height={3}>
|
|
<Text>A</Text>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("\n\nAB");
|
|
});
|
|
|
|
test("column - align text to center", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="column" alignItems="center" width={10}>
|
|
<Text>Test</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe(" Test");
|
|
});
|
|
|
|
test("column - align text to right", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="column" alignItems="flex-end" width={10}>
|
|
<Text>Test</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe(" Test");
|
|
});
|
|
|
|
test("row - align items stretch", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="stretch" height={5}>
|
|
<Box borderStyle="single">
|
|
<Text>X</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("┌─┐\n│X│\n│ │\n│ │\n└─┘");
|
|
});
|
|
|
|
test("row - default align items stretches children", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" height={5}>
|
|
<Box borderStyle="single">
|
|
<Text>X</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("┌─┐\n│X│\n│ │\n│ │\n└─┘");
|
|
});
|
|
|
|
test("row - align text to baseline", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" alignItems="baseline" height={3}>
|
|
<Text>
|
|
A
|
|
<Newline />B
|
|
</Text>
|
|
<Text>X</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A\nBX\n");
|
|
});
|