fix: Text node defaults to flexDirection='row' matching Ink's ink-text

Set flexDirection=row, flexShrink=1, flexGrow=0 on text yoga nodes at creation time, matching Ink's <ink-text> style defaults. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-26 00:52:37 +08:00
parent 2e1493b785
commit b8778c1847
2 changed files with 48 additions and 0 deletions
@@ -0,0 +1,40 @@
+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("nested top-level Text nodes flow horizontally (row direction)", async () => {
+  // In Ink, <Text> renders with flexDirection='row' so that sibling
+  // top-level <Text> elements within a row-direction <Box> display inline.
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box>
+        <Text>A</Text>
+        <Text>B</Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // Box defaults to row, so A and B should be on the same line
+  expect(lastFrame({ trimLines: true })).toBe("AB");
+});
+
+test("top-level Text renders with flexDirection='row' for nested Text", async () => {
+  // Two <Text> children inside a column <Box>: each is its own yoga node.
+  // Within a single <Text>, nested <Text> renders as virtual-text (no yoga).
+  // This test confirms that top-level Text nodes participate in the parent's
+  // flex layout with row direction by default.
+  const { lastFrame } = await render(
+    defineComponent(() => () => (
+      <Box flexDirection="column">
+        <Text>
+          <Text>A</Text>
+          <Text>B</Text>
+        </Text>
+      </Box>
+    )),
+    { columns: 100 },
+  );
+  // Nested Text within a single Text renders inline (virtual-text), so "AB"
+  expect(lastFrame({ trimLines: true })).toBe("AB");
+});