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/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(`
"╭────╮
│╭──╮│
││🦾││
│╰──╯│
│╭──╮│
││🌏││
│╰──╯│
│╭──╮│
││😋││
│╰──╯│
╰────╯"
"╭────────────╮
│╭──╮╭──╮╭──╮│
││🦾││🌏││😋││
│╰──╯╰──╯╰──╯│
╰────────────╯"
`);
});