@mdxui/terminal 2.0.0

package/src/__tests__/components/navigation/breadcrumb.test.ts

@@ -0,0 +1,923 @@
+/**
+ * @mdxui/terminal Breadcrumb Navigation Component Tests
+ *
+ * TDD RED Phase: Tests for the Breadcrumb navigation component.
+ * All tests should FAIL initially because the Breadcrumb renderers don't exist yet.
+ *
+ * The Breadcrumb component shows navigation path hierarchy with:
+ * - Segments (path items)
+ * - Current segment indication
+ * - Clickable links (except current)
+ * - Customizable separators
+ * - Responsive truncation for long paths
+ *
+ * This is part of the Universal Terminal UI 6-tier rendering system.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type { UINode, RenderTier, RenderContext, ThemeTokens } from '../../../core/types'
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+const RENDER_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 createContext(tier: RenderTier): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: tier === 'interactive',
+  }
+}
+
+// ============================================================================
+// Breadcrumb Types
+// ============================================================================
+
+interface BreadcrumbSegment {
+  label: string
+  path?: string
+  icon?: string
+}
+
+interface BreadcrumbProps {
+  segments: BreadcrumbSegment[]
+  separator?: string
+  maxItems?: number
+  showHome?: boolean
+  homeLabel?: string
+  homeIcon?: string
+  onNavigate?: (path: string) => void
+}
+
+function createBreadcrumbNode(props: BreadcrumbProps): UINode {
+  return {
+    type: 'breadcrumb',
+    props,
+    children: props.segments.map((segment, index) => ({
+      type: 'breadcrumb-segment',
+      props: {
+        label: segment.label,
+        path: segment.path,
+        icon: segment.icon,
+        isCurrent: index === props.segments.length - 1,
+      },
+    })),
+  }
+}
+
+// ============================================================================
+// Test Suite: Basic Breadcrumb Rendering
+// ============================================================================
+
+describe('Breadcrumb Component', () => {
+  describe('basic rendering', () => {
+    it('renders breadcrumb with segments', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Electronics' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Electronics')
+    })
+
+    it('renders single segment', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [{ label: 'Dashboard' }],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toContain('Dashboard')
+      // Single segment should not have separator
+      expect(result).not.toMatch(/[\/>\u203A\u2192]/)
+    })
+
+    it('returns empty string for empty segments', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({ segments: [] })
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toBe('')
+    })
+
+    it('renders segments with icons', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/', icon: '\u2302' },
+          { label: 'Settings', path: '/settings', icon: '\u2699' },
+          { label: 'Profile', icon: '\u263A' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toContain('\u2302')
+      expect(result).toContain('\u2699')
+      expect(result).toContain('\u263A')
+    })
+  })
+
+  // ============================================================================
+  // Separator Tests
+  // ============================================================================
+
+  describe('separators', () => {
+    it('uses default separator', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'About' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Default separator should be right-pointing arrow or slash
+      expect(result).toMatch(/[\/>\u203A\u2192\u25B8\u276F]/)
+    })
+
+    it('uses custom separator', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Item' },
+        ],
+        separator: '::',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toContain('::')
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Item')
+    })
+
+    it('text tier uses slash separator', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Page' },
+        ],
+      })
+
+      const ctx = createContext('text')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Text tier should use simple / or >
+      expect(result).toMatch(/\/|>/)
+    })
+
+    it('ascii tier uses > or / separator', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Level 1', path: '/1' },
+          { label: 'Level 2' },
+        ],
+      })
+
+      const ctx = createContext('ascii')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toMatch(/[\/>\-]/)
+    })
+
+    it('unicode tier uses chevron or arrow', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Root', path: '/' },
+          { label: 'Child' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Unicode uses fancy arrows
+      expect(result).toMatch(/[\u203A\u2192\u25B8\u276F\u2794]/)
+    })
+
+    it('separators appear between all segments', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'A', path: '/a' },
+          { label: 'B', path: '/b' },
+          { label: 'C', path: '/c' },
+          { label: 'D' },
+        ],
+        separator: '|',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Count separators (should be n-1 where n is number of segments)
+      const separatorCount = (result.match(/\|/g) || []).length
+      expect(separatorCount).toBe(3)
+    })
+  })
+
+  // ============================================================================
+  // Current Segment Tests
+  // ============================================================================
+
+  describe('current segment indication', () => {
+    it('marks last segment as current', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current Item' },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Current segment should have different styling
+      expect(result).toContain('Current Item')
+
+      // Current segment typically bold or different color
+      const currentIndex = result.indexOf('Current Item')
+      const beforeCurrent = result.slice(Math.max(0, currentIndex - 20), currentIndex)
+
+      // Should have styling code before current
+      expect(beforeCurrent).toMatch(/\x1b\[.*m/)
+    })
+
+    it('current segment is not clickable (no path)', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' }, // No path = current page
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Verify current is present
+      expect(result).toContain('Current')
+    })
+
+    it('text tier shows current with different marker', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current Page' },
+        ],
+      })
+
+      const ctx = createContext('text')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Current might be marked with brackets, bold indicator, or no link
+      // The current page typically appears plainly while others might be [bracketed]
+      expect(result).toContain('Current Page')
+    })
+
+    it('previous segments are shown as links', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Links should have underline or different color
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+
+      // Link styling (underline code is 4m)
+      expect(result).toMatch(/\x1b\[4m|\x1b\[34m|\x1b\[36m/)
+    })
+  })
+
+  // ============================================================================
+  // Link Navigation Tests
+  // ============================================================================
+
+  describe('link navigation', () => {
+    it('markdown tier renders links as markdown', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+      })
+
+      const ctx = createContext('markdown')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Markdown links: [label](path)
+      expect(result).toMatch(/\[Home\]\(\/\)/)
+      expect(result).toMatch(/\[Products\]\(\/products\)/)
+    })
+
+    it('segments with paths are navigable', async () => {
+      const { createBreadcrumbState, handleBreadcrumbClick } = await import('../../../renderers/breadcrumb')
+
+      const onNavigate = vi.fn()
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        onNavigate,
+      })
+
+      // Click on Products
+      handleBreadcrumbClick(state, 1)
+
+      expect(onNavigate).toHaveBeenCalledWith('/products')
+    })
+
+    it('clicking current segment does nothing', async () => {
+      const { createBreadcrumbState, handleBreadcrumbClick } = await import('../../../renderers/breadcrumb')
+
+      const onNavigate = vi.fn()
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+        onNavigate,
+      })
+
+      // Click on current (index 1, last item)
+      handleBreadcrumbClick(state, 1)
+
+      expect(onNavigate).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================================================
+  // Home Segment Tests
+  // ============================================================================
+
+  describe('home segment', () => {
+    it('can show home icon automatically', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Products', path: '/products' },
+          { label: 'Item' },
+        ],
+        showHome: true,
+        homeIcon: '\u2302',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Home icon should be prepended
+      expect(result).toContain('\u2302')
+
+      // Products should come after home
+      const homeIndex = result.indexOf('\u2302')
+      const productsIndex = result.indexOf('Products')
+      expect(homeIndex).toBeLessThan(productsIndex)
+    })
+
+    it('uses custom home label', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Section', path: '/section' },
+          { label: 'Page' },
+        ],
+        showHome: true,
+        homeLabel: 'Dashboard',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      expect(result).toContain('Dashboard')
+    })
+
+    it('home is always first segment when shown', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'A', path: '/a' },
+          { label: 'B', path: '/b' },
+          { label: 'C' },
+        ],
+        showHome: true,
+        homeLabel: 'Home',
+      })
+
+      const ctx = createContext('text')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Home should appear before A
+      const homeIndex = result.indexOf('Home')
+      const aIndex = result.indexOf('A')
+
+      expect(homeIndex).toBeGreaterThanOrEqual(0)
+      expect(homeIndex).toBeLessThan(aIndex)
+    })
+  })
+
+  // ============================================================================
+  // Truncation Tests
+  // ============================================================================
+
+  describe('truncation', () => {
+    it('truncates long paths with ellipsis', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Level 1', path: '/1' },
+          { label: 'Level 2', path: '/2' },
+          { label: 'Level 3', path: '/3' },
+          { label: 'Level 4', path: '/4' },
+          { label: 'Level 5', path: '/5' },
+          { label: 'Current' },
+        ],
+        maxItems: 3,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Should show ellipsis
+      expect(result).toMatch(/\u2026|\.\.\./)
+
+      // Should show first and last segments
+      expect(result).toContain('Level 1')
+      expect(result).toContain('Current')
+
+      // Middle items should be hidden
+      expect(result).not.toContain('Level 3')
+      expect(result).not.toContain('Level 4')
+    })
+
+    it('shows all segments when under maxItems', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        maxItems: 5,
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(node, ctx)
+
+      // All segments should be visible
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Current')
+
+      // No ellipsis
+      expect(result).not.toMatch(/\u2026|\.\.\./)
+    })
+
+    it('respects context width for responsive truncation', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Very Long First Segment Name', path: '/1' },
+          { label: 'Another Long Segment', path: '/2' },
+          { label: 'Final Long Current Segment' },
+        ],
+      })
+
+      const narrowCtx = createContext('unicode')
+      narrowCtx.width = 40
+
+      const result = renderBreadcrumb(node, narrowCtx)
+
+      // Result should fit within width
+      const lines = result.split('\n')
+      for (const line of lines) {
+        const stripped = line.replace(/\x1b\[[\d;]*m/g, '')
+        expect(stripped.length).toBeLessThanOrEqual(40)
+      }
+    })
+
+    it('truncates individual segment labels when too long', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'This Is An Extremely Long Breadcrumb Label That Should Be Truncated', path: '/1' },
+          { label: 'Short' },
+        ],
+      })
+
+      const ctx = createContext('unicode')
+      ctx.width = 50
+
+      const result = renderBreadcrumb(node, ctx)
+
+      // Long label should be truncated with ellipsis
+      expect(result).toMatch(/\u2026|\.\.\./)
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const sampleNode = createBreadcrumbNode({
+      segments: [
+        { label: 'Home', path: '/' },
+        { label: 'Products', path: '/products' },
+        { label: 'Electronics', path: '/products/electronics' },
+        { label: 'Phones' },
+      ],
+    })
+
+    it('text tier renders plain text', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('text')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // Should contain all labels
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Electronics')
+      expect(result).toContain('Phones')
+
+      // No ANSI codes
+      expect(result).not.toContain('\x1b[')
+    })
+
+    it('markdown tier uses markdown links', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('markdown')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // Markdown links
+      expect(result).toMatch(/\[.*\]\(.*\)/)
+    })
+
+    it('ascii tier uses simple characters', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('ascii')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // Should use ASCII separators
+      expect(result).toMatch(/[\/>\-]/)
+
+      // Should not use unicode
+      expect(result).not.toMatch(/[\u203A\u2192\u25B8]/)
+    })
+
+    it('unicode tier uses fancy arrows', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('unicode')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // Unicode arrows or chevrons
+      expect(result).toMatch(/[\u203A\u2192\u25B8\u276F]/)
+    })
+
+    it('ansi tier includes colors', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('ansi')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // ANSI color codes
+      expect(result).toContain('\x1b[')
+    })
+
+    it('interactive tier includes focus indicators', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const ctx = createContext('interactive')
+      const result = renderBreadcrumb(sampleNode, ctx)
+
+      // Should have interactive styling
+      expect(result).toContain('\x1b[')
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (INTERACTIVE Tier)
+  // ============================================================================
+
+  describe('keyboard navigation (interactive tier)', () => {
+    it('provides keyboard bindings', async () => {
+      const { getBreadcrumbKeyBindings } = await import('../../../renderers/breadcrumb')
+
+      const bindings = getBreadcrumbKeyBindings()
+
+      expect(bindings.h).toBe('focus-prev')
+      expect(bindings.l).toBe('focus-next')
+      expect(bindings.left).toBe('focus-prev')
+      expect(bindings.right).toBe('focus-next')
+      expect(bindings.enter).toBe('navigate')
+      expect(bindings.escape).toBe('blur')
+    })
+
+    it('h/l or left/right moves focus between segments', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 0,
+      })
+
+      // Move right
+      const afterL = handleBreadcrumbKey(state, 'l')
+      expect(afterL.focusedIndex).toBe(1)
+
+      const afterL2 = handleBreadcrumbKey(afterL, 'right')
+      expect(afterL2.focusedIndex).toBe(2)
+
+      // Move left
+      const afterH = handleBreadcrumbKey(afterL2, 'h')
+      expect(afterH.focusedIndex).toBe(1)
+
+      const afterLeft = handleBreadcrumbKey(afterH, 'left')
+      expect(afterLeft.focusedIndex).toBe(0)
+    })
+
+    it('enter navigates to focused segment', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const onNavigate = vi.fn()
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 1,
+        onNavigate,
+      })
+
+      handleBreadcrumbKey(state, 'enter')
+
+      expect(onNavigate).toHaveBeenCalledWith('/products')
+    })
+
+    it('enter on current segment does nothing', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const onNavigate = vi.fn()
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 1,
+        onNavigate,
+      })
+
+      handleBreadcrumbKey(state, 'enter')
+
+      expect(onNavigate).not.toHaveBeenCalled()
+    })
+
+    it('focus wraps at boundaries', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 2,
+        wrapNavigation: true,
+      })
+
+      // Move right from last should wrap to first
+      const afterL = handleBreadcrumbKey(state, 'l')
+      expect(afterL.focusedIndex).toBe(0)
+    })
+
+    it('focus stops at boundaries when wrap disabled', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 0,
+        wrapNavigation: false,
+      })
+
+      // Move left from first should stay at first
+      const afterH = handleBreadcrumbKey(state, 'h')
+      expect(afterH.focusedIndex).toBe(0)
+    })
+
+    it('escape blurs focus', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const onBlur = vi.fn()
+
+      const state = createBreadcrumbState({
+        segments: [{ label: 'Home', path: '/' }],
+        focusedIndex: 0,
+        onBlur,
+      })
+
+      handleBreadcrumbKey(state, 'escape')
+
+      expect(onBlur).toHaveBeenCalled()
+    })
+
+    it('Home key moves to first segment', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 2,
+      })
+
+      const afterHome = handleBreadcrumbKey(state, 'home')
+      expect(afterHome.focusedIndex).toBe(0)
+    })
+
+    it('End key moves to last segment', async () => {
+      const { createBreadcrumbState, handleBreadcrumbKey } = await import('../../../renderers/breadcrumb')
+
+      const state = createBreadcrumbState({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current' },
+        ],
+        focusedIndex: 0,
+      })
+
+      const afterEnd = handleBreadcrumbKey(state, 'end')
+      expect(afterEnd.focusedIndex).toBe(2)
+    })
+  })
+
+  // ============================================================================
+  // Accessibility Tests
+  // ============================================================================
+
+  describe('accessibility', () => {
+    it('renders with aria-label attribute data', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+      })
+
+      const ctx = createContext('interactive')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Interactive tier should include accessibility info
+      // This could be in comments or structured data
+      expect(result).toBeDefined()
+    })
+
+    it('current segment is marked appropriately', async () => {
+      const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+      const node = createBreadcrumbNode({
+        segments: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Current Page' },
+        ],
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderBreadcrumb(node, ctx)
+
+      // Current should be distinguishable (different styling)
+      expect(result).toContain('Current Page')
+    })
+  })
+
+  // ============================================================================
+  // All Tiers Rendering Tests
+  // ============================================================================
+
+  describe('renders across all tiers', () => {
+    const sampleNode = createBreadcrumbNode({
+      segments: [
+        { label: 'Root', path: '/' },
+        { label: 'Branch', path: '/branch' },
+        { label: 'Leaf' },
+      ],
+    })
+
+    RENDER_TIERS.forEach((tier) => {
+      it(`renders on ${tier} tier`, async () => {
+        const { renderBreadcrumb } = await import('../../../renderers/breadcrumb')
+
+        const ctx = createContext(tier)
+        const result = renderBreadcrumb(sampleNode, ctx)
+
+        // Should produce output
+        expect(result.length).toBeGreaterThan(0)
+
+        // Should contain all segment labels
+        expect(result).toContain('Root')
+        expect(result).toContain('Branch')
+        expect(result).toContain('Leaf')
+      })
+    })
+  })
+})