@mdxui/terminal 2.0.0

package/src/__tests__/components/input/select.test.ts

@@ -0,0 +1,658 @@
+/**
+ * @mdxui/terminal Select Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Select component
+ * that renders dropdown/list selection with options and keyboard navigation.
+ *
+ * Rendering across tiers:
+ * - TEXT: Plain list with selected indicator
+ * - MARKDOWN: Markdown list with selection marker
+ * - ASCII: ASCII box with scrollable list
+ * - UNICODE: Unicode box with scroll indicators
+ * - ANSI: Colors for selection and hover states
+ * - INTERACTIVE: Full keyboard navigation, type-to-search
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ */
+import { describe, it, expect } from 'vitest'
+import type { UINode, RenderTier, RenderContext, ThemeTokens } from '../../../core/types'
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const RENDER_TIERS: RenderTier[] = ['text', 'markdown', 'ascii', 'unicode', 'ansi', 'interactive']
+
+const mockTheme: ThemeTokens = {
+  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 createContext(tier: RenderTier, overrides: Partial<RenderContext> = {}): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: mockTheme,
+    interactive: tier === 'interactive',
+    ...overrides,
+  }
+}
+
+function createNode(
+  type: string,
+  props: Record<string, unknown> = {},
+  children?: UINode[]
+): UINode {
+  return { type, props, children }
+}
+
+function createSelectNode(props: Record<string, unknown>): UINode {
+  return createNode('select', props)
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('Select Component', () => {
+  describe('function signature', () => {
+    it('exports renderSelect function', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      expect(typeof renderSelect).toBe('function')
+    })
+
+    it('accepts UINode and RenderContext and returns string', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        options: [{ label: 'Option 1', value: 'opt1' }],
+      })
+      const ctx = createContext('text')
+      const result = renderSelect(node, ctx)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Options Rendering Tests
+  // ============================================================================
+
+  describe('options rendering', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders single option', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            options: [{ label: 'First Option', value: 'first' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('First Option')
+        })
+
+        it('renders multiple options', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+              { label: 'Option C', value: 'c' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Option A')
+          expect(result).toContain('Option B')
+          expect(result).toContain('Option C')
+        })
+
+        it('preserves option order', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            options: [
+              { label: 'First', value: '1' },
+              { label: 'Second', value: '2' },
+              { label: 'Third', value: '3' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          const firstPos = result.indexOf('First')
+          const secondPos = result.indexOf('Second')
+          const thirdPos = result.indexOf('Third')
+
+          expect(firstPos).toBeLessThan(secondPos)
+          expect(secondPos).toBeLessThan(thirdPos)
+        })
+
+        it('renders empty select gracefully', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({ options: [] })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(typeof result).toBe('string')
+        })
+
+        it('renders select with label', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            label: 'Choose Country',
+            options: [{ label: 'USA', value: 'us' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Choose Country')
+        })
+
+        it('renders placeholder when no selection', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            placeholder: 'Select an option',
+            options: [{ label: 'Option 1', value: '1' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Select an option')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Selection Indicator Tests
+  // ============================================================================
+
+  describe('selection indicator', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('shows selected option', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            value: 'b',
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+              { label: 'Option C', value: 'c' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Option B')
+        })
+
+        it('distinguishes selected from unselected', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            value: 'selected',
+            options: [
+              { label: 'Selected Item', value: 'selected' },
+              { label: 'Other Item', value: 'other' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toMatch(/[✓✔●◉>*\[\*\]]/i)
+        })
+      })
+    })
+
+    describe('[ansi] tier selection styling', () => {
+      it('highlights selected option', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          value: 'selected',
+          options: [
+            { label: 'Selected', value: 'selected' },
+            { label: 'Other', value: 'other' },
+          ],
+        })
+        const ctx = createContext('ansi')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toMatch(/\x1b\[(34|32)m/)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Dropdown State Tests
+  // ============================================================================
+
+  describe('dropdown state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders collapsed state showing only selected', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            open: false,
+            value: 'selected',
+            options: [
+              { label: 'Selected Option', value: 'selected' },
+              { label: 'Other Option', value: 'other' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Selected Option')
+        })
+
+        it('renders expanded state showing all options', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            open: true,
+            value: 'b',
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+              { label: 'Option C', value: 'c' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Option A')
+          expect(result).toContain('Option B')
+          expect(result).toContain('Option C')
+        })
+
+        it('shows dropdown indicator', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            open: false,
+            options: [{ label: 'Option', value: 'opt' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toMatch(/[▼▾↓v>]/i)
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Disabled Options Tests
+  // ============================================================================
+
+  describe('disabled options', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders disabled option', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            options: [
+              { label: 'Available', value: 'available' },
+              { label: 'Unavailable', value: 'unavailable', disabled: true },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Available')
+          expect(result).toContain('Unavailable')
+        })
+      })
+    })
+
+    describe('[ansi] tier disabled styling', () => {
+      it('renders disabled option as dimmed', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          options: [
+            { label: 'Disabled', value: 'disabled', disabled: true },
+          ],
+        })
+        const ctx = createContext('ansi')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toContain('\x1b[2m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (Interactive Tier)
+  // ============================================================================
+
+  describe('[interactive] tier keyboard navigation', () => {
+    it('shows currently highlighted option', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        open: true,
+        highlightedIndex: 1,
+        options: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+          { label: 'Option C', value: 'c' },
+        ],
+      })
+      const ctx = createContext('interactive')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toContain('Option B')
+    })
+
+    it('shows keyboard navigation hints', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        open: true,
+        options: [{ label: 'Option', value: 'opt' }],
+      })
+      const ctx = createContext('interactive')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toMatch(/↑|↓|Enter|Esc|Arrow/i)
+    })
+
+    it('renders search input when searchable', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        open: true,
+        searchable: true,
+        searchValue: 'app',
+        options: [
+          { label: 'Apple', value: 'apple' },
+          { label: 'Banana', value: 'banana' },
+        ],
+      })
+      const ctx = createContext('interactive')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toContain('app')
+    })
+
+    it('shows no results message when filter has no matches', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        open: true,
+        searchable: true,
+        searchValue: 'xyz',
+        filteredOptions: [],
+        options: [
+          { label: 'Apple', value: 'apple' },
+        ],
+      })
+      const ctx = createContext('interactive')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toMatch(/no.*results|no.*matches|not found/i)
+    })
+  })
+
+  // ============================================================================
+  // ASCII/Unicode Border Tests
+  // ============================================================================
+
+  describe('border rendering', () => {
+    describe('[ascii] tier', () => {
+      it('renders ASCII box when open', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          open: true,
+          options: [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ],
+        })
+        const ctx = createContext('ascii')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toMatch(/[+\-|]/)
+      })
+    })
+
+    describe('[unicode] tier', () => {
+      it('renders Unicode box when open', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          open: true,
+          options: [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ],
+        })
+        const ctx = createContext('unicode')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toMatch(/[┌┐└┘─│]/)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Multi-Select Tests
+  // ============================================================================
+
+  describe('multi-select mode', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders checkboxes for multi-select', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            multiple: true,
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toMatch(/[☐☑✓✔\[\s\]\[x\]]/i)
+        })
+
+        it('shows multiple selected values', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            multiple: true,
+            value: ['a', 'c'],
+            options: [
+              { label: 'Option A', value: 'a' },
+              { label: 'Option B', value: 'b' },
+              { label: 'Option C', value: 'c' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Option A')
+          expect(result).toContain('Option C')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Validation Tests
+  // ============================================================================
+
+  describe('validation', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders required indicator', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            label: 'Country',
+            required: true,
+            options: [{ label: 'USA', value: 'us' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toMatch(/\*|required/i)
+        })
+
+        it('renders error message', async () => {
+          const { renderSelect } = await import('../../../renderers/components/select')
+          const node = createSelectNode({
+            options: [{ label: 'Option', value: 'opt' }],
+            error: 'Please select an option',
+          })
+          const ctx = createContext(tier)
+          const result = renderSelect(node, ctx)
+
+          expect(result).toContain('Please select an option')
+        })
+      })
+    })
+
+    describe('[ansi] tier validation styling', () => {
+      it('renders error in red', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          options: [{ label: 'Option', value: 'opt' }],
+          error: 'Error message',
+        })
+        const ctx = createContext('ansi')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toContain('\x1b[31m')
+      })
+
+      it('renders valid state in green', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          value: 'opt',
+          valid: true,
+          options: [{ label: 'Option', value: 'opt' }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toContain('\x1b[32m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Disabled State Tests
+  // ============================================================================
+
+  describe('disabled state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      it(`[${tier}] renders disabled select`, async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          disabled: true,
+          value: 'selected',
+          options: [
+            { label: 'Selected Option', value: 'selected' },
+            { label: 'Other', value: 'other' },
+          ],
+        })
+        const ctx = createContext(tier)
+        const result = renderSelect(node, ctx)
+
+        expect(result).toContain('Selected Option')
+      })
+    })
+
+    describe('[ansi] tier disabled styling', () => {
+      it('renders disabled select as dimmed', async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          disabled: true,
+          options: [{ label: 'Option', value: 'opt' }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderSelect(node, ctx)
+
+        expect(result).toContain('\x1b[2m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Loading State Tests
+  // ============================================================================
+
+  describe('loading state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      it(`[${tier}] renders loading indicator`, async () => {
+        const { renderSelect } = await import('../../../renderers/components/select')
+        const node = createSelectNode({
+          loading: true,
+          options: [],
+        })
+        const ctx = createContext(tier)
+        const result = renderSelect(node, ctx)
+
+        expect(result).toMatch(/loading|\.{3}|⠋|spinner/i)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    it('handles missing options array', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({})
+      const ctx = createContext('text')
+      const result = renderSelect(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles null value', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        value: null,
+        options: [{ label: 'Option', value: 'opt' }],
+      })
+      const ctx = createContext('text')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toContain('Option')
+    })
+
+    it('handles unicode in options', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        options: [
+          { label: '日本語', value: 'ja' },
+          { label: 'العربية', value: 'ar' },
+        ],
+      })
+      const ctx = createContext('text')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toContain('日本語')
+      expect(result).toContain('العربية')
+    })
+
+    it('handles emoji in option labels', async () => {
+      const { renderSelect } = await import('../../../renderers/components/select')
+      const node = createSelectNode({
+        options: [
+          { label: '🇺🇸 United States', value: 'us' },
+          { label: '🇬🇧 United Kingdom', value: 'uk' },
+        ],
+      })
+      const ctx = createContext('text')
+      const result = renderSelect(node, ctx)
+
+      expect(result).toContain('United States')
+    })
+  })
+})