@mdxui/terminal 2.0.0

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

@@ -0,0 +1,995 @@
+/**
+ * @mdxui/terminal Tabs Navigation Component Tests
+ *
+ * TDD RED Phase: Tests for the Tabs navigation component.
+ * All tests should FAIL initially because the Tabs renderers don't exist yet.
+ *
+ * The Tabs component provides tabbed navigation with:
+ * - Tab list (horizontal row of tabs)
+ * - Active tab indication
+ * - Content switching based on active tab
+ * - Keyboard navigation (arrow keys, home/end)
+ * - Disabled tab support
+ *
+ * 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',
+  }
+}
+
+// ============================================================================
+// Tab Types
+// ============================================================================
+
+interface Tab {
+  id: string
+  label: string
+  icon?: string
+  badge?: string | number
+  disabled?: boolean
+  content?: string | UINode
+}
+
+interface TabsProps {
+  tabs: Tab[]
+  activeId: string
+  variant?: 'default' | 'pills' | 'underline'
+  orientation?: 'horizontal' | 'vertical'
+  onTabChange?: (tabId: string) => void
+}
+
+function createTabsNode(props: TabsProps): UINode {
+  return {
+    type: 'tabs',
+    props: {
+      activeId: props.activeId,
+      variant: props.variant || 'default',
+      orientation: props.orientation || 'horizontal',
+    },
+    children: [
+      {
+        type: 'tab-list',
+        props: {},
+        children: props.tabs.map((tab) => ({
+          type: 'tab',
+          props: {
+            id: tab.id,
+            label: tab.label,
+            icon: tab.icon,
+            badge: tab.badge,
+            disabled: tab.disabled,
+            active: props.activeId === tab.id,
+          },
+        })),
+      },
+      ...props.tabs.map((tab) => ({
+        type: 'tab-panel',
+        props: {
+          tabId: tab.id,
+          active: props.activeId === tab.id,
+        },
+        children: typeof tab.content === 'string'
+          ? [{ type: 'text', props: { content: tab.content } }]
+          : tab.content ? [tab.content] : [],
+      })),
+    ],
+  }
+}
+
+// ============================================================================
+// Test Suite: Basic Tab Rendering
+// ============================================================================
+
+describe('Tabs Component', () => {
+  describe('basic rendering', () => {
+    it('renders tabs with labels', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'First Tab' },
+          { id: 'tab2', label: 'Second Tab' },
+          { id: 'tab3', label: 'Third Tab' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('First Tab')
+      expect(result).toContain('Second Tab')
+      expect(result).toContain('Third Tab')
+    })
+
+    it('renders single tab', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [{ id: 'only', label: 'Only Tab' }],
+        activeId: 'only',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('Only Tab')
+    })
+
+    it('returns empty string for no tabs', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [],
+        activeId: '',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toBe('')
+    })
+
+    it('renders tabs with icons', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'home', label: 'Home', icon: '\u2302' },
+          { id: 'settings', label: 'Settings', icon: '\u2699' },
+        ],
+        activeId: 'home',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('\u2302')
+      expect(result).toContain('\u2699')
+    })
+
+    it('renders tabs with badges', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'inbox', label: 'Inbox', badge: 5 },
+          { id: 'drafts', label: 'Drafts', badge: 'NEW' },
+        ],
+        activeId: 'inbox',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('5')
+      expect(result).toContain('NEW')
+    })
+  })
+
+  // ============================================================================
+  // Active Tab Tests
+  // ============================================================================
+
+  describe('active tab indication', () => {
+    it('highlights active tab', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab2',
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderTabs(node, ctx)
+
+      // Active tab should have special styling
+      expect(result).toContain('Tab Two')
+      expect(result).toContain('\x1b[')
+
+      // Active tab should be styled differently (bold, inverse, or colored)
+      const tabTwoIndex = result.indexOf('Tab Two')
+      const beforeTabTwo = result.slice(Math.max(0, tabTwoIndex - 20), tabTwoIndex)
+      expect(beforeTabTwo).toMatch(/\x1b\[.*m/)
+    })
+
+    it('text tier shows active with brackets or marker', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab2',
+      })
+
+      const ctx = createContext('text')
+      const result = renderTabs(node, ctx)
+
+      // Active tab should have visual indicator
+      expect(result).toMatch(/\[Tab Two\]|\*Tab Two\*|>Tab Two|Tab Two</)
+    })
+
+    it('only one tab can be active', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'a', label: 'Tab A' },
+          { id: 'b', label: 'Tab B' },
+          { id: 'c', label: 'Tab C' },
+        ],
+        activeId: 'b',
+      })
+
+      const ctx = createContext('text')
+      const result = renderTabs(node, ctx)
+
+      // Count active indicators (should be exactly 1)
+      const activeCount = (result.match(/\[Tab .\]|\*Tab .\*/g) || []).length
+      expect(activeCount).toBe(1)
+    })
+
+    it('underline variant shows underline on active tab', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        variant: 'underline',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Underline variant should show underline character under active tab
+      expect(result).toMatch(/\u2500{3,}|\u2581{3,}|_{3,}|-{3,}/)
+    })
+
+    it('pills variant shows pill styling on active tab', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        variant: 'pills',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Pills variant uses rounded border or background
+      expect(result).toMatch(/[\u256D\u256E\u256F\u2570\u2500\u2502]|\(\s*Tab One\s*\)/)
+    })
+  })
+
+  // ============================================================================
+  // Tab Panel / Content Switching Tests
+  // ============================================================================
+
+  describe('content switching', () => {
+    it('shows content for active tab', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One', content: 'Content for tab one' },
+          { id: 'tab2', label: 'Tab Two', content: 'Content for tab two' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('Content for tab one')
+    })
+
+    it('hides content for inactive tabs', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One', content: 'Content for tab one' },
+          { id: 'tab2', label: 'Tab Two', content: 'Content for tab two' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('Content for tab one')
+      expect(result).not.toContain('Content for tab two')
+    })
+
+    it('switches content when active tab changes', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const tabs = [
+        { id: 'tab1', label: 'Tab One', content: 'First content' },
+        { id: 'tab2', label: 'Tab Two', content: 'Second content' },
+      ]
+
+      const ctx = createContext('unicode')
+
+      // First render with tab1 active
+      const node1 = createTabsNode({ tabs, activeId: 'tab1' })
+      const result1 = renderTabs(node1, ctx)
+      expect(result1).toContain('First content')
+      expect(result1).not.toContain('Second content')
+
+      // Second render with tab2 active
+      const node2 = createTabsNode({ tabs, activeId: 'tab2' })
+      const result2 = renderTabs(node2, ctx)
+      expect(result2).not.toContain('First content')
+      expect(result2).toContain('Second content')
+    })
+
+    it('renders UINode content', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const complexContent: UINode = {
+        type: 'box',
+        props: { border: 'single' },
+        children: [{ type: 'text', props: { content: 'Nested content' } }],
+      }
+
+      const node = createTabsNode({
+        tabs: [{ id: 'tab1', label: 'Tab One', content: complexContent }],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('Nested content')
+    })
+
+    it('handles tabs with no content', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Should render tabs without crashing
+      expect(result).toContain('Tab One')
+      expect(result).toContain('Tab Two')
+    })
+  })
+
+  // ============================================================================
+  // Disabled Tab Tests
+  // ============================================================================
+
+  describe('disabled tabs', () => {
+    it('renders disabled tabs with muted styling', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'enabled', label: 'Enabled' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+        ],
+        activeId: 'enabled',
+      })
+
+      const ctx = createContext('ansi')
+      const result = renderTabs(node, ctx)
+
+      // Disabled should use muted color
+      expect(result).toContain('Disabled')
+      expect(result).toContain('\x1b[90m') // Muted/gray color
+    })
+
+    it('text tier shows disabled indicator', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'enabled', label: 'Enabled' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+        ],
+        activeId: 'enabled',
+      })
+
+      const ctx = createContext('text')
+      const result = renderTabs(node, ctx)
+
+      // Disabled should have visual indicator
+      expect(result).toMatch(/\(disabled\)|\[disabled\]|~Disabled~|Disabled\s*\*/)
+    })
+
+    it('disabled tab cannot be made active via keyboard', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+          { id: 'tab3', label: 'Tab 3' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+      })
+
+      // Move right should skip disabled tab
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab3')
+    })
+  })
+
+  // ============================================================================
+  // Tab Orientation Tests
+  // ============================================================================
+
+  describe('orientation', () => {
+    it('horizontal tabs render in a row', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        orientation: 'horizontal',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Tabs should be on same line or separated horizontally
+      const lines = result.split('\n')
+      const tabLine = lines.find((l) => l.includes('Tab One') && l.includes('Tab Two'))
+      expect(tabLine).toBeDefined()
+    })
+
+    it('vertical tabs render in a column', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        orientation: 'vertical',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Tabs should be on different lines
+      const lines = result.split('\n')
+      const tabOneLine = lines.findIndex((l) => l.includes('Tab One'))
+      const tabTwoLine = lines.findIndex((l) => l.includes('Tab Two'))
+
+      expect(tabOneLine).toBeGreaterThanOrEqual(0)
+      expect(tabTwoLine).toBeGreaterThanOrEqual(0)
+      expect(tabOneLine).not.toBe(tabTwoLine)
+    })
+
+    it('vertical orientation uses j/k for navigation', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+        orientation: 'vertical',
+      })
+
+      // j should move down
+      const afterJ = handleTabsKey(state, 'j')
+      expect(afterJ.focusedId).toBe('tab2')
+
+      // k should move up
+      const afterK = handleTabsKey(afterJ, 'k')
+      expect(afterK.focusedId).toBe('tab1')
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    const sampleNode = createTabsNode({
+      tabs: [
+        { id: 'tab1', label: 'First', content: 'First content' },
+        { id: 'tab2', label: 'Second', content: 'Second content' },
+      ],
+      activeId: 'tab1',
+    })
+
+    it('text tier renders plain text', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('text')
+      const result = renderTabs(sampleNode, ctx)
+
+      expect(result).toContain('First')
+      expect(result).toContain('Second')
+      expect(result).toContain('First content')
+
+      // No ANSI codes
+      expect(result).not.toContain('\x1b[')
+    })
+
+    it('markdown tier uses formatting', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('markdown')
+      const result = renderTabs(sampleNode, ctx)
+
+      // Should use markdown formatting
+      expect(result).toMatch(/[#*|\-]/)
+    })
+
+    it('ascii tier uses ASCII characters', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('ascii')
+      const result = renderTabs(sampleNode, ctx)
+
+      // ASCII art for tab borders
+      expect(result).toMatch(/[|+\-=]/)
+    })
+
+    it('unicode tier uses box drawing', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(sampleNode, ctx)
+
+      // Unicode box drawing
+      expect(result).toMatch(/[\u2500-\u257F]/)
+    })
+
+    it('ansi tier includes colors', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('ansi')
+      const result = renderTabs(sampleNode, ctx)
+
+      expect(result).toContain('\x1b[')
+    })
+
+    it('interactive tier includes focus indicators', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const ctx = createContext('interactive')
+      const result = renderTabs(sampleNode, ctx)
+
+      expect(result).toContain('\x1b[')
+    })
+  })
+
+  // ============================================================================
+  // Keyboard Navigation Tests (INTERACTIVE Tier)
+  // ============================================================================
+
+  describe('keyboard navigation (interactive tier)', () => {
+    it('provides keyboard bindings', async () => {
+      const { getTabsKeyBindings } = await import('../../../renderers/tabs')
+
+      const bindings = getTabsKeyBindings()
+
+      expect(bindings.left).toBe('focus-prev')
+      expect(bindings.right).toBe('focus-next')
+      expect(bindings.h).toBe('focus-prev')
+      expect(bindings.l).toBe('focus-next')
+      expect(bindings.enter).toBe('activate')
+      expect(bindings.space).toBe('activate')
+      expect(bindings.home).toBe('focus-first')
+      expect(bindings.end).toBe('focus-last')
+    })
+
+    it('left/right or h/l moves focus between tabs', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+          { id: 'tab3', label: 'Tab 3' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+      })
+
+      // Move right
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab2')
+
+      const afterL = handleTabsKey(afterRight, 'l')
+      expect(afterL.focusedId).toBe('tab3')
+
+      // Move left
+      const afterLeft = handleTabsKey(afterL, 'left')
+      expect(afterLeft.focusedId).toBe('tab2')
+
+      const afterH = handleTabsKey(afterLeft, 'h')
+      expect(afterH.focusedId).toBe('tab1')
+    })
+
+    it('enter or space activates focused tab', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const onTabChange = vi.fn()
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab2',
+        onTabChange,
+      })
+
+      handleTabsKey(state, 'enter')
+      expect(onTabChange).toHaveBeenCalledWith('tab2')
+
+      onTabChange.mockClear()
+
+      handleTabsKey(state, 'space')
+      expect(onTabChange).toHaveBeenCalledWith('tab2')
+    })
+
+    it('home moves focus to first tab', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+          { id: 'tab3', label: 'Tab 3' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab3',
+      })
+
+      const afterHome = handleTabsKey(state, 'home')
+      expect(afterHome.focusedId).toBe('tab1')
+    })
+
+    it('end moves focus to last tab', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+          { id: 'tab3', label: 'Tab 3' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+      })
+
+      const afterEnd = handleTabsKey(state, 'end')
+      expect(afterEnd.focusedId).toBe('tab3')
+    })
+
+    it('skips disabled tabs during navigation', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'disabled', label: 'Disabled', disabled: true },
+          { id: 'tab3', label: 'Tab 3' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+      })
+
+      // Move right should skip disabled
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab3')
+    })
+
+    it('wraps focus at boundaries when wrap enabled', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab2',
+        wrapNavigation: true,
+      })
+
+      // Move right from last should wrap to first
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab1')
+    })
+
+    it('stops at boundaries when wrap disabled', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab2',
+        wrapNavigation: false,
+      })
+
+      // Move right from last should stay at last
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab2')
+    })
+
+    it('automatic activation mode activates on focus', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const onTabChange = vi.fn()
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+        onTabChange,
+        activationMode: 'automatic',
+      })
+
+      // Moving focus should also activate
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.activeId).toBe('tab2')
+      expect(onTabChange).toHaveBeenCalledWith('tab2')
+    })
+
+    it('manual activation mode only activates on enter/space', async () => {
+      const { createTabsState, handleTabsKey } = await import('../../../renderers/tabs')
+
+      const onTabChange = vi.fn()
+
+      const state = createTabsState({
+        tabs: [
+          { id: 'tab1', label: 'Tab 1' },
+          { id: 'tab2', label: 'Tab 2' },
+        ],
+        activeId: 'tab1',
+        focusedId: 'tab1',
+        onTabChange,
+        activationMode: 'manual',
+      })
+
+      // Moving focus should NOT activate
+      const afterRight = handleTabsKey(state, 'right')
+      expect(afterRight.focusedId).toBe('tab2')
+      expect(afterRight.activeId).toBe('tab1')
+      expect(onTabChange).not.toHaveBeenCalled()
+
+      // Enter should activate
+      handleTabsKey(afterRight, 'enter')
+      expect(onTabChange).toHaveBeenCalledWith('tab2')
+    })
+  })
+
+  // ============================================================================
+  // Tab Styling Variants Tests
+  // ============================================================================
+
+  describe('styling variants', () => {
+    it('default variant renders standard tabs', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [{ id: 'tab1', label: 'Tab' }],
+        activeId: 'tab1',
+        variant: 'default',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      expect(result).toContain('Tab')
+    })
+
+    it('pills variant renders rounded pill style', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        variant: 'pills',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Pills have rounded corners or background indicators
+      expect(result).toContain('Tab One')
+      expect(result).toContain('Tab Two')
+    })
+
+    it('underline variant shows underline indicator', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Tab One' },
+          { id: 'tab2', label: 'Tab Two' },
+        ],
+        activeId: 'tab1',
+        variant: 'underline',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Underline characters below active tab
+      expect(result).toMatch(/\u2500{2,}|\u2581{2,}|_{2,}|-{2,}/)
+    })
+  })
+
+  // ============================================================================
+  // All Tiers Rendering Tests
+  // ============================================================================
+
+  describe('renders across all tiers', () => {
+    const sampleNode = createTabsNode({
+      tabs: [
+        { id: 'tab1', label: 'Alpha', content: 'Alpha content' },
+        { id: 'tab2', label: 'Beta', content: 'Beta content' },
+      ],
+      activeId: 'tab1',
+    })
+
+    RENDER_TIERS.forEach((tier) => {
+      it(`renders on ${tier} tier`, async () => {
+        const { renderTabs } = await import('../../../renderers/tabs')
+
+        const ctx = createContext(tier)
+        const result = renderTabs(sampleNode, ctx)
+
+        // Should produce output
+        expect(result.length).toBeGreaterThan(0)
+
+        // Should contain tab labels
+        expect(result).toContain('Alpha')
+        expect(result).toContain('Beta')
+
+        // Should show active content
+        expect(result).toContain('Alpha content')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Tab Width and Layout Tests
+  // ============================================================================
+
+  describe('width and layout', () => {
+    it('tabs stretch to fit container width', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'Short' },
+          { id: 'tab2', label: 'Medium Tab' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      ctx.width = 60
+
+      const result = renderTabs(node, ctx)
+      const lines = result.split('\n')
+
+      // Tab row should use available width
+      const tabLine = lines.find((l) => l.includes('Short'))
+      if (tabLine) {
+        const stripped = tabLine.replace(/\x1b\[[\d;]*m/g, '')
+        expect(stripped.length).toBeGreaterThan(20)
+      }
+    })
+
+    it('truncates long tab labels', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'This is a very long tab label that should be truncated' },
+          { id: 'tab2', label: 'Another Long Tab Label' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      ctx.width = 40
+
+      const result = renderTabs(node, ctx)
+
+      // Should contain ellipsis for truncated labels
+      expect(result).toMatch(/\u2026|\.\.\./)
+    })
+
+    it('respects minimum tab width', async () => {
+      const { renderTabs } = await import('../../../renderers/tabs')
+
+      const node = createTabsNode({
+        tabs: [
+          { id: 'tab1', label: 'A' },
+          { id: 'tab2', label: 'B' },
+          { id: 'tab3', label: 'C' },
+        ],
+        activeId: 'tab1',
+      })
+
+      const ctx = createContext('unicode')
+      const result = renderTabs(node, ctx)
+
+      // Each tab should have minimum padding around label
+      expect(result).toContain('A')
+      expect(result).toContain('B')
+      expect(result).toContain('C')
+    })
+  })
+})