@mdxui/terminal 2.0.0

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

@@ -0,0 +1,870 @@
+/**
+ * @mdxui/terminal Form Component Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Form component
+ * that collects fields, validates input, and handles submission.
+ *
+ * Form component responsibilities:
+ * - Collect multiple fields into a cohesive unit
+ * - Validate field values against rules
+ * - Display validation errors
+ * - Handle form submission
+ * - Support different field types (text, email, password, etc.)
+ *
+ * Rendering across tiers:
+ * - TEXT: Plain label: value format, errors as text
+ * - MARKDOWN: Labels with formatting, errors in emphasis
+ * - ASCII: ASCII box borders around form groups
+ * - UNICODE: Unicode box borders for form structure
+ * - ANSI: Colors for validation states (red errors, green valid)
+ * - INTERACTIVE: Full keyboard navigation, real-time validation
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/components/input/form.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 createFormNode(props: Record<string, unknown>, children?: UINode[]): UINode {
+  return createNode('form', props, children)
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('Form Component', () => {
+  describe('function signature', () => {
+    it('exports renderForm function', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      expect(typeof renderForm).toBe('function')
+    })
+
+    it('accepts UINode and RenderContext and returns string', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{ name: 'username', label: 'Username' }],
+      })
+      const ctx = createContext('text')
+      const result = renderForm(node, ctx)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Field Collection Tests
+  // ============================================================================
+
+  describe('field collection', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders single field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email', type: 'email' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Email')
+        })
+
+        it('renders multiple fields', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [
+              { name: 'firstName', label: 'First Name' },
+              { name: 'lastName', label: 'Last Name' },
+              { name: 'email', label: 'Email' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('First Name')
+          expect(result).toContain('Last Name')
+          expect(result).toContain('Email')
+        })
+
+        it('preserves field order', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [
+              { name: 'a', label: 'Field A' },
+              { name: 'b', label: 'Field B' },
+              { name: 'c', label: 'Field C' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          const aPos = result.indexOf('Field A')
+          const bPos = result.indexOf('Field B')
+          const cPos = result.indexOf('Field C')
+
+          expect(aPos).toBeLessThan(bPos)
+          expect(bPos).toBeLessThan(cPos)
+        })
+
+        it('renders empty form gracefully', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({ fields: [] })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(typeof result).toBe('string')
+        })
+
+        it('renders form with title', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            title: 'User Registration',
+            fields: [{ name: 'username', label: 'Username' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('User Registration')
+        })
+
+        it('renders form with description', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            title: 'Sign Up',
+            description: 'Create your account to get started',
+            fields: [{ name: 'email', label: 'Email' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Create your account')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Field Types Tests
+  // ============================================================================
+
+  describe('field types', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders text field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'name', label: 'Name', type: 'text', value: 'John' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Name')
+          expect(result).toContain('John')
+        })
+
+        it('renders email field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email', type: 'email', value: 'test@example.com' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Email')
+          expect(result).toContain('test@example.com')
+        })
+
+        it('renders password field with masking', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'password', label: 'Password', type: 'password', value: 'secret123' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Password')
+          expect(result).not.toContain('secret123')
+          expect(result).toMatch(/[*•]+/)
+        })
+
+        it('renders number field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'age', label: 'Age', type: 'number', value: 25 }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Age')
+          expect(result).toContain('25')
+        })
+
+        it('renders textarea field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{
+              name: 'bio',
+              label: 'Biography',
+              type: 'textarea',
+              value: 'Hello, I am a developer.',
+            }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Biography')
+          expect(result).toContain('Hello, I am a developer')
+        })
+
+        it('renders checkbox field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'agree', label: 'I agree to terms', type: 'checkbox', value: true }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('I agree to terms')
+        })
+
+        it('renders select field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{
+              name: 'country',
+              label: 'Country',
+              type: 'select',
+              value: 'us',
+              options: [
+                { label: 'United States', value: 'us' },
+                { label: 'Canada', value: 'ca' },
+              ],
+            }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Country')
+          expect(result).toContain('United States')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Validation Tests
+  // ============================================================================
+
+  describe('validation', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('displays required field indicator', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email', required: true }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toMatch(/Email.*\*|required/i)
+        })
+
+        it('displays validation error message', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{
+              name: 'email',
+              label: 'Email',
+              value: 'invalid',
+              error: 'Please enter a valid email address',
+            }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Please enter a valid email address')
+        })
+
+        it('displays multiple field errors', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [
+              { name: 'email', label: 'Email', error: 'Invalid email' },
+              { name: 'password', label: 'Password', error: 'Too short' },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Invalid email')
+          expect(result).toContain('Too short')
+        })
+
+        it('displays form-level error', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email' }],
+            error: 'Submission failed. Please try again.',
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Submission failed')
+        })
+
+        it('indicates valid field state', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{
+              name: 'email',
+              label: 'Email',
+              value: 'valid@example.com',
+              valid: true,
+            }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Email')
+          expect(result).toContain('valid@example.com')
+        })
+      })
+    })
+
+    describe('[ansi] validation styling', () => {
+      it('renders error in red', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'email', label: 'Email', error: 'Invalid' }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderForm(node, ctx)
+
+        expect(result).toContain('\x1b[31m')
+      })
+
+      it('renders valid field in green', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'email', label: 'Email', valid: true }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderForm(node, ctx)
+
+        expect(result).toContain('\x1b[32m')
+      })
+    })
+  })
+
+  // ============================================================================
+  // Submit Button Tests
+  // ============================================================================
+
+  describe('submit button', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders submit button', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email' }],
+            submitLabel: 'Submit',
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Submit')
+        })
+
+        it('renders custom submit label', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email' }],
+            submitLabel: 'Create Account',
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Create Account')
+        })
+
+        it('renders disabled submit button', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email', error: 'Invalid' }],
+            submitLabel: 'Submit',
+            submitDisabled: true,
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Submit')
+        })
+
+        it('renders secondary action button', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email' }],
+            submitLabel: 'Save',
+            cancelLabel: 'Cancel',
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Save')
+          expect(result).toContain('Cancel')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Form Layout Tests
+  // ============================================================================
+
+  describe('form layout', () => {
+    describe('[ascii] tier', () => {
+      it('renders form with ASCII border', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          title: 'Login',
+          fields: [{ name: 'username', label: 'Username' }],
+          border: true,
+        })
+        const ctx = createContext('ascii')
+        const result = renderForm(node, ctx)
+
+        expect(result).toMatch(/[+\-|]/)
+      })
+
+      it('groups related fields with ASCII border', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [],
+          groups: [
+            {
+              title: 'Personal Info',
+              fields: [
+                { name: 'firstName', label: 'First Name' },
+                { name: 'lastName', label: 'Last Name' },
+              ],
+            },
+            {
+              title: 'Contact',
+              fields: [{ name: 'email', label: 'Email' }],
+            },
+          ],
+        })
+        const ctx = createContext('ascii')
+        const result = renderForm(node, ctx)
+
+        expect(result).toContain('Personal Info')
+        expect(result).toContain('Contact')
+      })
+    })
+
+    describe('[unicode] tier', () => {
+      it('renders form with Unicode border', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          title: 'Login',
+          fields: [{ name: 'username', label: 'Username' }],
+          border: true,
+        })
+        const ctx = createContext('unicode')
+        const result = renderForm(node, ctx)
+
+        expect(result).toMatch(/[┌┐└┘─│]/)
+      })
+    })
+
+    describe('[markdown] tier', () => {
+      it('renders form fields with markdown formatting', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          title: 'Registration',
+          fields: [{ name: 'email', label: 'Email', required: true }],
+        })
+        const ctx = createContext('markdown')
+        const result = renderForm(node, ctx)
+
+        expect(result).toMatch(/#+.*Registration/)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Field State Tests
+  // ============================================================================
+
+  describe('field states', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders disabled field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'locked', label: 'Locked Field', disabled: true, value: 'Cannot edit' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Locked Field')
+          expect(result).toContain('Cannot edit')
+        })
+
+        it('renders readonly field', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'id', label: 'User ID', readonly: true, value: '12345' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('User ID')
+          expect(result).toContain('12345')
+        })
+
+        it('renders field with placeholder', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{ name: 'email', label: 'Email', placeholder: 'Enter your email' }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Enter your email')
+        })
+
+        it('renders field with helper text', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [{
+              name: 'password',
+              label: 'Password',
+              helperText: 'Must be at least 8 characters',
+            }],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Must be at least 8 characters')
+        })
+      })
+    })
+
+    describe('[ansi] field styling', () => {
+      it('renders disabled field as dimmed', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'locked', label: 'Locked', disabled: true }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderForm(node, ctx)
+
+        expect(result).toContain('\x1b[2m')
+      })
+
+      it('renders focused field with highlight', async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'active', label: 'Active', focused: true }],
+        })
+        const ctx = createContext('ansi')
+        const result = renderForm(node, ctx)
+
+        expect(result).toMatch(/\x1b\[(34|4|7)m/)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Interactive Tier Tests
+  // ============================================================================
+
+  describe('[interactive] tier', () => {
+    it('renders form with keyboard hints', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{ name: 'email', label: 'Email' }],
+        submitLabel: 'Submit',
+      })
+      const ctx = createContext('interactive')
+      const result = renderForm(node, ctx)
+
+      expect(result).toMatch(/Tab|Enter|↑|↓|Arrow/i)
+    })
+
+    it('indicates currently focused field', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [
+          { name: 'first', label: 'First' },
+          { name: 'second', label: 'Second', focused: true },
+          { name: 'third', label: 'Third' },
+        ],
+      })
+      const ctx = createContext('interactive')
+      const result = renderForm(node, ctx)
+
+      expect(result).toContain('Second')
+    })
+
+    it('shows cursor in text field', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{
+          name: 'text',
+          label: 'Text',
+          value: 'Hello',
+          focused: true,
+          cursorPosition: 5,
+        }],
+      })
+      const ctx = createContext('interactive')
+      const result = renderForm(node, ctx)
+
+      expect(result).toMatch(/\x1b\[(7|4)m|[|_▌]/)
+    })
+
+    it('renders submit button with hotkey', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{ name: 'email', label: 'Email' }],
+        submitLabel: 'Submit',
+        submitHotkey: 'Ctrl+Enter',
+      })
+      const ctx = createContext('interactive')
+      const result = renderForm(node, ctx)
+
+      expect(result).toContain('Ctrl+Enter')
+    })
+  })
+
+  // ============================================================================
+  // Form Groups Tests
+  // ============================================================================
+
+  describe('form groups', () => {
+    RENDER_TIERS.forEach((tier) => {
+      describe(`[${tier}] tier`, () => {
+        it('renders grouped fields with section headers', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [],
+            groups: [
+              {
+                title: 'Account Details',
+                fields: [
+                  { name: 'username', label: 'Username' },
+                  { name: 'password', label: 'Password', type: 'password' },
+                ],
+              },
+              {
+                title: 'Profile',
+                fields: [{ name: 'name', label: 'Full Name' }],
+              },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Account Details')
+          expect(result).toContain('Profile')
+          expect(result).toContain('Username')
+          expect(result).toContain('Password')
+          expect(result).toContain('Full Name')
+        })
+
+        it('preserves group order', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [],
+            groups: [
+              { title: 'Section 1', fields: [{ name: 'a', label: 'A' }] },
+              { title: 'Section 2', fields: [{ name: 'b', label: 'B' }] },
+              { title: 'Section 3', fields: [{ name: 'c', label: 'C' }] },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          const pos1 = result.indexOf('Section 1')
+          const pos2 = result.indexOf('Section 2')
+          const pos3 = result.indexOf('Section 3')
+
+          expect(pos1).toBeLessThan(pos2)
+          expect(pos2).toBeLessThan(pos3)
+        })
+
+        it('renders collapsible group', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [],
+            groups: [
+              {
+                title: 'Advanced Options',
+                collapsible: true,
+                collapsed: false,
+                fields: [{ name: 'advanced', label: 'Advanced Setting' }],
+              },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Advanced Options')
+          expect(result).toContain('Advanced Setting')
+        })
+
+        it('hides collapsed group content', async () => {
+          const { renderForm } = await import('../../../renderers/components/form')
+          const node = createFormNode({
+            fields: [],
+            groups: [
+              {
+                title: 'Hidden Section',
+                collapsible: true,
+                collapsed: true,
+                fields: [{ name: 'hidden', label: 'Hidden Field' }],
+              },
+            ],
+          })
+          const ctx = createContext(tier)
+          const result = renderForm(node, ctx)
+
+          expect(result).toContain('Hidden Section')
+          expect(result).not.toContain('Hidden Field')
+        })
+      })
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases
+  // ============================================================================
+
+  describe('edge cases', () => {
+    it('handles missing fields array', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({})
+      const ctx = createContext('text')
+      const result = renderForm(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles null field values', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{ name: 'empty', label: 'Empty', value: null }],
+      })
+      const ctx = createContext('text')
+      const result = renderForm(node, ctx)
+
+      expect(result).toContain('Empty')
+    })
+
+    it('handles very long field labels', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const longLabel = 'A'.repeat(100)
+      const node = createFormNode({
+        fields: [{ name: 'long', label: longLabel }],
+      })
+      const ctx = createContext('text', { width: 40 })
+      const result = renderForm(node, ctx)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles unicode in labels and values', async () => {
+      const { renderForm } = await import('../../../renderers/components/form')
+      const node = createFormNode({
+        fields: [{ name: 'unicode', label: '用户名', value: 'مرحبا' }],
+      })
+      const ctx = createContext('text')
+      const result = renderForm(node, ctx)
+
+      expect(result).toContain('用户名')
+      expect(result).toContain('مرحبا')
+    })
+  })
+
+  // ============================================================================
+  // Loading State Tests
+  // ============================================================================
+
+  describe('loading state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      it(`[${tier}] renders form in loading state`, async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'email', label: 'Email' }],
+          submitLabel: 'Submit',
+          loading: true,
+        })
+        const ctx = createContext(tier)
+        const result = renderForm(node, ctx)
+
+        expect(result).toMatch(/loading|submitting|\.{3}|⠋|spinner/i)
+      })
+    })
+  })
+
+  // ============================================================================
+  // Success State Tests
+  // ============================================================================
+
+  describe('success state', () => {
+    RENDER_TIERS.forEach((tier) => {
+      it(`[${tier}] renders form success message`, async () => {
+        const { renderForm } = await import('../../../renderers/components/form')
+        const node = createFormNode({
+          fields: [{ name: 'email', label: 'Email' }],
+          success: 'Form submitted successfully!',
+        })
+        const ctx = createContext(tier)
+        const result = renderForm(node, ctx)
+
+        expect(result).toContain('Form submitted successfully')
+      })
+    })
+  })
+})