@mdxui/terminal 2.0.0

package/src/__tests__/components/data/list.test.ts

@@ -0,0 +1,473 @@
+/**
+ * @mdxui/terminal List Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the List data component
+ * across all 6 render tiers (TEXT, MARKDOWN, ASCII, UNICODE, ANSI, INTERACTIVE).
+ *
+ * List Component Features:
+ * - Items with text content
+ * - Icons per item
+ * - Nested lists (hierarchical)
+ * - Item actions (click, hover)
+ * - Selection (single/multi)
+ * - Different list styles (bullet, numbered, checklist)
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/data/list.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+
+import type { UINode, RenderContext, ThemeTokens, RenderTier } from '../../../core/types'
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+const ALL_TIERS: RenderTier[] = ['text', 'markdown', 'ascii', 'unicode', 'ansi', 'interactive']
+
+function createTestTheme(): ThemeTokens {
+  return {
+    primary: '\x1b[34m',
+    secondary: '\x1b[36m',
+    muted: '\x1b[90m',
+    foreground: '\x1b[37m',
+    background: '\x1b[40m',
+    border: '\x1b[90m',
+    success: '\x1b[32m',
+    warning: '\x1b[33m',
+    error: '\x1b[31m',
+    info: '\x1b[34m',
+  }
+}
+
+function createTestContext(tier: RenderTier, overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: tier === 'interactive',
+    ...overrides,
+  }
+}
+
+function createListNode(props: Record<string, unknown>, children?: UINode[]): UINode {
+  return {
+    type: 'list',
+    props,
+    children,
+  }
+}
+
+function createListItem(content: string, props?: Record<string, unknown>, children?: UINode[]): UINode {
+  return {
+    type: 'list-item',
+    props: { content, ...props },
+    children,
+  }
+}
+
+// ============================================================================
+// Renderer import helper - uses dynamic import for all tiers
+// ============================================================================
+
+async function renderForTier(node: UINode, tier: RenderTier, ctx?: RenderContext): Promise<string> {
+  const context = ctx ?? createTestContext(tier)
+  switch (tier) {
+    case 'text': {
+      const { renderText } = await import('../../../renderers/text')
+      return renderText(node)
+    }
+    case 'markdown': {
+      const { renderMarkdown } = await import('../../../renderers/markdown')
+      return renderMarkdown(node)
+    }
+    case 'ascii': {
+      const { renderASCII } = await import('../../../renderers/ascii')
+      return renderASCII(node, context)
+    }
+    case 'unicode': {
+      const { renderUnicode } = await import('../../../renderers/unicode')
+      return renderUnicode(node, context)
+    }
+    case 'ansi': {
+      const { renderANSI } = await import('../../../renderers/ansi')
+      return renderANSI(node)
+    }
+    case 'interactive': {
+      const { renderInteractive } = await import('../../../renderers/interactive')
+      return renderInteractive(node, context)
+    }
+  }
+}
+
+// ============================================================================
+// Basic List Rendering Tests
+// ============================================================================
+
+describe('List Component', () => {
+  describe('basic rendering across all tiers', () => {
+    const items = ['First item', 'Second item', 'Third item']
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders list items', async () => {
+          const node = createListNode({ items })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('First item')
+          expect(result).toContain('Second item')
+          expect(result).toContain('Third item')
+        })
+
+        it('renders list with children nodes', async () => {
+          const node = createListNode({}, [
+            createListItem('Child A'),
+            createListItem('Child B'),
+            createListItem('Child C'),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Child A')
+          expect(result).toContain('Child B')
+          expect(result).toContain('Child C')
+        })
+
+        it('handles empty list', async () => {
+          const node = createListNode({ items: [] })
+          const result = await renderForTier(node, tier)
+
+          expect(typeof result).toBe('string')
+        })
+
+        it('handles single item list', async () => {
+          const node = createListNode({ items: ['Only item'] })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Only item')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // List Style Tests
+  // ============================================================================
+
+  describe('list styles', () => {
+    const items = ['Apple', 'Banana', 'Cherry']
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders unordered list with bullet markers', async () => {
+          const node = createListNode({ items, style: 'unordered' })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Apple')
+          expect(result).toContain('Banana')
+          expect(result).toContain('Cherry')
+        })
+
+        it('renders ordered list with numbers', async () => {
+          const node = createListNode({ items, style: 'ordered', numbered: true })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Apple')
+          expect(result).toMatch(/1[.)]/)
+          expect(result).toMatch(/2[.)]/)
+          expect(result).toMatch(/3[.)]/)
+        })
+
+        it('renders checklist with checkboxes', async () => {
+          const checkItems = [
+            { text: 'Done task', checked: true },
+            { text: 'Pending task', checked: false },
+          ]
+          const node = createListNode({ items: checkItems, style: 'checklist', taskList: true })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Done task')
+          expect(result).toContain('Pending task')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Icons Tests
+  // ============================================================================
+
+  describe('items with icons', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders items with icon property', async () => {
+          const itemsWithIcons = [
+            { text: 'Documents', icon: 'folder' },
+            { text: 'Images', icon: 'image' },
+          ]
+          const node = createListNode({ items: itemsWithIcons })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Documents')
+          expect(result).toContain('Images')
+        })
+
+        it('renders items with status icon variants', async () => {
+          const node = createListNode({}, [
+            createListItem('Success item', { icon: 'success', variant: 'success' }),
+            createListItem('Error item', { icon: 'error', variant: 'error' }),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Success item')
+          expect(result).toContain('Error item')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Nested Lists Tests
+  // ============================================================================
+
+  describe('nested lists', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders two-level nested list', async () => {
+          const node = createListNode({}, [
+            createListItem('Parent 1', {}, [
+              createListNode({}, [
+                createListItem('Child 1.1'),
+                createListItem('Child 1.2'),
+              ]),
+            ]),
+            createListItem('Parent 2'),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Parent 1')
+          expect(result).toContain('Child 1.1')
+          expect(result).toContain('Child 1.2')
+          expect(result).toContain('Parent 2')
+        })
+
+        it('renders three-level nested list', async () => {
+          const node = createListNode({}, [
+            createListItem('Level 1', {}, [
+              createListNode({}, [
+                createListItem('Level 2', {}, [
+                  createListNode({}, [
+                    createListItem('Level 3'),
+                  ]),
+                ]),
+              ]),
+            ]),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Level 1')
+          expect(result).toContain('Level 2')
+          expect(result).toContain('Level 3')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Item Actions Tests
+  // ============================================================================
+
+  describe('item actions', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders items with action handlers', async () => {
+          const node = createListNode({}, [
+            createListItem('Clickable item', { action: 'click', href: '/page1' }),
+            createListItem('Another action', { action: 'click', href: '/page2' }),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Clickable item')
+          expect(result).toContain('Another action')
+        })
+
+        it('renders disabled action items', async () => {
+          const node = createListNode({}, [
+            createListItem('Disabled item', { disabled: true }),
+            createListItem('Enabled item'),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Disabled item')
+          expect(result).toContain('Enabled item')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const items = ['Item 1', 'Item 2', 'Item 3']
+
+    describe('TEXT tier', () => {
+      it('renders with - bullet marker', async () => {
+        const node = createListNode({ items })
+        const result = await renderForTier(node, 'text')
+
+        expect(result).toContain('- Item 1')
+        expect(result).toContain('- Item 2')
+      })
+
+      it('renders numbered list with 1. 2. 3.', async () => {
+        const node = createListNode({ items, numbered: true })
+        const result = await renderForTier(node, 'text')
+
+        expect(result).toContain('1. Item 1')
+        expect(result).toContain('2. Item 2')
+        expect(result).toContain('3. Item 3')
+      })
+    })
+
+    describe('MARKDOWN tier', () => {
+      it('renders with markdown bullet syntax', async () => {
+        const node = createListNode({ items })
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toMatch(/[-*]\s+Item 1/)
+      })
+
+      it('renders task list items with checkbox syntax', async () => {
+        const checkItems = [
+          { text: 'Done', checked: true },
+          { text: 'Todo', checked: false },
+        ]
+        const node = createListNode({ items: checkItems, taskList: true })
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toContain('[x]')
+        expect(result).toContain('[ ]')
+      })
+    })
+
+    describe('ASCII tier', () => {
+      it('renders with * or - bullets', async () => {
+        const node = createListNode({ items })
+        const result = await renderForTier(node, 'ascii')
+
+        expect(result).toMatch(/[-*]\s+Item 1/)
+      })
+
+      it('renders checkbox with [x] and [ ]', async () => {
+        const checkItems = [
+          { text: 'Checked', checked: true },
+          { text: 'Unchecked', checked: false },
+        ]
+        const node = createListNode({ items: checkItems, taskList: true })
+        const result = await renderForTier(node, 'ascii')
+
+        expect(result).toContain('[x]')
+        expect(result).toContain('[ ]')
+      })
+    })
+
+    describe('UNICODE tier', () => {
+      it('renders with unicode bullet character', async () => {
+        const node = createListNode({ items, style: 'unordered' })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toContain('Item 1')
+        expect(result).toMatch(/[•◦▪▸]/)
+      })
+
+      it('renders checkmark for completed items', async () => {
+        const checkItems = [
+          { text: 'Done', checked: true },
+          { text: 'Not done', checked: false },
+        ]
+        const node = createListNode({ items: checkItems, taskList: true })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toMatch(/[✓✔☑]/)
+      })
+    })
+
+    describe('ANSI tier', () => {
+      it('renders with ANSI color codes', async () => {
+        const node = createListNode({ items })
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[/)
+      })
+
+      it('applies color to icon', async () => {
+        const node = createListNode({}, [
+          createListItem('Success', { icon: 'check', variant: 'success' }),
+        ])
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[\d+m/)
+      })
+    })
+
+    describe('INTERACTIVE tier', () => {
+      it('shows focus cursor on current item', async () => {
+        const node = createListNode({
+          items: ['First', 'Second', 'Third'],
+          focusedIndex: 1,
+        })
+        const result = await renderForTier(node, 'interactive')
+
+        expect(result).toContain('Second')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('handles empty string items', async () => {
+          const node = createListNode({ items: ['', 'Non-empty', ''] })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Non-empty')
+        })
+
+        it('handles very long item text', async () => {
+          const longText = 'A'.repeat(200)
+          const node = createListNode({ items: [longText] })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('A')
+        })
+
+        it('handles unicode in items', async () => {
+          const node = createListNode({ items: ['Hello world'] })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Hello')
+        })
+
+        it('handles deeply nested lists', async () => {
+          let innermost = createListNode({}, [createListItem('Deepest')])
+          for (let i = 0; i < 5; i++) {
+            innermost = createListNode({}, [
+              createListItem(`Level ${5 - i}`, {}, [innermost]),
+            ])
+          }
+          const result = await renderForTier(innermost, tier)
+
+          expect(result).toContain('Deepest')
+          expect(result).toContain('Level 1')
+        })
+      })
+    })
+  })
+})