@mdxui/terminal 2.0.0

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

@@ -0,0 +1,1238 @@
+/**
+ * @mdxui/terminal Search Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Search component
+ * that provides search input with suggestions and filtering capabilities.
+ *
+ * Search component responsibilities:
+ * - Display search input field
+ * - Show search suggestions/autocomplete
+ * - Filter and display results
+ * - Support keyboard navigation of suggestions
+ * - Handle search submission
+ *
+ * Rendering across tiers:
+ * - TEXT: Plain input with results list
+ * - MARKDOWN: Formatted search results
+ * - ASCII: ASCII box around search and results
+ * - UNICODE: Unicode decorations for search
+ * - ANSI: Colors for matching text highlight
+ * - INTERACTIVE: Real-time suggestions, keyboard nav
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/input/search.test.ts
+ */
+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 createSearchNode(props: Record<string, unknown>): UINode {
+  return createNode('search', props)
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('Search Component', () => {
+  describe('function signature', () => {
+    it('exports renderSearch function', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      expect(typeof renderSearch).toBe('function')
+    })
+
+    it('accepts UINode and RenderContext and returns string', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({ value: '' })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Input Rendering Tests
+  // ============================================================================
+
+  describe('input rendering', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders search input field', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            placeholder: 'Search...',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Search')
+        })
+
+        it('renders current search value', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'hello world',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('hello world')
+        })
+
+        it('renders placeholder when empty', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            placeholder: 'Type to search...',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Type to search')
+        })
+
+        it('renders search icon/indicator', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({ value: '' })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          // Should have search icon or label
+          expect(result).toMatch(/[🔍🔎⌕]|search/i)
+        })
+
+        it('renders with label', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            label: 'Search Users',
+            value: '',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Search Users')
+        })
+
+        it('renders disabled state', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'disabled',
+            disabled: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('disabled')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Suggestions Rendering Tests
+  // ============================================================================
+
+  describe('suggestions rendering', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders suggestions list', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'app',
+            suggestions: [
+              { label: 'Apple', value: 'apple' },
+              { label: 'Application', value: 'application' },
+              { label: 'Appetizer', value: 'appetizer' },
+            ],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Apple')
+          expect(result).toContain('Application')
+          expect(result).toContain('Appetizer')
+        })
+
+        it('preserves suggestion order', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            suggestions: [
+              { label: 'First', value: 'first' },
+              { label: 'Second', value: 'second' },
+              { label: 'Third', value: 'third' },
+            ],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(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('hides suggestions when not focused', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'app',
+            suggestions: [{ label: 'Apple', value: 'apple' }],
+            showSuggestions: false,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          // Should not show suggestion
+          expect(result).not.toContain('Apple')
+        })
+
+        it('shows no suggestions message', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'xyz',
+            suggestions: [],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/no.*results|no.*suggestions|not found/i)
+        })
+
+        it('limits visible suggestions', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const suggestions = Array.from({ length: 20 }, (_, i) => ({
+            label: `Suggestion ${i + 1}`,
+            value: `sug${i + 1}`,
+          }))
+          const node = createSearchNode({
+            value: 'test',
+            suggestions,
+            showSuggestions: true,
+            maxSuggestions: 5,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          // Should contain first suggestions
+          expect(result).toContain('Suggestion 1')
+          // May or may not contain 5th depending on limit display
+        })
+
+        it('renders suggestion with description', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'user',
+            suggestions: [
+              { label: 'Users', value: 'users', description: 'Manage user accounts' },
+            ],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Users')
+          expect(result).toContain('Manage user accounts')
+        })
+
+        it('renders suggestion with icon', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'set',
+            suggestions: [
+              { label: 'Settings', value: 'settings', icon: 'gear' },
+            ],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Settings')
+        })
+
+        it('renders grouped suggestions', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'a',
+            suggestionGroups: [
+              {
+                label: 'Recent',
+                suggestions: [
+                  { label: 'Apple', value: 'apple' },
+                ],
+              },
+              {
+                label: 'Popular',
+                suggestions: [
+                  { label: 'Amazon', value: 'amazon' },
+                ],
+              },
+            ],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Recent')
+          expect(result).toContain('Apple')
+          expect(result).toContain('Popular')
+          expect(result).toContain('Amazon')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Filtering Tests
+  // ============================================================================
+
+  describe('filtering', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders filtered results', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'apple',
+            results: [
+              { id: '1', title: 'Apple iPhone', type: 'product' },
+              { id: '2', title: 'Apple MacBook', type: 'product' },
+            ],
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Apple iPhone')
+          expect(result).toContain('Apple MacBook')
+        })
+
+        it('shows result count', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            results: [
+              { id: '1', title: 'Result 1' },
+              { id: '2', title: 'Result 2' },
+              { id: '3', title: 'Result 3' },
+            ],
+            showResults: true,
+            totalResults: 42,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/42|results|found/i)
+        })
+
+        it('shows no results found message', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'nonexistent',
+            results: [],
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/no.*results|not found|empty/i)
+        })
+
+        it('renders result with subtitle/description', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'user',
+            results: [
+              {
+                id: '1',
+                title: 'John Doe',
+                subtitle: 'john@example.com',
+              },
+            ],
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('John Doe')
+          expect(result).toContain('john@example.com')
+        })
+
+        it('renders result with type indicator', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'doc',
+            results: [
+              { id: '1', title: 'Documentation', type: 'page' },
+              { id: '2', title: 'Dockerfile', type: 'file' },
+            ],
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Documentation')
+          expect(result).toContain('Dockerfile')
+        })
+
+        it('renders result categories/filters', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            categories: [
+              { label: 'All', count: 100 },
+              { label: 'Pages', count: 50 },
+              { label: 'Files', count: 30 },
+              { label: 'Users', count: 20 },
+            ],
+            activeCategory: 'All',
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('All')
+          expect(result).toContain('Pages')
+          expect(result).toContain('Files')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Highlight Matching Text Tests
+  // ============================================================================
+
+  describe('highlight matching text', () => {
+    describe('[ansi] tier', () => {
+      it('highlights matching text in suggestions', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'app',
+          suggestions: [
+            { label: 'Application', value: 'application' },
+          ],
+          showSuggestions: true,
+          highlightMatches: true,
+        })
+        const ctx = createContext('ansi')
+        const result = renderSearch(node, ctx)
+
+        // Should have bold or color for "app" portion
+        expect(result).toMatch(/\x1b\[(1|34)m.*app/i)
+      })
+
+      it('highlights matching text in results', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'test',
+          results: [
+            { id: '1', title: 'Testing Guide' },
+          ],
+          showResults: true,
+          highlightMatches: true,
+        })
+        const ctx = createContext('ansi')
+        const result = renderSearch(node, ctx)
+
+        // Should have highlight for "test" portion
+        expect(result).toMatch(/\x1b\[(1|34)m.*test/i)
+      })
+    })
+
+    describe('[markdown] tier', () => {
+      it('highlights matching text with markdown bold', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'app',
+          suggestions: [
+            { label: 'Application', value: 'application' },
+          ],
+          showSuggestions: true,
+          highlightMatches: true,
+        })
+        const ctx = createContext('markdown')
+        const result = renderSearch(node, ctx)
+
+        // Should have bold markdown for match
+        expect(result).toMatch(/\*\*app\*\*/i)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (Interactive Tier)
+  // ============================================================================
+
+  describe('[interactive] tier keyboard navigation', () => {
+    it('shows cursor in input', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'hello',
+        focused: true,
+        cursorPosition: 5,
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      // Should show cursor indicator
+      expect(result).toMatch(/\x1b\[(7|4)m|[|_▌█]/)
+    })
+
+    it('shows highlighted suggestion', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'app',
+        suggestions: [
+          { label: 'Apple', value: 'apple' },
+          { label: 'Application', value: 'application' },
+          { label: 'Appetizer', value: 'appetizer' },
+        ],
+        showSuggestions: true,
+        highlightedIndex: 1,
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      // Application should be highlighted
+      expect(result).toContain('Application')
+    })
+
+    it('shows keyboard navigation hints', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: '',
+        showSuggestions: true,
+        suggestions: [{ label: 'Test', value: 'test' }],
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toMatch(/↑|↓|Enter|Esc|Tab|Arrow/i)
+    })
+
+    it('shows clear button hint', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'some text',
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      // Should show clear hint
+      expect(result).toMatch(/clear|×|Esc|Ctrl\+/i)
+    })
+
+    it('shows submit hint', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'search query',
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      // Should show submit/enter hint
+      expect(result).toMatch(/Enter|search|submit/i)
+    })
+
+    it('shows scroll indicator for long suggestions', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const suggestions = Array.from({ length: 50 }, (_, i) => ({
+        label: `Suggestion ${i + 1}`,
+        value: `sug${i + 1}`,
+      }))
+      const node = createSearchNode({
+        value: 'test',
+        suggestions,
+        showSuggestions: true,
+        maxVisibleSuggestions: 5,
+      })
+      const ctx = createContext('interactive', { height: 10 })
+      const result = renderSearch(node, ctx)
+
+      // Should show scroll indicator
+      expect(result).toMatch(/[▼▲↓↑…]|more|scroll/i)
+    })
+
+    it('shows text selection', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'hello world',
+        focused: true,
+        selectionStart: 0,
+        selectionEnd: 5,
+      })
+      const ctx = createContext('interactive')
+      const result = renderSearch(node, ctx)
+
+      // Selected text should be highlighted
+      expect(result).toMatch(/\x1b\[7m/)
+    })
+  })
+
+  // ============================================================================
+  // Loading State Tests
+  // ============================================================================
+
+  describe('loading state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('shows loading indicator while searching', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            loading: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/loading|searching|\.{3}|⠋|spinner/i)
+        })
+
+        it('shows loading in suggestions area', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'app',
+            loading: true,
+            showSuggestions: true,
+            suggestions: [],
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/loading|searching|fetching/i)
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Border and Layout Tests
+  // ============================================================================
+
+  describe('border and layout', () => {
+    describe('[ascii] tier', () => {
+      it('renders ASCII border around search', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          border: true,
+        })
+        const ctx = createContext('ascii')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/[+\-|]/)
+      })
+
+      it('renders ASCII suggestions box', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'test',
+          suggestions: [{ label: 'Test', value: 'test' }],
+          showSuggestions: true,
+        })
+        const ctx = createContext('ascii')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/[+\-|]/)
+      })
+    })
+
+    describe('[unicode] tier', () => {
+      it('renders Unicode border around search', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          border: true,
+        })
+        const ctx = createContext('unicode')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/[┌┐└┘─│]/)
+      })
+
+      it('renders Unicode search icon', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+        })
+        const ctx = createContext('unicode')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/[🔍🔎⌕]/)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Recent Searches Tests
+  // ============================================================================
+
+  describe('recent searches', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders recent searches', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            recentSearches: [
+              'previous search 1',
+              'previous search 2',
+              'previous search 3',
+            ],
+            showRecentSearches: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('previous search 1')
+          expect(result).toContain('previous search 2')
+        })
+
+        it('shows recent header', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            recentSearches: ['search 1'],
+            showRecentSearches: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/recent|history|previous/i)
+        })
+
+        it('shows clear recent searches option', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            recentSearches: ['search 1', 'search 2'],
+            showRecentSearches: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toMatch(/clear|remove/i)
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Error State Tests
+  // ============================================================================
+
+  describe('error state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders error message', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            error: 'Search failed. Please try again.',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Search failed')
+        })
+
+        it('shows error state visually', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            error: 'Error',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Error')
+        })
+      })
+    })
+
+    describe('[ansi] tier error styling', () => {
+      it('renders error in red', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'test',
+          error: 'Error message',
+        })
+        const ctx = createContext('ansi')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toContain('\x1b[31m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Quick Actions Tests
+  // ============================================================================
+
+  describe('quick actions', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders quick action suggestions', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '>',
+            quickActions: [
+              { label: 'Create New', value: 'create', shortcut: 'Ctrl+N' },
+              { label: 'Settings', value: 'settings', shortcut: 'Ctrl+,' },
+            ],
+            showQuickActions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Create New')
+          expect(result).toContain('Settings')
+        })
+
+        it('shows keyboard shortcuts for actions', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '>',
+            quickActions: [
+              { label: 'Save', value: 'save', shortcut: 'Ctrl+S' },
+            ],
+            showQuickActions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Ctrl+S')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Voice Search Tests
+  // ============================================================================
+
+  describe('voice search', () => {
+    describe('[interactive] tier', () => {
+      it('shows voice search button', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          voiceEnabled: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/[🎤🎙]|voice|mic/i)
+      })
+
+      it('shows listening indicator', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          voiceEnabled: true,
+          voiceListening: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toMatch(/listening|recording|speak/i)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Search Scope/Context Tests
+  // ============================================================================
+
+  describe('search scope', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders search scope indicator', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            scope: 'current-folder',
+            scopeLabel: 'Current Folder',
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Current Folder')
+        })
+
+        it('renders scope options', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: '',
+            scopes: [
+              { label: 'Everywhere', value: 'all' },
+              { label: 'Current Project', value: 'project' },
+              { label: 'Open Files', value: 'open' },
+            ],
+            showScopes: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Everywhere')
+          expect(result).toContain('Current Project')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Inline vs Full Screen Modes
+  // ============================================================================
+
+  describe('display modes', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders inline mode', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            mode: 'inline',
+            suggestions: [{ label: 'Test', value: 'test' }],
+            showSuggestions: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('test')
+        })
+
+        it('renders expanded mode', async () => {
+          const { renderSearch } = await import('../../../renderers/components/search')
+          const node = createSearchNode({
+            value: 'test',
+            mode: 'expanded',
+            results: [
+              { id: '1', title: 'Result 1' },
+              { id: '2', title: 'Result 2' },
+            ],
+            showResults: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderSearch(node, ctx)
+
+          expect(result).toContain('Result 1')
+          expect(result).toContain('Result 2')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Command Palette Mode Tests
+  // ============================================================================
+
+  describe('command palette mode', () => {
+    describe('[interactive] tier', () => {
+      it('renders command palette style', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          mode: 'command-palette',
+          commands: [
+            { label: 'Toggle Theme', value: 'theme', shortcut: 'Ctrl+T' },
+            { label: 'Open File', value: 'open', shortcut: 'Ctrl+O' },
+          ],
+          showCommands: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toContain('Toggle Theme')
+        expect(result).toContain('Ctrl+T')
+      })
+
+      it('filters commands by input', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'open',
+          mode: 'command-palette',
+          commands: [
+            { label: 'Toggle Theme', value: 'theme' },
+            { label: 'Open File', value: 'open' },
+            { label: 'Open Recent', value: 'recent' },
+          ],
+          filteredCommands: [
+            { label: 'Open File', value: 'open' },
+            { label: 'Open Recent', value: 'recent' },
+          ],
+          showCommands: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toContain('Open File')
+        expect(result).toContain('Open Recent')
+        expect(result).not.toContain('Toggle Theme')
+      })
+
+      it('shows command categories', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          mode: 'command-palette',
+          commandGroups: [
+            {
+              label: 'File',
+              commands: [
+                { label: 'New File', value: 'new' },
+                { label: 'Save', value: 'save' },
+              ],
+            },
+            {
+              label: 'Edit',
+              commands: [
+                { label: 'Undo', value: 'undo' },
+                { label: 'Redo', value: 'redo' },
+              ],
+            },
+          ],
+          showCommands: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        expect(result).toContain('File')
+        expect(result).toContain('Edit')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    it('handles empty search value', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({ value: '' })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles null suggestions', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'test',
+        suggestions: null,
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles very long search query', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const longQuery = 'A'.repeat(200)
+      const node = createSearchNode({
+        value: longQuery,
+      })
+      const ctx = createContext('text', { width: 40 })
+      const result = renderSearch(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles special characters in query', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: '<script>alert("xss")</script>',
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toContain('script')
+    })
+
+    it('handles unicode in query', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: '日本語検索',
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toContain('日本語検索')
+    })
+
+    it('handles emoji in query', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: '🔍 search emoji',
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toContain('search emoji')
+    })
+
+    it('handles RTL text in query', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'مرحبا',
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toContain('مرحبا')
+    })
+
+    it('handles suggestion with missing label', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'test',
+        suggestions: [
+          { label: '', value: 'empty' },
+          { label: 'Normal', value: 'normal' },
+        ],
+        showSuggestions: true,
+      })
+      const ctx = createContext('text')
+      const result = renderSearch(node, ctx)
+
+      expect(result).toContain('Normal')
+    })
+
+    it('handles narrow terminal width', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const node = createSearchNode({
+        value: 'test',
+        suggestions: [
+          { label: 'A Long Suggestion Label', value: 'long' },
+        ],
+        showSuggestions: true,
+      })
+      const ctx = createContext('text', { width: 20 })
+      const result = renderSearch(node, ctx)
+
+      expect(result.length).toBeGreaterThan(0)
+    })
+
+    it('handles result with very long title', async () => {
+      const { renderSearch } = await import('../../../renderers/components/search')
+      const longTitle = 'Result Title ' + 'A'.repeat(200)
+      const node = createSearchNode({
+        value: 'test',
+        results: [{ id: '1', title: longTitle }],
+        showResults: true,
+      })
+      const ctx = createContext('text', { width: 40 })
+      const result = renderSearch(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Accessibility Tests
+  // ============================================================================
+
+  describe('accessibility', () => {
+    describe('[interactive] tier', () => {
+      it('includes ARIA-like label for search input', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: '',
+          ariaLabel: 'Search documentation',
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        // Should contain accessible label
+        expect(result).toMatch(/search|documentation/i)
+      })
+
+      it('shows selection index for screen reader', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'test',
+          suggestions: [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+            { label: 'Option 3', value: '3' },
+          ],
+          showSuggestions: true,
+          highlightedIndex: 1,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        // Should indicate position
+        expect(result).toMatch(/2.*of.*3|2\/3/i)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Debounce Indicator Tests
+  // ============================================================================
+
+  describe('debounce indicator', () => {
+    describe('[interactive] tier', () => {
+      it('shows typing indicator during debounce', async () => {
+        const { renderSearch } = await import('../../../renderers/components/search')
+        const node = createSearchNode({
+          value: 'typ',
+          isTyping: true,
+        })
+        const ctx = createContext('interactive')
+        const result = renderSearch(node, ctx)
+
+        // Should show some typing indicator
+        expect(result).toMatch(/typing|\.{3}|waiting/i)
+      })
+    })
+  })
+})