edgevoid/vue-tui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Box defaults to flexDirection='row', flexShrink=1, flexWrap='nowrap', flexGrow=0

Browse Source 
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>
This commit is contained in:
Yunfei He
2026-05-26 00:49:27 +08:00
parent 8351712ea2
commit c4161c99a7
5 changed files with 148 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/runtime-tests/integration/components/background-color.test.tsx
+16 -21
View File
@@ -114,10 +114,9 @@ test("Multiple Text elements inherit same background", async () => {
)),
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"Hello 
World "
`);
expect(lastFrame()).toMatchInlineSnapshot(
`"Hello World"`,
);
});
test("Mixed text with and without background inheritance", async () => {
@@ -131,11 +130,9 @@ test("Mixed text with and without background inheritance", async () => {
)),
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"Inherited 
No BG 
Red BG "
`);
expect(lastFrame()).toMatchInlineSnapshot(
`"Inherited No BG Red BG"`,
);
});
test("Complex nested structure with background inheritance", async () => {
@@ -153,11 +150,9 @@ test("Complex nested structure with background inheritance", async () => {
)),
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"Outer:  
Inner:  
Explicit"
`);
expect(lastFrame()).toMatchInlineSnapshot(
`"Outer: Inner: Explicit"`,
);
});
test("Box background with standard color", async () => {
@@ -246,7 +241,7 @@ test("Box background fills entire area with standard color", async () => {
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"Hello 
"Hello 
 
 "
`);
@@ -317,7 +312,7 @@ test("Box background with border fills content area", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭────────╮
│Hi │
│Hi │
│ │
│ │
╰────────╯"
@@ -335,7 +330,7 @@ test("Box background with padding fills entire padded area", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
" 
 Hi  
 Hi 
 
 
 "
@@ -358,8 +353,8 @@ test("Box background with center alignment fills entire area", async () => {
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
" 
Hi 
" Hi 
 
 "
`);
});
@@ -422,8 +417,8 @@ test("Box backgroundColor fills full width on every line when text wraps", async
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"Hello  
World!! "
"Hello   
World!! "
`);
});
packages/runtime-tests/integration/components/borders.test.tsx
+33 -45
View File
@@ -187,7 +187,7 @@ test("single node - box with horizontal alignment", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭──────────────────╮
│Hello World │
│ Hello World │
╰──────────────────╯"
`);
});
@@ -204,6 +204,14 @@ test("single node - box with vertical alignment", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭───────────╮
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│Hello World│
│ │
│ │
@@ -214,14 +222,6 @@ test("single node - box with vertical alignment", async () => {
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
╰───────────╯"
`);
});
@@ -377,7 +377,7 @@ test("multiple nodes - box with horizontal alignment", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭──────────────────╮
│Hello World │
│ Hello World │
╰──────────────────╯"
`);
});
@@ -394,6 +394,14 @@ test("multiple nodes - box with vertical alignment", async () => {
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭───────────╮
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│Hello World│
│ │
│ │
@@ -404,14 +412,6 @@ test("multiple nodes - box with vertical alignment", async () => {
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
╰───────────╯"
`);
});
@@ -486,11 +486,11 @@ test("nested boxes", async () => {
expect(lastFrame()).toMatchInlineSnapshot(`
"╭──────────────────────────────────────╮
│ │
│ ╭──────────────────────────────────╮ │
│ │ │ │
│ │ Hello World │ │
│ │ │ │
│ ╰──────────────────────────────────╯ │
│ ╭─────────────╮ │
│ │ │ │
│ │ Hello World │ │
│ │ │ │
│ ╰─────────────╯ │
│ │
╰──────────────────────────────────────╯"
`);
@@ -515,17 +515,11 @@ test("nested boxes - fit-content box with wide characters on flex-direction row"
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭────────────╮
│╭──────────╮│
││ミスター ││
│╰──────────╯│
│╭──────────╮│
││スポック ││
│╰──────────╯│
│╭──────────╮│
││カーク船長││
│╰──────────╯│
╰────────────╯"
"╭────────────────────────────────╮
│╭────────╮╭────────╮╭──────────╮│
││ミスター││スポック││カーク船長││
│╰────────╯╰────────╯╰──────────╯│
╰────────────────────────────────╯"
`);
});
@@ -548,17 +542,11 @@ test("nested boxes - fit-content box with emojis on flex-direction row", async (
{ columns: 100 },
);
expect(lastFrame()).toMatchInlineSnapshot(`
"╭────╮
│╭──╮│
││🦾││
│╰──╯│
│╭──╮│
││🌏││
│╰──╯│
│╭──╮│
││😋││
│╰──╯│
╰────╯"
"╭────────────╮
│╭──╮╭──╮╭──╮│
││🦾││🌏││😋││
│╰──╯╰──╯╰──╯│
╰────────────╯"
`);
});
packages/runtime-tests/integration/components/text.test.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ test("remeasure text when text nodes are changed", async () => {
const add = shallowRef(false);
const { lastFrame } = await render(
defineComponent(() => () => (
<Box>
<Box flexDirection="column">
<Text>abc{add.value ? <Text>x</Text> : null}</Text>
</Box>
)),