@mdxui/terminal 2.0.0

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

@@ -0,0 +1,555 @@
+/**
+ * @mdxui/terminal Field Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Field component
+ * that renders individual input fields with labels, values, errors, and type-specific display.
+ *
+ * Field component responsibilities:
+ * - Render label with proper formatting
+ * - Display current value or placeholder
+ * - Show validation errors
+ * - Handle different input types (text, password, email, etc.)
+ * - Indicate field state (focused, disabled, required)
+ *
+ * Rendering across tiers:
+ * - TEXT: Plain "Label: value" format
+ * - MARKDOWN: **Label**: `value` format
+ * - ASCII: ASCII box around focused field
+ * - UNICODE: Unicode underline or box for input
+ * - ANSI: Colors for states (error red, focus highlight)
+ * - INTERACTIVE: Cursor display, real-time typing
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/input/field.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 createFieldNode(props: Record<string, unknown>): UINode {
+  return createNode('field', props)
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('Field Component', () => {
+  describe('function signature', () => {
+    it('exports renderField function', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      expect(typeof renderField).toBe('function')
+    })
+
+    it('accepts UINode and RenderContext and returns string', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({ name: 'test', label: 'Test' })
+      const ctx = createContext('text')
+      const result = renderField(node, ctx)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Label Rendering Tests
+  // ============================================================================
+
+  describe('label rendering', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders field label', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({ name: 'username', label: 'Username' })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Username')
+        })
+
+        it('renders required indicator', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({ name: 'email', label: 'Email', required: true })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Email')
+          expect(result).toMatch(/\*|required/i)
+        })
+
+        it('renders label with colon separator', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({ name: 'name', label: 'Full Name', value: 'John' })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Full Name')
+          expect(result).toContain('John')
+        })
+
+        it('handles empty label', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({ name: 'hidden', value: 'value' })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('value')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Value Display Tests
+  // ============================================================================
+
+  describe('value display', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders field value', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'username',
+            label: 'Username',
+            value: 'john_doe',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('john_doe')
+        })
+
+        it('renders placeholder when no value', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'email',
+            label: 'Email',
+            placeholder: 'Enter your email',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Enter your email')
+        })
+
+        it('renders numeric value', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'age',
+            label: 'Age',
+            value: 25,
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('25')
+        })
+      })
+    })
+
+    describe('[ansi] tier value styling', () => {
+      it('renders placeholder in muted color', async () => {
+        const { renderField } = await import('../../../renderers/components/field')
+        const node = createFieldNode({
+          name: 'email',
+          label: 'Email',
+          placeholder: 'Enter email',
+        })
+        const ctx = createContext('ansi')
+        const result = renderField(node, ctx)
+
+        expect(result).toContain('\x1b[90m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Error Display Tests
+  // ============================================================================
+
+  describe('error display', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders error message', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'email',
+            label: 'Email',
+            value: 'invalid',
+            error: 'Please enter a valid email address',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Please enter a valid email address')
+        })
+
+        it('renders error below field value', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'email',
+            label: 'Email',
+            value: 'invalid',
+            error: 'Invalid email',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          const valuePos = result.indexOf('invalid')
+          const errorPos = result.indexOf('Invalid email')
+
+          expect(errorPos).toBeGreaterThan(valuePos)
+        })
+      })
+    })
+
+    describe('[ansi] tier error styling', () => {
+      it('renders error in red', async () => {
+        const { renderField } = await import('../../../renderers/components/field')
+        const node = createFieldNode({
+          name: 'email',
+          label: 'Email',
+          error: 'Invalid',
+        })
+        const ctx = createContext('ansi')
+        const result = renderField(node, ctx)
+
+        expect(result).toContain('\x1b[31m')
+      })
+
+      it('renders valid field in green', async () => {
+        const { renderField } = await import('../../../renderers/components/field')
+        const node = createFieldNode({
+          name: 'email',
+          label: 'Email',
+          valid: true,
+        })
+        const ctx = createContext('ansi')
+        const result = renderField(node, ctx)
+
+        expect(result).toContain('\x1b[32m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Type-Specific Rendering Tests
+  // ============================================================================
+
+  describe('type-specific rendering', () => {
+    describe('password field', () => {
+      RENDER_TIERS.forEach((tier) => {
+        it(`[${tier}] masks password value`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'password',
+            label: 'Password',
+            type: 'password',
+            value: 'secret123',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Password')
+          expect(result).not.toContain('secret123')
+          expect(result).toMatch(/[*•●]+/)
+        })
+      })
+    })
+
+    describe('checkbox field', () => {
+      RENDER_TIERS.forEach((tier) => {
+        it(`[${tier}] renders checked checkbox`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'agree',
+            label: 'I agree to terms',
+            type: 'checkbox',
+            value: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('I agree to terms')
+          expect(result).toMatch(/[✓✔☑x\[x\]]/i)
+        })
+
+        it(`[${tier}] renders unchecked checkbox`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'newsletter',
+            label: 'Subscribe to newsletter',
+            type: 'checkbox',
+            value: false,
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Subscribe to newsletter')
+          expect(result).toMatch(/[☐□\[\s\]]/i)
+        })
+      })
+    })
+
+    describe('textarea field', () => {
+      RENDER_TIERS.forEach((tier) => {
+        it(`[${tier}] renders textarea with multiple lines`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'description',
+            label: 'Description',
+            type: 'textarea',
+            value: 'Line 1\nLine 2\nLine 3',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Line 1')
+          expect(result).toContain('Line 2')
+          expect(result).toContain('Line 3')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Field State Tests
+  // ============================================================================
+
+  describe('field states', () => {
+    describe('focused state', () => {
+      RENDER_TIERS.forEach((tier) => {
+        it(`[${tier}] renders focused field differently`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'email',
+            label: 'Email',
+            focused: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Email')
+        })
+      })
+
+      describe('[ansi] tier focus styling', () => {
+        it('renders focused field with highlight color', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'email',
+            label: 'Email',
+            focused: true,
+          })
+          const ctx = createContext('ansi')
+          const result = renderField(node, ctx)
+
+          expect(result).toMatch(/\x1b\[(34|4|7)m/)
+        })
+      })
+    })
+
+    describe('disabled state', () => {
+      RENDER_TIERS.forEach((tier) => {
+        it(`[${tier}] renders disabled field`, async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'locked',
+            label: 'Locked Field',
+            disabled: true,
+            value: 'Cannot edit',
+          })
+          const ctx = createContext(tier)
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('Locked Field')
+          expect(result).toContain('Cannot edit')
+        })
+      })
+
+      describe('[ansi] tier disabled styling', () => {
+        it('renders disabled field as dimmed', async () => {
+          const { renderField } = await import('../../../renderers/components/field')
+          const node = createFieldNode({
+            name: 'disabled',
+            label: 'Disabled',
+            disabled: true,
+          })
+          const ctx = createContext('ansi')
+          const result = renderField(node, ctx)
+
+          expect(result).toContain('\x1b[2m')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Interactive Tier Tests
+  // ============================================================================
+
+  describe('[interactive] tier', () => {
+    it('shows cursor in text field', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'text',
+        label: 'Text',
+        value: 'Hello',
+        focused: true,
+        cursorPosition: 5,
+      })
+      const ctx = createContext('interactive')
+      const result = renderField(node, ctx)
+
+      expect(result).toMatch(/\x1b\[(7|4)m|[|_▌█]/)
+    })
+
+    it('shows text selection', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'text',
+        label: 'Text',
+        value: 'Hello World',
+        focused: true,
+        selectionStart: 0,
+        selectionEnd: 5,
+      })
+      const ctx = createContext('interactive')
+      const result = renderField(node, ctx)
+
+      expect(result).toMatch(/\x1b\[7m/)
+    })
+
+    it('shows keyboard hints', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'email',
+        label: 'Email',
+        focused: true,
+      })
+      const ctx = createContext('interactive')
+      const result = renderField(node, ctx)
+
+      expect(result).toMatch(/Tab|Enter|Esc/i)
+    })
+  })
+
+  // ============================================================================
+  // Helper Text Tests
+  // ============================================================================
+
+  describe('helper text', () => {
+    RENDER_TIERS.forEach((tier) => {
+      it(`[${tier}] renders helper text below field`, async () => {
+        const { renderField } = await import('../../../renderers/components/field')
+        const node = createFieldNode({
+          name: 'password',
+          label: 'Password',
+          helperText: 'Must be at least 8 characters',
+        })
+        const ctx = createContext(tier)
+        const result = renderField(node, ctx)
+
+        expect(result).toContain('Must be at least 8 characters')
+      })
+    })
+
+    describe('[ansi] tier helper styling', () => {
+      it('renders helper text in muted color', async () => {
+        const { renderField } = await import('../../../renderers/components/field')
+        const node = createFieldNode({
+          name: 'email',
+          label: 'Email',
+          helperText: 'We will never share your email',
+        })
+        const ctx = createContext('ansi')
+        const result = renderField(node, ctx)
+
+        expect(result).toContain('\x1b[90m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    it('handles null value', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'nullable',
+        label: 'Nullable',
+        value: null,
+      })
+      const ctx = createContext('text')
+      const result = renderField(node, ctx)
+
+      expect(result).toContain('Nullable')
+    })
+
+    it('handles unicode characters', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'unicode',
+        label: '名前',
+        value: 'こんにちは',
+      })
+      const ctx = createContext('text')
+      const result = renderField(node, ctx)
+
+      expect(result).toContain('名前')
+      expect(result).toContain('こんにちは')
+    })
+
+    it('handles emoji in value', async () => {
+      const { renderField } = await import('../../../renderers/components/field')
+      const node = createFieldNode({
+        name: 'emoji',
+        label: 'Status',
+        value: 'Working hard 💪🔥',
+      })
+      const ctx = createContext('text')
+      const result = renderField(node, ctx)
+
+      expect(result).toContain('Working hard')
+    })
+  })
+})