@mdxui/terminal 2.0.0

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

@@ -0,0 +1,541 @@
+/**
+ * @mdxui/terminal Metrics Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Metrics data component
+ * across all 6 render tiers (TEXT, MARKDOWN, ASCII, UNICODE, ANSI, INTERACTIVE).
+ *
+ * Metrics Component Features:
+ * - Value display (number, currency, percentage)
+ * - Label/title
+ * - Trend indicator (up, down, neutral)
+ * - Sparkline mini chart
+ * - Comparison values (previous, target)
+ * - Status variants (success, warning, error, info)
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/data/metrics.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+
+import type { UINode, RenderContext, ThemeTokens, RenderTier } from '../../../core/types'
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+const ALL_TIERS: RenderTier[] = ['text', 'markdown', 'ascii', 'unicode', 'ansi', 'interactive']
+
+function createTestTheme(): ThemeTokens {
+  return {
+    primary: '\x1b[34m',
+    secondary: '\x1b[36m',
+    muted: '\x1b[90m',
+    foreground: '\x1b[37m',
+    background: '\x1b[40m',
+    border: '\x1b[90m',
+    success: '\x1b[32m',
+    warning: '\x1b[33m',
+    error: '\x1b[31m',
+    info: '\x1b[34m',
+  }
+}
+
+function createTestContext(tier: RenderTier, overrides?: Partial<RenderContext>): RenderContext {
+  return {
+    tier,
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: createTestTheme(),
+    interactive: tier === 'interactive',
+    ...overrides,
+  }
+}
+
+function createMetricsNode(props: Record<string, unknown>): UINode {
+  return {
+    type: 'metrics',
+    props,
+  }
+}
+
+function createSingleMetricNode(props: Record<string, unknown>): UINode {
+  return {
+    type: 'metric',
+    props,
+  }
+}
+
+// ============================================================================
+// Renderer import helper - uses dynamic import for all tiers
+// ============================================================================
+
+async function renderForTier(node: UINode, tier: RenderTier, ctx?: RenderContext): Promise<string> {
+  const context = ctx ?? createTestContext(tier)
+  switch (tier) {
+    case 'text': {
+      const { renderText } = await import('../../../renderers/text')
+      return renderText(node)
+    }
+    case 'markdown': {
+      const { renderMarkdown } = await import('../../../renderers/markdown')
+      return renderMarkdown(node)
+    }
+    case 'ascii': {
+      const { renderASCII } = await import('../../../renderers/ascii')
+      return renderASCII(node, context)
+    }
+    case 'unicode': {
+      const { renderUnicode } = await import('../../../renderers/unicode')
+      return renderUnicode(node, context)
+    }
+    case 'ansi': {
+      const { renderANSI } = await import('../../../renderers/ansi')
+      return renderANSI(node)
+    }
+    case 'interactive': {
+      const { renderInteractive } = await import('../../../renderers/interactive')
+      return renderInteractive(node, context)
+    }
+  }
+}
+
+// ============================================================================
+// Basic Metrics Rendering Tests
+// ============================================================================
+
+describe('Metrics Component', () => {
+  describe('basic rendering across all tiers', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders single metric with label and value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Total Users', value: 1234 }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Total Users')
+          expect(result).toContain('1234')
+        })
+
+        it('renders multiple metrics', async () => {
+          const node = createMetricsNode({
+            metrics: [
+              { label: 'Revenue', value: '$50,000' },
+              { label: 'Orders', value: 156 },
+              { label: 'Customers', value: 89 },
+            ],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Revenue')
+          expect(result).toContain('$50,000')
+          expect(result).toContain('Orders')
+          expect(result).toContain('156')
+        })
+
+        it('handles empty metrics array', async () => {
+          const node = createMetricsNode({ metrics: [] })
+          const result = await renderForTier(node, tier)
+
+          expect(typeof result).toBe('string')
+        })
+
+        it('handles single metric component', async () => {
+          const node = createSingleMetricNode({
+            label: 'Active Sessions',
+            value: 42,
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Active Sessions')
+          expect(result).toContain('42')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Value Formatting Tests
+  // ============================================================================
+
+  describe('value formatting', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders number value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Count', value: 9876 }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('9876')
+        })
+
+        it('renders percentage value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Completion', value: 75, format: 'percentage' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Completion')
+          expect(result).toContain('75')
+          expect(result).toContain('%')
+        })
+
+        it('renders with unit suffix', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Response Time', value: 250, unit: 'ms' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('250')
+          expect(result).toContain('ms')
+        })
+
+        it('renders string value as-is', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Status', value: 'Healthy' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Healthy')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Trend Indicator Tests
+  // ============================================================================
+
+  describe('trend indicators', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders upward trend', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Sales', value: 500, trend: 'up' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Sales')
+          expect(result).toContain('500')
+        })
+
+        it('renders downward trend', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Errors', value: 12, trend: 'down' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Errors')
+          expect(result).toContain('12')
+        })
+
+        it('renders neutral trend', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Steady', value: 100, trend: 'neutral' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Steady')
+          expect(result).toContain('100')
+        })
+
+        it('renders trend with percentage change', async () => {
+          const node = createMetricsNode({
+            metrics: [{
+              label: 'Revenue',
+              value: 1000,
+              trend: 'up',
+              trendValue: 12.5,
+            }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Revenue')
+          expect(result).toContain('1000')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Sparkline Tests
+  // ============================================================================
+
+  describe('sparkline mini chart', () => {
+    const sparklineData = [10, 15, 12, 18, 14, 20, 16, 22, 19, 25]
+
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders metric with sparkline', async () => {
+          const node = createMetricsNode({
+            metrics: [{
+              label: 'Traffic',
+              value: 25,
+              sparkline: sparklineData,
+            }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Traffic')
+          expect(result).toContain('25')
+        })
+
+        it('handles empty sparkline data', async () => {
+          const node = createMetricsNode({
+            metrics: [{
+              label: 'Empty',
+              value: 0,
+              sparkline: [],
+            }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Empty')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Status Variants Tests
+  // ============================================================================
+
+  describe('status variants', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('renders success variant', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Uptime', value: '99.9%', variant: 'success' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Uptime')
+          expect(result).toContain('99.9%')
+        })
+
+        it('renders warning variant', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'CPU Usage', value: '85%', variant: 'warning' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('CPU Usage')
+          expect(result).toContain('85%')
+        })
+
+        it('renders error variant', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Failed Jobs', value: 15, variant: 'error' }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Failed Jobs')
+          expect(result).toContain('15')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Tier-Specific Rendering Tests
+  // ============================================================================
+
+  describe('tier-specific rendering', () => {
+    describe('TEXT tier', () => {
+      it('renders as Label: value format', async () => {
+        const node = createMetricsNode({
+          metrics: [{ label: 'Users', value: 1234 }],
+        })
+        const result = await renderForTier(node, 'text')
+
+        expect(result).toContain('Users')
+        expect(result).toContain('1234')
+      })
+    })
+
+    describe('MARKDOWN tier', () => {
+      it('renders with markdown formatting', async () => {
+        const node = createMetricsNode({
+          metrics: [{ label: 'Revenue', value: 5000 }],
+        })
+        const result = await renderForTier(node, 'markdown')
+
+        expect(result).toContain('Revenue')
+        expect(result).toContain('5000')
+      })
+    })
+
+    describe('ASCII tier', () => {
+      it('renders sparkline with ASCII characters', async () => {
+        const node = createMetricsNode({
+          metrics: [{
+            label: 'Chart',
+            value: 100,
+            sparkline: [20, 40, 60, 80, 100],
+          }],
+        })
+        const result = await renderForTier(node, 'ascii')
+
+        expect(result).toContain('Chart')
+        expect(result).toContain('100')
+      })
+    })
+
+    describe('UNICODE tier', () => {
+      it('renders sparkline with unicode block characters', async () => {
+        const node = createMetricsNode({
+          metrics: [{
+            label: 'Spark',
+            value: 75,
+            sparkline: [10, 20, 30, 40, 50, 60, 70, 75],
+          }],
+        })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toContain('Spark')
+        expect(result).toMatch(/[▁▂▃▄▅▆▇█]/)
+      })
+
+      it('renders trend arrows with unicode', async () => {
+        const node = createMetricsNode({
+          metrics: [
+            { label: 'Up', value: 10, trend: 'up' },
+            { label: 'Down', value: 5, trend: 'down' },
+          ],
+        })
+        const result = await renderForTier(node, 'unicode')
+
+        expect(result).toContain('Up')
+        expect(result).toContain('Down')
+        expect(result).toMatch(/[↑↓→←▲▼]/)
+      })
+    })
+
+    describe('ANSI tier', () => {
+      it('renders with ANSI color codes', async () => {
+        const node = createMetricsNode({
+          metrics: [{ label: 'Colored', value: 100 }],
+        })
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toMatch(/\x1b\[/)
+      })
+
+      it('applies variant colors', async () => {
+        const node = createMetricsNode({
+          metrics: [
+            { label: 'Success', value: 100, variant: 'success' },
+            { label: 'Error', value: 0, variant: 'error' },
+          ],
+        })
+        const result = await renderForTier(node, 'ansi')
+
+        expect(result).toContain('Success')
+        expect(result).toContain('Error')
+        expect(result).toMatch(/\x1b\[\d+m/)
+      })
+    })
+
+    describe('INTERACTIVE tier', () => {
+      it('renders focusable metrics', async () => {
+        const node = createMetricsNode({
+          metrics: [
+            { label: 'Metric A', value: 100 },
+            { label: 'Metric B', value: 200 },
+          ],
+          focusedIndex: 0,
+        })
+        const result = await renderForTier(node, 'interactive')
+
+        expect(result).toContain('Metric A')
+        expect(result).toContain('Metric B')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    ALL_TIERS.forEach((tier) => {
+      describe(`${tier.toUpperCase()} tier`, () => {
+        it('handles zero value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Zero', value: 0 }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Zero')
+          expect(result).toContain('0')
+        })
+
+        it('handles negative value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Negative', value: -500 }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Negative')
+          expect(result).toContain('-500')
+        })
+
+        it('handles very large numbers', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Big', value: 999999999999 }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Big')
+        })
+
+        it('handles null value', async () => {
+          const node = createMetricsNode({
+            metrics: [{ label: 'Null', value: null }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Null')
+        })
+
+        it('handles very long label', async () => {
+          const longLabel = 'A'.repeat(100)
+          const node = createMetricsNode({
+            metrics: [{ label: longLabel, value: 42 }],
+          })
+          const ctx = createTestContext(tier, { width: 40 })
+          const result = await renderForTier(node, tier, ctx)
+
+          expect(result).toContain('A')
+        })
+
+        it('handles many metrics', async () => {
+          const manyMetrics = Array.from({ length: 20 }, (_, i) => ({
+            label: `Metric ${i}`,
+            value: i * 100,
+          }))
+          const node = createMetricsNode({ metrics: manyMetrics })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Metric 0')
+          expect(result).toContain('Metric 19')
+        })
+
+        it('handles sparkline with all same values', async () => {
+          const node = createMetricsNode({
+            metrics: [{
+              label: 'Flat',
+              value: 50,
+              sparkline: [50, 50, 50, 50, 50],
+            }],
+          })
+          const result = await renderForTier(node, tier)
+
+          expect(result).toContain('Flat')
+        })
+      })
+    })
+  })
+})