@mdxui/terminal 2.0.0

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

@@ -0,0 +1,448 @@
+/**
+ * @mdxui/terminal Table Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Table data component
+ * across all 6 render tiers (TEXT, MARKDOWN, ASCII, UNICODE, ANSI, INTERACTIVE).
+ *
+ * Table Component Features:
+ * - Column definitions with headers and keys
+ * - Row data rendering
+ * - Row selection (single/multi)
+ * - Column sorting
+ * - Row actions
+ * - Pagination
+ * - Empty state handling
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/data/table.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 createTableNode(props: Record<string, unknown>, data?: unknown[]): UINode {
+  return {
+    type: 'table',
+    props,
+    data,
+  }
+}
+
+// ============================================================================
+// Renderer import helper - uses dynamic import for interactive tier
+// ============================================================================
+
+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 Table Rendering Tests
+// ============================================================================
+
+describe('Table Component', () => {
+  describe('basic rendering across all tiers', () => {
+    const columns = [
+      { key: 'name', header: 'Name' },
+      { key: 'email', header: 'Email' },
+      { key: 'role', header: 'Role' },
+    ]
+    const data = [
+      { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+      { name: 'Bob', email: 'bob@example.com', role: 'User' },
+      { name: 'Carol', email: 'carol@example.com', role: 'User' },
+    ]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders column headers', async () => {
+          const node = createTableNode({ columns }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Name')
+          expect(result).toContain('Email')
+          expect(result).toContain('Role')
+        })
+
+        it('renders row data', async () => {
+          const node = createTableNode({ columns }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Alice')
+          expect(result).toContain('alice@example.com')
+          expect(result).toContain('Admin')
+          expect(result).toContain('Bob')
+          expect(result).toContain('Carol')
+        })
+
+        it('handles empty data array', async () => {
+          const node = createTableNode({ columns }, [])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Name')
+          expect(typeof result).toBe('string')
+        })
+
+        it('handles missing column values', async () => {
+          const node = createTableNode({ columns }, [{ name: 'Dave' }])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Dave')
+          expect(typeof result).toBe('string')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Column Configuration Tests
+  // ============================================================================
+
+  describe('column configuration', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('respects column width', async () => {
+          const columns = [
+            { key: 'id', header: 'ID', width: 5 },
+            { key: 'name', header: 'Name', width: 20 },
+          ]
+          const node = createTableNode({ columns }, [{ id: '1', name: 'Alice' }])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('ID')
+          expect(result).toContain('Name')
+        })
+
+        it('renders column with custom align', async () => {
+          const columns = [
+            { key: 'price', header: 'Price', align: 'right' },
+            { key: 'name', header: 'Name', align: 'left' },
+          ]
+          const node = createTableNode({ columns }, [{ price: '$99.99', name: 'Widget' }])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Price')
+          expect(result).toContain('$99.99')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Row Selection Tests
+  // ============================================================================
+
+  describe('row selection', () => {
+    const columns = [
+      { key: 'id', header: 'ID' },
+      { key: 'name', header: 'Name' },
+    ]
+    const data = [
+      { id: '1', name: 'Alice' },
+      { id: '2', name: 'Bob' },
+      { id: '3', name: 'Carol' },
+    ]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders selectable rows with selection indicator', async () => {
+          const node = createTableNode({ columns, selectable: true, selectedRows: ['1'] }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Alice')
+          expect(result.length).toBeGreaterThan(0)
+        })
+
+        it('renders multi-select with checkbox indicators', async () => {
+          const node = createTableNode({ columns, selectable: 'multi', selectedRows: ['1', '3'] }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Alice')
+          expect(result).toContain('Carol')
+        })
+
+        it('highlights currently selected row', async () => {
+          const node = createTableNode({ columns, selectable: true, selectedRows: ['2'] }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Bob')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Sorting Tests
+  // ============================================================================
+
+  describe('column sorting', () => {
+    const columns = [
+      { key: 'name', header: 'Name', sortable: true },
+      { key: 'age', header: 'Age', sortable: true },
+    ]
+    const data = [
+      { name: 'Carol', age: 35 },
+      { name: 'Alice', age: 28 },
+      { name: 'Bob', age: 32 },
+    ]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('shows sort indicator for sorted column (ascending)', async () => {
+          const node = createTableNode({ columns, sortBy: 'name', sortDirection: 'asc' }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Name')
+          expect(result.length).toBeGreaterThan(0)
+        })
+
+        it('shows sort indicator for sorted column (descending)', async () => {
+          const node = createTableNode({ columns, sortBy: 'age', sortDirection: 'desc' }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Age')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Row Actions Tests
+  // ============================================================================
+
+  describe('row actions', () => {
+    const columns = [
+      { key: 'name', header: 'Name' },
+      { key: 'status', header: 'Status' },
+    ]
+    const data = [
+      { name: 'Task 1', status: 'Active' },
+      { name: 'Task 2', status: 'Pending' },
+    ]
+    const actions = [
+      { key: 'edit', label: 'Edit', icon: 'pencil' },
+      { key: 'delete', label: 'Delete', icon: 'trash' },
+    ]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders action column', async () => {
+          const node = createTableNode({ columns, actions }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Task 1')
+          expect(result.length).toBeGreaterThan(0)
+        })
+
+        it('shows action labels or icons', async () => {
+          const node = createTableNode({ columns, actions, showActionLabels: true }, data)
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Task 1')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const columns = [
+      { key: 'name', header: 'Name' },
+      { key: 'value', header: 'Value' },
+    ]
+    const data = [
+      { name: 'Item 1', value: '100' },
+      { name: 'Item 2', value: '200' },
+    ]
+
+    describe('TEXT tier', () => {
+      it('renders table without borders', async () => {
+        const node = createTableNode({ columns }, data)
+        const result = await renderForTier(node, 'text')
+
+        expect(result).toContain('Name')
+        expect(result).toContain('Item 1')
+        expect(result).not.toContain('|')
+        expect(result).not.toContain('+')
+      })
+    })
+
+    describe('MARKDOWN tier', () => {
+      it('renders as markdown table syntax', async () => {
+        const node = createTableNode({ columns }, data)
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toContain('|')
+        expect(result).toContain('Name')
+      })
+
+      it('includes header separator row', async () => {
+        const node = createTableNode({ columns }, data)
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toMatch(/[-|]+/)
+      })
+    })
+
+    describe('ASCII tier', () => {
+      it('renders table with ASCII box characters', async () => {
+        const node = createTableNode({ columns }, data)
+        const result = await renderForTier(node, 'ascii')
+
+        expect(result).toMatch(/[+\-|]/)
+      })
+    })
+
+    describe('UNICODE tier', () => {
+      it('renders table with unicode box-drawing characters', async () => {
+        const node = createTableNode({ columns, border: true }, data)
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toMatch(/[─│┌┐└┘├┤┬┴┼]/)
+      })
+    })
+
+    describe('ANSI tier', () => {
+      it('renders with ANSI color codes', async () => {
+        const node = createTableNode({ columns }, data)
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[/)
+      })
+
+      it('applies header styling', async () => {
+        const node = createTableNode({ columns, headerStyle: { bold: true } }, data)
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[1m|\x1b\[\d+m/)
+      })
+    })
+
+    describe('INTERACTIVE tier', () => {
+      it('renders selectable rows with cursor', async () => {
+        const node = createTableNode({ columns, selectable: true, focusedRow: 0 }, data)
+        const result = await renderForTier(node, 'interactive')
+
+        expect(result).toContain('Item 1')
+      })
+
+      it('highlights focused row', async () => {
+        const node = createTableNode({ columns, focusedRow: 1 }, data)
+        const result = await renderForTier(node, 'interactive')
+
+        expect(result).toContain('Item 2')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('handles null values in data', async () => {
+          const columns = [{ key: 'name', header: 'Name' }]
+          const node = createTableNode({ columns }, [{ name: null }])
+          const result = await renderForTier(node, tier)
+
+          expect(typeof result).toBe('string')
+        })
+
+        it('handles very long cell content', async () => {
+          const columns = [{ key: 'content', header: 'Content', width: 20 }]
+          const node = createTableNode({ columns }, [
+            { content: 'This is a very long string that should be truncated or wrapped' },
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result.length).toBeGreaterThan(0)
+        })
+
+        it('handles many columns', async () => {
+          const columns = Array.from({ length: 10 }, (_, i) => ({
+            key: `col${i}`,
+            header: `Column ${i}`,
+          }))
+          const node = createTableNode({ columns }, [
+            Object.fromEntries(columns.map((c) => [c.key, 'value'])),
+          ])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Column 0')
+        })
+
+        it('handles unicode in cell content', async () => {
+          const columns = [{ key: 'name', header: 'Name' }]
+          const node = createTableNode({ columns }, [{ name: 'Hello world' }])
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('world')
+        })
+      })
+    })
+  })
+})