@mdxui/terminal 2.0.0

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

@@ -0,0 +1,1369 @@
+/**
+ * @mdxui/terminal Text Renderer Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the TEXT renderer
+ * that outputs plain text without any formatting or special characters.
+ *
+ * The TEXT renderer is the first tier in the Universal Terminal UI's
+ * multi-tier rendering architecture:
+ * - TEXT: Plain text without formatting (THIS FILE)
+ * - MARKDOWN: Markdown syntax for AI agents
+ * - ASCII: ASCII art and basic drawing characters
+ * - UNICODE: Unicode box drawing and symbols
+ * - ANSI: Full ANSI escape sequences for colors/styles
+ * - INTERACTIVE: Full interactive terminal UI with input handling
+ *
+ * Text output format rules:
+ * - Simple content only, no bold/italic/code markers
+ * - Tables rendered as key=value lines (one per line)
+ * - Lists rendered as bullet points (- item)
+ * - Metrics rendered as "Label: value" format
+ * - Nested structures indented (2 spaces per level)
+ * - Dashboard layout as labeled sections with separators
+ * - All special characters and formatting stripped
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/renderers/text.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+
+// ============================================================================
+// These imports WILL FAIL until src/renderers/text.ts is implemented
+// ============================================================================
+import { renderText } from '../../renderers/text'
+import type { UINode } from '../../core/types'
+
+// ============================================================================
+// Helper Functions for Tests
+// ============================================================================
+
+/**
+ * Creates a minimal UINode for testing
+ */
+function createNode(
+  type: string,
+  props: Record<string, unknown> = {},
+  children?: UINode[]
+): UINode {
+  return { type, props, children }
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('renderText', () => {
+  describe('function signature', () => {
+    it('exports renderText function', () => {
+      expect(typeof renderText).toBe('function')
+    })
+
+    it('accepts UINode and returns string', () => {
+      const node = createNode('text', { content: 'Hello' })
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('returns empty string for empty node', () => {
+      const node = createNode('box', {})
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Text Component Tests
+  // ============================================================================
+
+  describe('Text component', () => {
+    it('renders plain text content', () => {
+      const node = createNode('text', { content: 'Hello World' })
+      const result = renderText(node)
+      expect(result).toContain('Hello World')
+    })
+
+    it('renders text without any formatting markers', () => {
+      const node = createNode('text', {
+        content: 'Important',
+        bold: true,
+        italic: true,
+        code: true,
+      })
+      const result = renderText(node)
+      // Text tier should strip all formatting
+      expect(result).toContain('Important')
+      expect(result).not.toContain('**')
+      expect(result).not.toContain('*')
+      expect(result).not.toContain('`')
+    })
+
+    it('renders strikethrough as plain text', () => {
+      const node = createNode('text', { content: 'deprecated', strikethrough: true })
+      const result = renderText(node)
+      expect(result).toContain('deprecated')
+      expect(result).not.toContain('~~')
+    })
+
+    it('preserves text with special characters', () => {
+      const node = createNode('text', { content: 'Use *asterisks* and _underscores_' })
+      const result = renderText(node)
+      expect(result).toContain('asterisks')
+      expect(result).toContain('underscores')
+    })
+
+    it('handles empty text content', () => {
+      const node = createNode('text', { content: '' })
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles text with newlines', () => {
+      const node = createNode('text', { content: 'Line 1\nLine 2\nLine 3' })
+      const result = renderText(node)
+      expect(result).toContain('Line 1')
+      expect(result).toContain('Line 2')
+      expect(result).toContain('Line 3')
+    })
+  })
+
+  // ============================================================================
+  // Header Tests
+  // ============================================================================
+
+  describe('Header rendering', () => {
+    it('renders header without # prefix', () => {
+      const node = createNode('header', { level: 1, content: 'Main Title' })
+      const result = renderText(node)
+      expect(result).toContain('Main Title')
+      expect(result).not.toContain('#')
+    })
+
+    it('renders all header levels as plain text', () => {
+      for (let level = 1; level <= 6; level++) {
+        const node = createNode('header', { level, content: `Header Level ${level}` })
+        const result = renderText(node)
+        expect(result).toContain(`Header Level ${level}`)
+        expect(result).not.toContain('#')
+      }
+    })
+
+    it('defaults to plain text when level is not specified', () => {
+      const node = createNode('header', { content: 'Default Header' })
+      const result = renderText(node)
+      expect(result).toContain('Default Header')
+    })
+  })
+
+  // ============================================================================
+  // List Tests
+  // ============================================================================
+
+  describe('List component', () => {
+    it('renders unordered list with - bullets', () => {
+      const node = createNode('list', {
+        items: ['First item', 'Second item', 'Third item'],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('- First item')
+      expect(result).toContain('- Second item')
+      expect(result).toContain('- Third item')
+    })
+
+    it('renders ordered list with 1. 2. 3. numbers', () => {
+      const node = createNode('list', {
+        items: ['Step one', 'Step two', 'Step three'],
+        numbered: true,
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('1. Step one')
+      expect(result).toContain('2. Step two')
+      expect(result).toContain('3. Step three')
+    })
+
+    it('renders nested lists with proper indentation', () => {
+      const nestedList = createNode('list', {
+        items: ['Nested A', 'Nested B'],
+      })
+      const node = createNode('list', {
+        items: ['Parent item'],
+        children: [nestedList],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('- Parent item')
+      expect(result).toMatch(/  - Nested A/)
+      expect(result).toMatch(/  - Nested B/)
+    })
+
+    it('handles empty list gracefully', () => {
+      const node = createNode('list', { items: [] })
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('renders task list items without checkboxes', () => {
+      const node = createNode('list', {
+        items: [
+          { text: 'Done task', checked: true },
+          { text: 'Pending task', checked: false },
+        ],
+        taskList: true,
+      })
+      const result = renderText(node)
+
+      // Text tier renders without checkbox indicators
+      expect(result).toContain('Done task')
+      expect(result).toContain('Pending task')
+    })
+  })
+
+  // ============================================================================
+  // Table Tests
+  // ============================================================================
+
+  describe('Table component', () => {
+    it('renders table as key=value lines', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'name', header: 'Name' },
+          { key: 'status', header: 'Status' },
+        ],
+        data: [
+          { name: 'Alice', status: 'Active' },
+          { name: 'Bob', status: 'Pending' },
+        ],
+      })
+      const result = renderText(node)
+
+      // Text tier renders as label: value format
+      expect(result).toContain('Alice')
+      expect(result).toContain('Active')
+      expect(result).toContain('Bob')
+      expect(result).toContain('Pending')
+      // No pipes or table formatting
+      expect(result).not.toContain('|')
+    })
+
+    it('renders table headers as labels', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'col1', header: 'Column 1' },
+          { key: 'col2', header: 'Column 2' },
+        ],
+        data: [{ col1: 'a', col2: 'b' }],
+      })
+      const result = renderText(node)
+
+      // Headers should be present
+      expect(result).toContain('Column 1')
+      expect(result).toContain('Column 2')
+    })
+
+    it('handles empty table gracefully', () => {
+      const node = createNode('table', {
+        columns: [{ key: 'col', header: 'Column' }],
+        data: [],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Column')
+    })
+
+    it('handles missing column values', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'a', header: 'A' },
+          { key: 'b', header: 'B' },
+        ],
+        data: [{ a: 'only a' }],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('only a')
+    })
+
+    it('renders table with single column', () => {
+      const node = createNode('table', {
+        columns: [{ key: 'item', header: 'Items' }],
+        data: [{ item: 'One' }, { item: 'Two' }],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Items')
+      expect(result).toContain('One')
+      expect(result).toContain('Two')
+    })
+  })
+
+  // ============================================================================
+  // Code Block Tests
+  // ============================================================================
+
+  describe('Code block component', () => {
+    it('renders code block as plain text', () => {
+      const node = createNode('code', {
+        code: 'const x = 1',
+        language: 'typescript',
+      })
+      const result = renderText(node)
+
+      // Text tier renders code without fences
+      expect(result).toContain('const x = 1')
+      expect(result).not.toContain('```')
+    })
+
+    it('does not include language identifier', () => {
+      const node = createNode('code', {
+        code: 'print("hello")',
+        language: 'python',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('print("hello")')
+      expect(result).not.toContain('python')
+      expect(result).not.toContain('```')
+    })
+
+    it('preserves code indentation', () => {
+      const code = `function test() {
+  if (true) {
+    console.log("indented");
+  }
+}`
+      const node = createNode('code', { code, language: 'javascript' })
+      const result = renderText(node)
+
+      expect(result).toContain('  if (true)')
+      expect(result).toContain('    console.log')
+    })
+
+    it('handles multiline code', () => {
+      const code = 'line 1\nline 2\nline 3'
+      const node = createNode('code', { code, language: 'text' })
+      const result = renderText(node)
+
+      expect(result).toContain('line 1')
+      expect(result).toContain('line 2')
+      expect(result).toContain('line 3')
+    })
+  })
+
+  // ============================================================================
+  // Link Tests
+  // ============================================================================
+
+  describe('Link/Action rendering', () => {
+    it('renders links as plain text', () => {
+      const node = createNode('link', {
+        text: 'Click here',
+        href: 'https://example.com',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Click here')
+      expect(result).not.toContain('[')
+      expect(result).not.toContain('](')
+    })
+
+    it('renders button as plain text', () => {
+      const node = createNode('button', {
+        label: 'Submit',
+        action: '/api/submit',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Submit')
+      expect(result).not.toContain('[')
+    })
+
+    it('renders button with hotkey hint', () => {
+      const node = createNode('button', {
+        label: 'Save',
+        hotkey: 'Ctrl+S',
+        action: '/save',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Save')
+      expect(result).toContain('Ctrl+S')
+    })
+
+    it('handles external vs internal links', () => {
+      const external = createNode('link', {
+        text: 'External',
+        href: 'https://external.com',
+        external: true,
+      })
+      const internal = createNode('link', {
+        text: 'Internal',
+        href: '/internal',
+      })
+
+      const extResult = renderText(external)
+      const intResult = renderText(internal)
+
+      expect(extResult).toContain('External')
+      expect(intResult).toContain('Internal')
+    })
+  })
+
+  // ============================================================================
+  // Box/Container Tests
+  // ============================================================================
+
+  describe('Box/Container component', () => {
+    it('renders box children sequentially', () => {
+      const node = createNode('box', {}, [
+        createNode('text', { content: 'First' }),
+        createNode('text', { content: 'Second' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('First')
+      expect(result).toContain('Second')
+      expect(result.indexOf('First')).toBeLessThan(result.indexOf('Second'))
+    })
+
+    it('handles nested boxes', () => {
+      const node = createNode('box', {}, [
+        createNode('box', {}, [createNode('text', { content: 'Nested content' })]),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Nested content')
+    })
+
+    it('renders box with title as header', () => {
+      const node = createNode('box', { title: 'Section Title' }, [
+        createNode('text', { content: 'Content' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Section Title')
+      expect(result).toContain('Content')
+    })
+
+    it('renders bordered boxes as plain text', () => {
+      const node = createNode('box', { border: 'single' }, [
+        createNode('text', { content: 'Bordered' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Bordered')
+      expect(result).not.toContain('┌')
+      expect(result).not.toContain('├')
+    })
+  })
+
+  // ============================================================================
+  // Panel Component Tests
+  // ============================================================================
+
+  describe('Panel component', () => {
+    it('renders panel with title as label', () => {
+      const node = createNode('panel', { title: 'Panel Title' }, [
+        createNode('text', { content: 'Panel content' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Panel Title')
+      expect(result).toContain('Panel content')
+    })
+
+    it('renders collapsible panel as plain text', () => {
+      const node = createNode('panel', {
+        title: 'Collapsible',
+        collapsible: true,
+      }, [createNode('text', { content: 'Hidden content' })])
+      const result = renderText(node)
+
+      expect(result).toContain('Collapsible')
+      expect(result).toContain('Hidden content')
+    })
+
+    it('handles collapsed panel state', () => {
+      const node = createNode('panel', {
+        title: 'Collapsed',
+        collapsible: true,
+        collapsed: true,
+      }, [createNode('text', { content: 'Content' })])
+      const result = renderText(node)
+
+      expect(result).toContain('Collapsed')
+    })
+  })
+
+  // ============================================================================
+  // Card Component Tests
+  // ============================================================================
+
+  describe('Card component', () => {
+    it('renders card title as label', () => {
+      const node = createNode('card', { title: 'Card Title' }, [
+        createNode('text', { content: 'Card body' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Card Title')
+      expect(result).toContain('Card body')
+    })
+
+    it('renders card sections separated by newlines', () => {
+      const node = createNode('card', { title: 'Title' }, [
+        createNode('text', { content: 'Body' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Title')
+      expect(result).toContain('Body')
+    })
+  })
+
+  // ============================================================================
+  // Metrics Tests
+  // ============================================================================
+
+  describe('Metrics component', () => {
+    it('renders metrics as Label: value format', () => {
+      const node = createNode('metrics', {
+        metrics: [
+          { label: 'Users', value: 1234 },
+          { label: 'Revenue', value: '$5,000' },
+        ],
+      })
+      const result = renderText(node)
+
+      // Should contain label and value
+      expect(result).toContain('Users')
+      expect(result).toContain('1234')
+      expect(result).toContain('Revenue')
+      expect(result).toContain('$5,000')
+    })
+
+    it('renders metrics with trend indicators', () => {
+      const node = createNode('metrics', {
+        metrics: [
+          { label: 'Up', value: 100, trend: 'up' },
+          { label: 'Down', value: 50, trend: 'down' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Up')
+      expect(result).toContain('100')
+      expect(result).toContain('Down')
+      expect(result).toContain('50')
+    })
+
+    it('renders single metric', () => {
+      const node = createNode('metrics', {
+        metrics: [
+          { label: 'Total', value: 999 },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Total')
+      expect(result).toContain('999')
+    })
+
+    it('handles empty metrics gracefully', () => {
+      const node = createNode('metrics', {
+        metrics: [],
+      })
+      const result = renderText(node)
+
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Sidebar Component Tests
+  // ============================================================================
+
+  describe('Sidebar component', () => {
+    it('renders sidebar nav items as list', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          { label: 'Home', href: '/' },
+          { label: 'Settings', href: '/settings' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Settings')
+    })
+
+    it('highlights active nav item', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          { label: 'Home', href: '/', active: false },
+          { label: 'Current', href: '/current', active: true },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Current')
+    })
+
+    it('renders sidebar sections with headers', () => {
+      const node = createNode('sidebar', {
+        sections: [
+          {
+            title: 'Navigation',
+            items: [{ label: 'Dashboard', href: '/dashboard' }],
+          },
+          {
+            title: 'Settings',
+            items: [{ label: 'Profile', href: '/profile' }],
+          },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Navigation')
+      expect(result).toContain('Settings')
+    })
+
+    it('renders nested sidebar items with indentation', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          {
+            label: 'Parent',
+            href: '/parent',
+            children: [
+              { label: 'Child 1', href: '/child1' },
+              { label: 'Child 2', href: '/child2' },
+            ],
+          },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Parent')
+      expect(result).toContain('Child 1')
+      expect(result).toContain('Child 2')
+    })
+  })
+
+  // ============================================================================
+  // Breadcrumb Component Tests
+  // ============================================================================
+
+  describe('Breadcrumb component', () => {
+    it('renders breadcrumbs with > separator', () => {
+      const node = createNode('breadcrumb', {
+        items: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Widget' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('>')
+      expect(result).toContain('Products')
+      expect(result).toContain('Widget')
+    })
+
+    it('renders all breadcrumb items as text', () => {
+      const node = createNode('breadcrumb', {
+        items: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Current')
+    })
+
+    it('uses custom separator', () => {
+      const node = createNode('breadcrumb', {
+        items: [{ label: 'A' }, { label: 'B' }],
+        separator: '/',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('/')
+    })
+  })
+
+  // ============================================================================
+  // Badge Component Tests
+  // ============================================================================
+
+  describe('Badge component', () => {
+    it('renders badge with label', () => {
+      const node = createNode('badge', { children: 'New' })
+      const result = renderText(node)
+
+      expect(result).toContain('New')
+    })
+
+    it('renders badge with variant indicator as text', () => {
+      const successBadge = createNode('badge', { children: 'Active', variant: 'success' })
+      const errorBadge = createNode('badge', { children: 'Error', variant: 'error' })
+
+      const successResult = renderText(successBadge)
+      const errorResult = renderText(errorBadge)
+
+      expect(successResult).toContain('Active')
+      expect(errorResult).toContain('Error')
+    })
+  })
+
+  // ============================================================================
+  // Dialog Component Tests
+  // ============================================================================
+
+  describe('Dialog component', () => {
+    it('renders dialog with title as header', () => {
+      const node = createNode('dialog', {
+        title: 'Confirm Action',
+        open: true,
+      }, [createNode('text', { content: 'Are you sure?' })])
+      const result = renderText(node)
+
+      expect(result).toContain('Confirm Action')
+      expect(result).toContain('Are you sure?')
+    })
+
+    it('renders dialog actions as text', () => {
+      const node = createNode('dialog', {
+        title: 'Dialog',
+        open: true,
+        actions: [
+          { label: 'Cancel', action: 'cancel' },
+          { label: 'Confirm', action: 'confirm' },
+        ],
+      }, [createNode('text', { content: 'Content' })])
+      const result = renderText(node)
+
+      expect(result).toContain('Cancel')
+      expect(result).toContain('Confirm')
+    })
+
+    it('skips closed dialog', () => {
+      const node = createNode('dialog', {
+        title: 'Hidden',
+        open: false,
+      }, [createNode('text', { content: 'Should not appear' })])
+      const result = renderText(node)
+
+      expect(result).not.toContain('Should not appear')
+    })
+  })
+
+  // ============================================================================
+  // Spinner Component Tests
+  // ============================================================================
+
+  describe('Spinner component', () => {
+    it('renders spinner with loading text', () => {
+      const node = createNode('spinner', { label: 'Loading...' })
+      const result = renderText(node)
+
+      expect(result).toContain('Loading')
+    })
+
+    it('renders spinner with default text when no label', () => {
+      const node = createNode('spinner', {})
+      const result = renderText(node)
+
+      expect(result.length).toBeGreaterThan(0)
+    })
+  })
+
+  // ============================================================================
+  // Dashboard Component Tests
+  // ============================================================================
+
+  describe('Dashboard component', () => {
+    it('renders dashboard title', () => {
+      const node = createNode('dashboard', { title: 'My Dashboard' })
+      const result = renderText(node)
+
+      expect(result).toContain('My Dashboard')
+    })
+
+    it('renders metrics as labeled lines', () => {
+      const node = createNode('dashboard', {
+        title: 'Stats',
+        metrics: [
+          { label: 'Users', value: 1234, trend: 'up' },
+          { label: 'Revenue', value: '$5,000', trend: 'up' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Users')
+      expect(result).toContain('1234')
+      expect(result).toContain('Revenue')
+      expect(result).toContain('$5,000')
+    })
+
+    it('renders dashboard children (widgets) with proper structure', () => {
+      const node = createNode('dashboard', { title: 'Dashboard' }, [
+        createNode('panel', { title: 'Widget 1' }, [
+          createNode('text', { content: 'Widget content' }),
+        ]),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Widget 1')
+      expect(result).toContain('Widget content')
+    })
+
+    it('separates sections with blank lines', () => {
+      const node = createNode('dashboard', {
+        title: 'Dashboard',
+        metrics: [{ label: 'Count', value: 100 }],
+      }, [
+        createNode('panel', { title: 'Section' }, [
+          createNode('text', { content: 'Content' }),
+        ]),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('\n\n')
+    })
+  })
+
+  // ============================================================================
+  // Settings Component Tests
+  // ============================================================================
+
+  describe('Settings component', () => {
+    it('renders settings sections as labels', () => {
+      const node = createNode('settings', {
+        sections: ['profile', 'security', 'notifications'],
+      })
+      const result = renderText(node)
+
+      expect(result).toMatch(/profile/i)
+      expect(result).toMatch(/security/i)
+      expect(result).toMatch(/notifications/i)
+    })
+
+    it('renders settings children', () => {
+      const node = createNode('settings', {}, [
+        createNode('panel', { title: 'Profile Settings' }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Profile Settings')
+    })
+  })
+
+  // ============================================================================
+  // Input Component Tests
+  // ============================================================================
+
+  describe('Input component', () => {
+    it('renders input with label', () => {
+      const node = createNode('input', {
+        label: 'Username',
+        value: 'john_doe',
+        placeholder: 'Enter username',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Username')
+    })
+
+    it('shows current value', () => {
+      const node = createNode('input', {
+        label: 'Email',
+        value: 'test@example.com',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('test@example.com')
+    })
+
+    it('shows placeholder when no value', () => {
+      const node = createNode('input', {
+        label: 'Name',
+        placeholder: 'Enter your name',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Enter your name')
+    })
+
+    it('indicates disabled state', () => {
+      const node = createNode('input', {
+        label: 'Locked',
+        value: 'Cannot edit',
+        disabled: true,
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Locked')
+    })
+  })
+
+  // ============================================================================
+  // Select Component Tests
+  // ============================================================================
+
+  describe('Select component', () => {
+    it('renders select with label', () => {
+      const node = createNode('select', {
+        label: 'Country',
+        options: [
+          { label: 'USA', value: 'us' },
+          { label: 'Canada', value: 'ca' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Country')
+    })
+
+    it('shows current selection', () => {
+      const node = createNode('select', {
+        label: 'Color',
+        value: 'red',
+        options: [
+          { label: 'Red', value: 'red' },
+          { label: 'Blue', value: 'blue' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Red')
+    })
+
+    it('lists available options', () => {
+      const node = createNode('select', {
+        options: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+          { label: 'Option C', value: 'c' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Option A')
+      expect(result).toContain('Option B')
+      expect(result).toContain('Option C')
+    })
+  })
+
+  // ============================================================================
+  // Hero Component Tests
+  // ============================================================================
+
+  describe('Hero component', () => {
+    it('renders hero title', () => {
+      const node = createNode('hero', {
+        title: 'Welcome to Our Product',
+        subtitle: 'The best solution for your needs',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Welcome to Our Product')
+    })
+
+    it('renders subtitle', () => {
+      const node = createNode('hero', {
+        title: 'Title',
+        subtitle: 'Subtitle text here',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Subtitle text here')
+    })
+
+    it('renders CTA buttons as text', () => {
+      const node = createNode('hero', {
+        title: 'Hero',
+        callToAction: 'Get Started',
+        secondaryCallToAction: 'Learn More',
+        actions: {
+          primary: '/signup',
+          secondary: '/docs',
+        },
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Get Started')
+      expect(result).toContain('Learn More')
+    })
+
+    it('renders badge if present', () => {
+      const node = createNode('hero', {
+        title: 'Hero',
+        badge: 'New Feature',
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('New Feature')
+    })
+  })
+
+  // ============================================================================
+  // Features Component Tests
+  // ============================================================================
+
+  describe('Features component', () => {
+    it('renders features section title', () => {
+      const node = createNode('features', {
+        title: 'Our Features',
+        features: [],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Our Features')
+    })
+
+    it('renders feature items', () => {
+      const node = createNode('features', {
+        features: [
+          { title: 'Fast', description: 'Lightning quick' },
+          { title: 'Secure', description: 'Bank-level security' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Fast')
+      expect(result).toContain('Lightning quick')
+      expect(result).toContain('Secure')
+    })
+
+    it('renders feature icons as text', () => {
+      const node = createNode('features', {
+        features: [{ title: 'Speed', description: 'Fast', icon: 'rocket' }],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Speed')
+    })
+  })
+
+  // ============================================================================
+  // Pricing Component Tests
+  // ============================================================================
+
+  describe('Pricing component', () => {
+    it('renders pricing tiers', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          { name: 'Free', price: '$0/mo', features: ['Basic access'] },
+          { name: 'Pro', price: '$10/mo', features: ['All features'] },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Free')
+      expect(result).toContain('$0/mo')
+      expect(result).toContain('Pro')
+      expect(result).toContain('$10/mo')
+    })
+
+    it('renders tier features', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          {
+            name: 'Basic',
+            price: '$5',
+            features: ['Feature 1', 'Feature 2', 'Feature 3'],
+          },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Feature 1')
+      expect(result).toContain('Feature 2')
+      expect(result).toContain('Feature 3')
+    })
+
+    it('renders CTA for each tier', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          { name: 'Free', price: '$0', features: [], callToAction: 'Start Free' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Start Free')
+    })
+  })
+
+  // ============================================================================
+  // FAQ Component Tests
+  // ============================================================================
+
+  describe('FAQ component', () => {
+    it('renders FAQ items', () => {
+      const node = createNode('faq', {
+        items: [
+          { question: 'What is this?', answer: 'A great product.' },
+          { question: 'How does it work?', answer: 'Like magic.' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('What is this?')
+      expect(result).toContain('A great product.')
+      expect(result).toContain('How does it work?')
+    })
+
+    it('renders questions distinctly', () => {
+      const node = createNode('faq', {
+        items: [{ question: 'Question?', answer: 'Answer.' }],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Question?')
+    })
+
+    it('renders section title if provided', () => {
+      const node = createNode('faq', {
+        title: 'Frequently Asked Questions',
+        items: [],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Frequently Asked Questions')
+    })
+  })
+
+  // ============================================================================
+  // Footer Component Tests
+  // ============================================================================
+
+  describe('Footer component', () => {
+    it('renders footer links', () => {
+      const node = createNode('footer', {
+        links: [
+          {
+            title: 'Company',
+            links: [
+              { label: 'About', href: '/about' },
+              { label: 'Careers', href: '/careers' },
+            ],
+          },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Company')
+      expect(result).toContain('About')
+      expect(result).toContain('Careers')
+    })
+
+    it('renders copyright notice', () => {
+      const node = createNode('footer', {
+        copyright: '2024 My Company',
+        links: [],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('2024 My Company')
+    })
+
+    it('renders social links', () => {
+      const node = createNode('footer', {
+        social: [
+          { platform: 'twitter', href: 'https://twitter.com/company' },
+          { platform: 'github', href: 'https://github.com/company' },
+        ],
+        links: [],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('twitter')
+      expect(result).toContain('github')
+    })
+  })
+
+  // ============================================================================
+  // Header Component Tests
+  // ============================================================================
+
+  describe('Header component', () => {
+    it('renders header with nav links', () => {
+      const node = createNode('header', {
+        nav: [
+          { label: 'Home', href: '/' },
+          { label: 'Docs', href: '/docs' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Docs')
+    })
+
+    it('renders CTA button', () => {
+      const node = createNode('header', {
+        nav: [],
+        callToAction: 'Sign Up',
+        actions: { primary: '/signup' },
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Sign Up')
+    })
+
+    it('renders breadcrumbs for app header', () => {
+      const node = createNode('header', {
+        breadcrumbs: [
+          { label: 'Dashboard', href: '/dashboard' },
+          { label: 'Settings' },
+        ],
+      })
+      const result = renderText(node)
+
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Settings')
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases and Error Handling
+  // ============================================================================
+
+  describe('Edge cases', () => {
+    it('handles null/undefined props gracefully', () => {
+      const node = createNode('text', { content: null as unknown as string })
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles unknown component types', () => {
+      const node = createNode('unknown-component', { foo: 'bar' })
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles deeply nested structures', () => {
+      let node = createNode('text', { content: 'Deep' })
+      for (let i = 0; i < 10; i++) {
+        node = createNode('box', {}, [node])
+      }
+      const result = renderText(node)
+      expect(result).toContain('Deep')
+    })
+
+    it('handles empty children array', () => {
+      const node = createNode('box', {}, [])
+      const result = renderText(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles very long content', () => {
+      const longContent = 'A'.repeat(10000)
+      const node = createNode('text', { content: longContent })
+      const result = renderText(node)
+      expect(result).toContain('A')
+    })
+
+    it('handles emoji in content', () => {
+      const node = createNode('text', { content: 'Hello :rocket: World' })
+      const result = renderText(node)
+      expect(result).toContain('rocket')
+    })
+
+    it('handles unicode characters', () => {
+      const node = createNode('text', { content: 'Hello 世界 مرحبا' })
+      const result = renderText(node)
+      expect(result).toContain('世界')
+    })
+  })
+
+  // ============================================================================
+  // Text Output Quality Tests
+  // ============================================================================
+
+  describe('Text output quality', () => {
+    it('produces output with no trailing whitespace on lines', () => {
+      const node = createNode('box', {}, [
+        createNode('header', { level: 1, content: 'Title' }),
+        createNode('text', { content: 'Content' }),
+      ])
+      const result = renderText(node)
+
+      const lines = result.split('\n')
+      lines.forEach((line) => {
+        expect(line).toBe(line.trimEnd())
+      })
+    })
+
+    it('uses consistent line endings', () => {
+      const node = createNode('list', { items: ['A', 'B', 'C'] })
+      const result = renderText(node)
+
+      expect(result).not.toContain('\r')
+    })
+
+    it('has proper spacing between elements', () => {
+      const node = createNode('box', {}, [
+        createNode('header', { level: 1, content: 'Title' }),
+        createNode('text', { content: 'Paragraph' }),
+        createNode('list', { items: ['Item'] }),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('\n\n')
+    })
+
+    it('renders complete dashboard with structure', () => {
+      const node = createNode('dashboard', {
+        title: 'Dashboard',
+        metrics: [{ label: 'Users', value: 100 }],
+      }, [
+        createNode('panel', { title: 'Activity' }, [
+          createNode('text', { content: 'Recent activity here' }),
+        ]),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Users')
+      expect(result).toContain('Activity')
+      expect(result).toContain('Recent activity here')
+    })
+  })
+
+  // ============================================================================
+  // Indentation Tests
+  // ============================================================================
+
+  describe('Indentation for nested structures', () => {
+    it('indents nested content 2 spaces per level', () => {
+      const node = createNode('box', { title: 'Outer' }, [
+        createNode('box', { title: 'Inner' }, [
+          createNode('text', { content: 'Deepest' }),
+        ]),
+      ])
+      const result = renderText(node)
+
+      expect(result).toContain('Outer')
+      expect(result).toContain('Inner')
+      expect(result).toContain('Deepest')
+    })
+
+    it('indents list items consistently', () => {
+      const node = createNode('list', {
+        items: [
+          'Top level',
+          'Another top',
+        ],
+      })
+      const result = renderText(node)
+
+      const lines = result.split('\n').filter((line) => line.trim())
+      expect(lines.length).toBeGreaterThan(0)
+      expect(result).toContain('- Top level')
+    })
+  })
+})