Files
vue-tui/packages/runtime-tests/integration/layout/gap.test.tsx
T
Yunfei He 22ecbe0f80 test: port Ink layout tests (157 passing, 21 known failures)
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>
2026-05-25 21:24:31 +08:00

49 lines
1.2 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("gap", async () => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box flexDirection="row" gap={1} width={3} flexWrap="wrap">
<Text>A</Text>
<Text>B</Text>
<Text>C</Text>
</Box>
)),
{ columns: 100 },
);
expect(lastFrame({ trimLines: true })).toBe("A B\n\nC");
});
test("column gap", async () => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box flexDirection="row" gap={1}>
<Text>A</Text>
<Text>B</Text>
</Box>
)),
{ columns: 100 },
);
expect(lastFrame({ trimLines: true })).toBe("A B");
});
test("row gap", async () => {
const { lastFrame } = await render(
defineComponent(() => () => (
<Box flexDirection="column" gap={1}>
<Text>A</Text>
<Text>B</Text>
</Box>
)),
{ columns: 100 },
);
expect(lastFrame({ trimLines: true })).toBe("A\n\nB");
});
// Skipped: gap - concurrent
// Skipped: column gap - concurrent
// Skipped: row gap - concurrent