@mdxui/terminal 2.0.0

package/src/__tests__/renderers/unicode.test.ts

@@ -0,0 +1,1307 @@
+/**
+ * @mdxui/terminal UNICODE Renderer Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the UNICODE tier renderer.
+ * The UNICODE renderer uses unicode box-drawing characters (─, │, ┌, ┐, └, ┘, etc.)
+ * for prettier terminal output without colors.
+ *
+ * Part of the Universal Terminal UI 6-tier system:
+ * - TEXT: Plain text without formatting
+ * - MARKDOWN: Markdown syntax for simple formatting
+ * - ASCII: ASCII art (+, -, |, etc.)
+ * - UNICODE: Unicode box drawing (─, │, ┌, ┐, └, ┘) <-- This tier
+ * - ANSI: Full ANSI escape sequences for colors/styles
+ * - INTERACTIVE: Full interactive terminal UI with input handling
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+
+// ============================================================================
+// This import WILL FAIL until src/renderers/unicode.ts is implemented
+// ============================================================================
+import { renderUnicode } from '../../renderers/unicode'
+import type { UINode, RenderContext, ThemeTokens } from '../../core/types'
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Unicode box-drawing characters used by this renderer
+ */
+const UNICODE_CHARS = {
+  // Single box drawing
+  topLeft: '┌',
+  topRight: '┐',
+  bottomLeft: '└',
+  bottomRight: '┘',
+  horizontal: '─',
+  vertical: '│',
+
+  // T-junctions
+  teeLeft: '├',
+  teeRight: '┤',
+  teeTop: '┬',
+  teeBottom: '┴',
+  crossJunction: '┼',
+
+  // Double box drawing
+  doubleTopLeft: '╔',
+  doubleTopRight: '╗',
+  doubleBottomLeft: '╚',
+  doubleBottomRight: '╝',
+  doubleHorizontal: '═',
+  doubleVertical: '║',
+
+  // Rounded corners
+  roundedTopLeft: '╭',
+  roundedTopRight: '╮',
+  roundedBottomLeft: '╰',
+  roundedBottomRight: '╯',
+
+  // Bullets and list markers
+  bullet: '•',
+  hollowBullet: '◦',
+  squareBullet: '▪',
+  triangleRight: '▸',
+  triangleDown: '▾',
+  checkmark: '✓',
+  crossMark: '✗',
+  arrowRight: '→',
+  arrowDown: '↓',
+
+  // Progress bar characters
+  progressFull: '▓',
+  progressEmpty: '░',
+  progressHalf: '▒',
+
+  // Dividers
+  ellipsis: '…',
+  middleDot: '·',
+} as const
+
+/**
+ * ASCII fallback characters - used to verify UNICODE is NOT using these
+ */
+const ASCII_CHARS = {
+  topLeft: '+',
+  topRight: '+',
+  bottomLeft: '+',
+  bottomRight: '+',
+  horizontal: '-',
+  vertical: '|',
+  bullet: '*',
+  progressFull: '#',
+  progressEmpty: '-',
+} as const
+
+/**
+ * Create a default theme for testing
+ */
+function createTestTheme(): ThemeTokens {
+  return {
+    primary: '',
+    secondary: '',
+    muted: '',
+    foreground: '',
+    background: '',
+    border: '',
+    success: '',
+    warning: '',
+    error: '',
+    info: '',
+  }
+}
+
+/**
+ * Create a default render context for UNICODE tier
+ */
+function createTestContext(overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    tier: 'unicode',
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: false,
+    ...overrides,
+  }
+}
+
+// ============================================================================
+// renderUnicode Function Signature Tests
+// ============================================================================
+
+describe('renderUnicode', () => {
+  describe('function signature', () => {
+    it('exports renderUnicode function', () => {
+      expect(typeof renderUnicode).toBe('function')
+    })
+
+    it('accepts UINode as first argument', () => {
+      const node: UINode = { type: 'text', props: { content: 'Hello' } }
+      const result = renderUnicode(node)
+      expect(result).toBeDefined()
+    })
+
+    it('accepts optional RenderContext as second argument', () => {
+      const node: UINode = { type: 'text', props: { content: 'Hello' } }
+      const context = createTestContext()
+      const result = renderUnicode(node, context)
+      expect(result).toBeDefined()
+    })
+
+    it('returns a string', () => {
+      const node: UINode = { type: 'text', props: { content: 'Hello' } }
+      const result = renderUnicode(node)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Box Drawing Tests - Single Border Style
+  // ============================================================================
+
+  describe('box drawing - single style', () => {
+    it('renders simple box with single border corners', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should contain unicode box corners
+      expect(result).toContain(UNICODE_CHARS.topLeft)
+      expect(result).toContain(UNICODE_CHARS.topRight)
+      expect(result).toContain(UNICODE_CHARS.bottomLeft)
+      expect(result).toContain(UNICODE_CHARS.bottomRight)
+    })
+
+    it('renders horizontal lines with unicode dash', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should contain unicode horizontal line character
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+      // Should NOT contain ASCII dash for borders
+      expect(result).not.toMatch(/^\+-+\+$/m) // No ASCII box top/bottom
+    })
+
+    it('renders vertical lines with unicode pipe', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 5 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should contain unicode vertical line character
+      expect(result).toContain(UNICODE_CHARS.vertical)
+    })
+
+    it('renders complete single-border box structure', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 6, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+      const lines = result.split('\n')
+
+      // Top line should be: ┌────┐
+      expect(lines[0]).toMatch(/^┌─+┐$/)
+      // Middle lines should be: │    │
+      expect(lines[1]).toMatch(/^│.+│$/)
+      // Bottom line should be: └────┘
+      expect(lines[2]).toMatch(/^└─+┘$/)
+    })
+
+    it('box with content displays content inside', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single' },
+        children: [{ type: 'text', props: { content: 'Hello' } }],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Hello')
+      expect(result).toContain(UNICODE_CHARS.vertical)
+    })
+  })
+
+  // ============================================================================
+  // Box Drawing Tests - Double Border Style
+  // ============================================================================
+
+  describe('box drawing - double style', () => {
+    it('renders double border corners', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'double', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.doubleTopLeft)
+      expect(result).toContain(UNICODE_CHARS.doubleTopRight)
+      expect(result).toContain(UNICODE_CHARS.doubleBottomLeft)
+      expect(result).toContain(UNICODE_CHARS.doubleBottomRight)
+    })
+
+    it('renders double horizontal lines', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'double', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.doubleHorizontal)
+    })
+
+    it('renders double vertical lines', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'double', width: 10, height: 5 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.doubleVertical)
+    })
+
+    it('renders complete double-border box structure', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'double', width: 6, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+      const lines = result.split('\n')
+
+      // Top line should be: ╔════╗
+      expect(lines[0]).toMatch(/^╔═+╗$/)
+      // Middle lines should be: ║    ║
+      expect(lines[1]).toMatch(/^║.+║$/)
+      // Bottom line should be: ╚════╝
+      expect(lines[2]).toMatch(/^╚═+╝$/)
+    })
+  })
+
+  // ============================================================================
+  // Box Drawing Tests - Rounded Border Style
+  // ============================================================================
+
+  describe('box drawing - rounded style', () => {
+    it('renders rounded border corners', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'rounded', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.roundedTopLeft)
+      expect(result).toContain(UNICODE_CHARS.roundedTopRight)
+      expect(result).toContain(UNICODE_CHARS.roundedBottomLeft)
+      expect(result).toContain(UNICODE_CHARS.roundedBottomRight)
+    })
+
+    it('uses single line characters with rounded corners', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'rounded', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Rounded uses single-line horizontal/vertical but rounded corners
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+      expect(result).toContain(UNICODE_CHARS.roundedTopLeft)
+    })
+
+    it('renders complete rounded-border box structure', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'rounded', width: 6, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+      const lines = result.split('\n')
+
+      // Top line should be: ╭────╮
+      expect(lines[0]).toMatch(/^╭─+╮$/)
+      // Middle lines should be: │    │
+      expect(lines[1]).toMatch(/^│.+│$/)
+      // Bottom line should be: ╰────╯
+      expect(lines[2]).toMatch(/^╰─+╯$/)
+    })
+  })
+
+  // ============================================================================
+  // Text Rendering Tests
+  // ============================================================================
+
+  describe('text rendering', () => {
+    it('renders plain text content', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: 'Hello, World!' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toBe('Hello, World!')
+    })
+
+    it('renders empty text as empty string', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: '' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toBe('')
+    })
+
+    it('renders multiline text preserving newlines', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: 'Line 1\nLine 2\nLine 3' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Line 1')
+      expect(result).toContain('Line 2')
+      expect(result).toContain('Line 3')
+      expect(result.split('\n')).toHaveLength(3)
+    })
+
+    it('ignores style props for unicode tier (no ANSI)', () => {
+      const node: UINode = {
+        type: 'text',
+        props: {
+          content: 'Styled text',
+          bold: true,
+          color: 'red',
+        },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should render content but NO ANSI escape codes
+      expect(result).toContain('Styled text')
+      expect(result).not.toMatch(/\x1b\[/)
+    })
+  })
+
+  // ============================================================================
+  // List Rendering Tests
+  // ============================================================================
+
+  describe('list rendering', () => {
+    it('renders unordered list with unicode bullets', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'unordered' },
+        children: [
+          { type: 'list-item', props: { content: 'First item' } },
+          { type: 'list-item', props: { content: 'Second item' } },
+          { type: 'list-item', props: { content: 'Third item' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.bullet)
+      expect(result).toContain('First item')
+      expect(result).toContain('Second item')
+      expect(result).toContain('Third item')
+    })
+
+    it('does NOT use ASCII asterisk for bullets', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'unordered' },
+        children: [
+          { type: 'list-item', props: { content: 'Item' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should use unicode bullet, not ASCII asterisk
+      expect(result).toContain(UNICODE_CHARS.bullet)
+      expect(result).not.toMatch(/^\s*\*\s/m)
+    })
+
+    it('renders ordered list with numbers', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'ordered' },
+        children: [
+          { type: 'list-item', props: { content: 'First' } },
+          { type: 'list-item', props: { content: 'Second' } },
+          { type: 'list-item', props: { content: 'Third' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toMatch(/1\.\s*First/)
+      expect(result).toMatch(/2\.\s*Second/)
+      expect(result).toMatch(/3\.\s*Third/)
+    })
+
+    it('renders nested list with hollow bullets', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'unordered' },
+        children: [
+          {
+            type: 'list-item',
+            props: { content: 'Parent' },
+            children: [
+              {
+                type: 'list',
+                props: { style: 'unordered' },
+                children: [
+                  { type: 'list-item', props: { content: 'Child' } },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Parent uses solid bullet, nested uses hollow
+      expect(result).toContain(UNICODE_CHARS.bullet)
+      expect(result).toContain(UNICODE_CHARS.hollowBullet)
+    })
+
+    it('renders checklist with checkmark and cross', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'checklist' },
+        children: [
+          { type: 'list-item', props: { content: 'Done task', checked: true } },
+          { type: 'list-item', props: { content: 'Todo task', checked: false } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.checkmark)
+      expect(result).toContain('Done task')
+      // Should show unchecked indicator
+      expect(result).toMatch(/[☐◻□]/)
+    })
+  })
+
+  // ============================================================================
+  // Progress Bar Tests
+  // ============================================================================
+
+  describe('progress bar', () => {
+    it('renders progress bar with unicode block characters', () => {
+      const node: UINode = {
+        type: 'progress',
+        props: { value: 50, max: 100, width: 10 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.progressFull)
+      expect(result).toContain(UNICODE_CHARS.progressEmpty)
+    })
+
+    it('does NOT use ASCII hash for progress', () => {
+      const node: UINode = {
+        type: 'progress',
+        props: { value: 50, max: 100, width: 10 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should NOT use ASCII progress characters
+      expect(result).not.toMatch(/#+/)
+      expect(result).not.toMatch(/-{2,}/)
+    })
+
+    it('renders 0% progress as all empty', () => {
+      const node: UINode = {
+        type: 'progress',
+        props: { value: 0, max: 100, width: 10 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.progressEmpty)
+      expect(result).not.toContain(UNICODE_CHARS.progressFull)
+    })
+
+    it('renders 100% progress as all full', () => {
+      const node: UINode = {
+        type: 'progress',
+        props: { value: 100, max: 100, width: 10 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.progressFull)
+      expect(result).not.toContain(UNICODE_CHARS.progressEmpty)
+    })
+
+    it('renders partial progress with half block', () => {
+      const node: UINode = {
+        type: 'progress',
+        props: { value: 55, max: 100, width: 10 },
+      }
+
+      const result = renderUnicode(node)
+
+      // At 55% with width 10, we have 5.5 filled blocks
+      // Implementation should use half block for the partial
+      expect(result).toContain(UNICODE_CHARS.progressFull)
+      expect(result).toContain(UNICODE_CHARS.progressEmpty)
+      // May contain half block for partial fill
+      expect(result.match(new RegExp(`[${UNICODE_CHARS.progressFull}${UNICODE_CHARS.progressHalf}${UNICODE_CHARS.progressEmpty}]`, 'g'))).toBeTruthy()
+    })
+  })
+
+  // ============================================================================
+  // Table Rendering Tests
+  // ============================================================================
+
+  describe('table rendering', () => {
+    it('renders table with unicode borders', () => {
+      const node: UINode = {
+        type: 'table',
+        props: {
+          columns: [
+            { key: 'name', header: 'Name', width: 10 },
+            { key: 'age', header: 'Age', width: 5 },
+          ],
+        },
+        data: [
+          { name: 'Alice', age: 30 },
+          { name: 'Bob', age: 25 },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should contain unicode box characters
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+      expect(result).toContain(UNICODE_CHARS.vertical)
+    })
+
+    it('renders table header separator with T-junctions', () => {
+      const node: UINode = {
+        type: 'table',
+        props: {
+          columns: [
+            { key: 'col1', header: 'Column 1', width: 10 },
+            { key: 'col2', header: 'Column 2', width: 10 },
+          ],
+        },
+        data: [{ col1: 'a', col2: 'b' }],
+      }
+
+      const result = renderUnicode(node)
+
+      // Header separator should use T-junctions
+      expect(result).toContain(UNICODE_CHARS.teeTop)
+      expect(result).toContain(UNICODE_CHARS.teeBottom)
+    })
+
+    it('renders table corner intersections', () => {
+      const node: UINode = {
+        type: 'table',
+        props: {
+          columns: [
+            { key: 'a', header: 'A', width: 5 },
+            { key: 'b', header: 'B', width: 5 },
+          ],
+        },
+        data: [{ a: '1', b: '2' }],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.topLeft)
+      expect(result).toContain(UNICODE_CHARS.topRight)
+      expect(result).toContain(UNICODE_CHARS.bottomLeft)
+      expect(result).toContain(UNICODE_CHARS.bottomRight)
+    })
+
+    it('renders table row separators with cross junctions', () => {
+      const node: UINode = {
+        type: 'table',
+        props: {
+          columns: [
+            { key: 'a', header: 'A', width: 5 },
+            { key: 'b', header: 'B', width: 5 },
+          ],
+          rowSeparators: true,
+        },
+        data: [
+          { a: '1', b: '2' },
+          { a: '3', b: '4' },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Row separators should include cross junctions
+      expect(result).toContain(UNICODE_CHARS.crossJunction)
+    })
+
+    it('does NOT use ASCII characters for table borders', () => {
+      const node: UINode = {
+        type: 'table',
+        props: {
+          columns: [{ key: 'a', header: 'A', width: 5 }],
+        },
+        data: [{ a: '1' }],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should NOT have ASCII box drawing
+      expect(result).not.toMatch(/^\+-+\+$/m)
+      expect(result).not.toMatch(/^\|.+\|$/m)
+    })
+  })
+
+  // ============================================================================
+  // Panel/Card Rendering Tests
+  // ============================================================================
+
+  describe('panel rendering', () => {
+    it('renders panel with title bar', () => {
+      const node: UINode = {
+        type: 'panel',
+        props: { title: 'My Panel', width: 20 },
+        children: [{ type: 'text', props: { content: 'Content' } }],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('My Panel')
+      expect(result).toContain('Content')
+      expect(result).toContain(UNICODE_CHARS.topLeft)
+    })
+
+    it('renders panel title with unicode divider', () => {
+      const node: UINode = {
+        type: 'panel',
+        props: { title: 'Title', width: 20 },
+        children: [{ type: 'text', props: { content: 'Body' } }],
+      }
+
+      const result = renderUnicode(node)
+
+      // Title should be separated from body
+      expect(result).toContain(UNICODE_CHARS.teeLeft)
+      expect(result).toContain(UNICODE_CHARS.teeRight)
+    })
+  })
+
+  // ============================================================================
+  // Divider/Separator Tests
+  // ============================================================================
+
+  describe('divider rendering', () => {
+    it('renders horizontal divider with unicode line', () => {
+      const node: UINode = {
+        type: 'divider',
+        props: { width: 20 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+      expect(result.length).toBeGreaterThanOrEqual(20)
+    })
+
+    it('renders divider with label', () => {
+      const node: UINode = {
+        type: 'divider',
+        props: { label: 'Section', width: 30 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Section')
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+    })
+
+    it('does NOT use ASCII dash for divider', () => {
+      const node: UINode = {
+        type: 'divider',
+        props: { width: 20 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should not be a line of dashes
+      expect(result).not.toMatch(/^-+$/)
+    })
+  })
+
+  // ============================================================================
+  // Spinner/Loading Tests
+  // ============================================================================
+
+  describe('spinner rendering', () => {
+    it('renders spinner with unicode braille pattern', () => {
+      const node: UINode = {
+        type: 'spinner',
+        props: { frame: 0 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should contain a unicode spinner character (braille dots, etc.)
+      // Common unicode spinners: ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏
+      expect(result).toMatch(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⣾⣽⣻⢿⡿⣟⣯⣷]/)
+    })
+
+    it('renders spinner with label', () => {
+      const node: UINode = {
+        type: 'spinner',
+        props: { frame: 0, label: 'Loading...' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Loading...')
+    })
+
+    it('does NOT use ASCII spinner characters', () => {
+      const node: UINode = {
+        type: 'spinner',
+        props: { frame: 0 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should NOT use ASCII spinner like | / - \
+      expect(result).not.toMatch(/^[|\\/-]$/)
+    })
+  })
+
+  // ============================================================================
+  // Badge/Status Indicator Tests
+  // ============================================================================
+
+  describe('badge rendering', () => {
+    it('renders badge with unicode brackets', () => {
+      const node: UINode = {
+        type: 'badge',
+        props: { content: 'NEW', variant: 'info' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('NEW')
+      // May use unicode brackets or rounded corners
+      expect(result).toMatch(/[【】「」『』〖〗\[〔〕]/)
+    })
+
+    it('renders status indicator with unicode symbols', () => {
+      const node: UINode = {
+        type: 'badge',
+        props: { content: 'Success', variant: 'success' },
+      }
+
+      const result = renderUnicode(node)
+
+      // Success might include checkmark
+      expect(result).toContain('Success')
+    })
+  })
+
+  // ============================================================================
+  // Tree/Hierarchy Rendering Tests
+  // ============================================================================
+
+  describe('tree rendering', () => {
+    it('renders tree structure with unicode connectors', () => {
+      const node: UINode = {
+        type: 'tree',
+        props: {},
+        children: [
+          {
+            type: 'tree-item',
+            props: { label: 'Root' },
+            children: [
+              { type: 'tree-item', props: { label: 'Child 1' } },
+              { type: 'tree-item', props: { label: 'Child 2' } },
+            ],
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should use unicode tree connectors
+      expect(result).toContain('Root')
+      expect(result).toContain('Child 1')
+      expect(result).toContain('Child 2')
+      // Tree connectors: ├── └── │
+      expect(result).toContain(UNICODE_CHARS.teeLeft)
+      expect(result).toContain(UNICODE_CHARS.bottomLeft)
+    })
+
+    it('renders last child with corner connector', () => {
+      const node: UINode = {
+        type: 'tree',
+        props: {},
+        children: [
+          {
+            type: 'tree-item',
+            props: { label: 'Parent' },
+            children: [
+              { type: 'tree-item', props: { label: 'Last child' } },
+            ],
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Last child should use └ not ├
+      expect(result).toContain(UNICODE_CHARS.bottomLeft)
+    })
+
+    it('does NOT use ASCII tree characters', () => {
+      const node: UINode = {
+        type: 'tree',
+        props: {},
+        children: [
+          {
+            type: 'tree-item',
+            props: { label: 'Root' },
+            children: [
+              { type: 'tree-item', props: { label: 'Child' } },
+            ],
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should NOT use ASCII +-- or |-- patterns
+      expect(result).not.toMatch(/\+--/)
+      expect(result).not.toMatch(/\|--/)
+    })
+  })
+
+  // ============================================================================
+  // Breadcrumb Rendering Tests
+  // ============================================================================
+
+  describe('breadcrumb rendering', () => {
+    it('renders breadcrumb with unicode arrow separator', () => {
+      const node: UINode = {
+        type: 'breadcrumb',
+        props: {},
+        children: [
+          { type: 'breadcrumb-item', props: { label: 'Home' } },
+          { type: 'breadcrumb-item', props: { label: 'Products' } },
+          { type: 'breadcrumb-item', props: { label: 'Item' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Item')
+      // Should use unicode separator like → or ›
+      expect(result).toMatch(/[→›»▸]/)
+    })
+
+    it('does NOT use ASCII greater-than for separator', () => {
+      const node: UINode = {
+        type: 'breadcrumb',
+        props: {},
+        children: [
+          { type: 'breadcrumb-item', props: { label: 'A' } },
+          { type: 'breadcrumb-item', props: { label: 'B' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // Should NOT use plain > as separator
+      expect(result).not.toMatch(/A\s*>\s*B/)
+    })
+  })
+
+  // ============================================================================
+  // Tooltip/Info Rendering Tests
+  // ============================================================================
+
+  describe('tooltip rendering', () => {
+    it('renders tooltip with unicode pointer', () => {
+      const node: UINode = {
+        type: 'tooltip',
+        props: { content: 'Helpful tip', position: 'top' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Helpful tip')
+      // Should have unicode pointer like ▲ ▼ ◀ ▶
+      expect(result).toMatch(/[▲▼◀▶△▽◁▷]/)
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases and Error Handling
+  // ============================================================================
+
+  describe('edge cases', () => {
+    it('handles empty children array', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single' },
+        children: [],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toBeDefined()
+      expect(result).toContain(UNICODE_CHARS.topLeft)
+    })
+
+    it('handles undefined children', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toBeDefined()
+    })
+
+    it('handles zero-width box gracefully', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 0, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Should either render minimum size or empty string
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles zero-height box gracefully', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 0 },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles very long text', () => {
+      const longText = 'A'.repeat(1000)
+      const node: UINode = {
+        type: 'text',
+        props: { content: longText },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('A')
+    })
+
+    it('handles special unicode characters in content', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: 'Emoji: 🎉 and symbols: ∞ ≠ ≤' },
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('🎉')
+      expect(result).toContain('∞')
+    })
+
+    it('handles RTL text', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: 'مرحبا' }, // Arabic "Hello"
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('مرحبا')
+    })
+
+    it('handles unknown node type gracefully', () => {
+      const node: UINode = {
+        type: 'unknown-type',
+        props: { content: 'Test' },
+      }
+
+      // Should not throw, may return empty or placeholder
+      expect(() => renderUnicode(node)).not.toThrow()
+    })
+  })
+
+  // ============================================================================
+  // Context Handling Tests
+  // ============================================================================
+
+  describe('context handling', () => {
+    it('respects width from context', () => {
+      const node: UINode = {
+        type: 'divider',
+        props: {},
+      }
+
+      const context = createTestContext({ width: 40 })
+      const result = renderUnicode(node, context)
+
+      // Divider should respect context width
+      expect(result.length).toBeLessThanOrEqual(40)
+    })
+
+    it('increases depth for nested children', () => {
+      const node: UINode = {
+        type: 'box',
+        props: {},
+        children: [
+          {
+            type: 'box',
+            props: {},
+            children: [{ type: 'text', props: { content: 'Deep' } }],
+          },
+        ],
+      }
+
+      // This is more of an internal test - ensuring nested rendering works
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Deep')
+    })
+
+    it('uses default context when none provided', () => {
+      const node: UINode = {
+        type: 'text',
+        props: { content: 'Hello' },
+      }
+
+      // Should not throw when context is omitted
+      const result = renderUnicode(node)
+
+      expect(result).toBe('Hello')
+    })
+  })
+
+  // ============================================================================
+  // Comparison with ASCII Fallback
+  // ============================================================================
+
+  describe('ASCII fallback verification', () => {
+    it('uses unicode corners, not ASCII plus signs', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Corners should be unicode, not +
+      expect(result).not.toMatch(/^\+/)
+      expect(result).not.toMatch(/\+$/)
+      expect(result).toContain(UNICODE_CHARS.topLeft)
+    })
+
+    it('uses unicode horizontal lines, not dashes', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 3 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Top/bottom lines should use ─ not -
+      const lines = result.split('\n')
+      expect(lines[0]).toContain(UNICODE_CHARS.horizontal)
+      expect(lines[0]).not.toMatch(/^.+-+.+$/) // Not a row of dashes
+    })
+
+    it('uses unicode vertical lines, not pipes', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', width: 10, height: 5 },
+      }
+
+      const result = renderUnicode(node)
+
+      // Side lines should use │ not |
+      expect(result).toContain(UNICODE_CHARS.vertical)
+      // The ASCII pipe | should not appear in borders
+      // (It might appear in content, so we check specific pattern)
+      const lines = result.split('\n')
+      for (let i = 1; i < lines.length - 1; i++) {
+        expect(lines[i]).toMatch(/^│.*│$/)
+        expect(lines[i]).not.toMatch(/^\|.*\|$/)
+      }
+    })
+
+    it('uses unicode bullets, not asterisks', () => {
+      const node: UINode = {
+        type: 'list',
+        props: { style: 'unordered' },
+        children: [
+          { type: 'list-item', props: { content: 'Item' } },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain(UNICODE_CHARS.bullet)
+      expect(result).not.toMatch(/^\s*\*\s/m)
+    })
+  })
+
+  // ============================================================================
+  // Integration Tests
+  // ============================================================================
+
+  describe('integration', () => {
+    it('renders complex nested structure', () => {
+      const node: UINode = {
+        type: 'panel',
+        props: { title: 'Dashboard', width: 40 },
+        children: [
+          {
+            type: 'box',
+            props: { border: 'rounded' },
+            children: [
+              { type: 'text', props: { content: 'Welcome!' } },
+              {
+                type: 'list',
+                props: { style: 'unordered' },
+                children: [
+                  { type: 'list-item', props: { content: 'Feature A' } },
+                  { type: 'list-item', props: { content: 'Feature B' } },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'progress',
+            props: { value: 75, max: 100, width: 20 },
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      // All content should be present
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Welcome!')
+      expect(result).toContain('Feature A')
+      expect(result).toContain('Feature B')
+
+      // Should use unicode characters throughout
+      expect(result).toContain(UNICODE_CHARS.roundedTopLeft)
+      expect(result).toContain(UNICODE_CHARS.bullet)
+      expect(result).toContain(UNICODE_CHARS.progressFull)
+    })
+
+    it('renders sidebar layout with unicode borders', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', flexDirection: 'row' },
+        children: [
+          {
+            type: 'box',
+            props: { border: 'single', width: 20 },
+            children: [
+              {
+                type: 'list',
+                props: { style: 'unordered' },
+                children: [
+                  { type: 'list-item', props: { content: 'Menu 1' } },
+                  { type: 'list-item', props: { content: 'Menu 2' } },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'box',
+            props: { flexGrow: 1 },
+            children: [
+              { type: 'text', props: { content: 'Main content area' } },
+            ],
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Menu 1')
+      expect(result).toContain('Menu 2')
+      expect(result).toContain('Main content area')
+      expect(result).toContain(UNICODE_CHARS.vertical)
+    })
+
+    it('renders form with input fields', () => {
+      const node: UINode = {
+        type: 'box',
+        props: { border: 'single', padding: 1 },
+        children: [
+          { type: 'text', props: { content: 'Login Form' } },
+          {
+            type: 'divider',
+            props: { width: 30 },
+          },
+          {
+            type: 'input',
+            props: { label: 'Username', value: 'john_doe' },
+          },
+          {
+            type: 'input',
+            props: { label: 'Password', value: '********', type: 'password' },
+          },
+          {
+            type: 'button',
+            props: { label: 'Submit' },
+          },
+        ],
+      }
+
+      const result = renderUnicode(node)
+
+      expect(result).toContain('Login Form')
+      expect(result).toContain('Username')
+      expect(result).toContain('Submit')
+      expect(result).toContain(UNICODE_CHARS.horizontal)
+    })
+  })
+})