Yunfei He
d14c11e2d2
height=6 containers produce 6 lines. Ink's renderToString returns
"A\n\n\nB\n\n" (preserving trailing blank lines). The tests incorrectly
expected "A\n\n\nB" with a comment claiming lastFrame({ trimLines: true })
trims trailing newlines — it does not; it only trims trailing spaces per
line.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
135 lines
3.4 KiB
TypeScript
135 lines
3.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("grow equally", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={6}>
|
|
<Box flexGrow={1}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Box flexGrow={1}>
|
|
<Text>B</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B");
|
|
});
|
|
|
|
test("grow one element", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={6}>
|
|
<Box flexGrow={1}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B");
|
|
});
|
|
|
|
test("do not shrink", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={16}>
|
|
<Box flexShrink={0} width={6}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Box flexShrink={0} width={6}>
|
|
<Text>B</Text>
|
|
</Box>
|
|
<Box width={6}>
|
|
<Text>C</Text>
|
|
</Box>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B C");
|
|
});
|
|
|
|
test("shrink equally", async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={10}>
|
|
<Box flexShrink={1} width={6}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Box flexShrink={1} width={6}>
|
|
<Text>B</Text>
|
|
</Box>
|
|
<Text>C</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B C");
|
|
});
|
|
|
|
test('set flex basis with flexDirection="row" container', async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={6}>
|
|
<Box flexBasis={3}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B");
|
|
});
|
|
|
|
test('set flex basis in percent with flexDirection="row" container', async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box flexDirection="row" width={6}>
|
|
<Box flexBasis="50%">
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A B");
|
|
});
|
|
|
|
test('set flex basis with flexDirection="column" container', async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box height={6} flexDirection="column">
|
|
<Box flexBasis={3}>
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A\n\n\nB\n\n");
|
|
});
|
|
|
|
test('set flex basis in percent with flexDirection="column" container', async () => {
|
|
const { lastFrame } = await render(
|
|
defineComponent(() => () => (
|
|
<Box height={6} flexDirection="column">
|
|
<Box flexBasis="50%">
|
|
<Text>A</Text>
|
|
</Box>
|
|
<Text>B</Text>
|
|
</Box>
|
|
)),
|
|
{ columns: 100 },
|
|
);
|
|
expect(lastFrame({ trimLines: true })).toBe("A\n\n\nB\n\n");
|
|
});
|