@mdxui/terminal 2.0.0

package/src/__tests__/forms/integration.test.ts

@@ -0,0 +1,444 @@
+/**
+ * @mdxui/terminal Forms Module Integration Tests
+ *
+ * Tests verifying that the RHF integration types, schemas, and converters
+ * work correctly together.
+ */
+import { describe, it, expect } from 'vitest'
+import { z } from 'zod'
+
+// Import from forms module
+import {
+  // Types (verify they're re-exported)
+  type FormValues,
+  type FieldConfig,
+  type FormState,
+  type SelectState,
+  type SearchState,
+
+  // Schemas
+  FieldConfigSchema,
+  FormStateSchema,
+  EmailSchema,
+  PasswordSchema,
+  createLoginSchema,
+  createRegistrationSchema,
+  createContactSchema,
+  createProfileSchema,
+  createSettingsSchema,
+
+  // Converters
+  convertRHFToFormState,
+  formStateToUINode,
+  fieldConfigToUINode,
+  selectStateToUINode,
+  searchStateToUINode,
+  extractFieldErrors,
+  hasFormErrors,
+  getFirstErrorField,
+} from '../../forms'
+
+// ============================================================================
+// Schema Tests
+// ============================================================================
+
+describe('Forms Module - Schemas', () => {
+  describe('EmailSchema', () => {
+    it('validates valid emails', () => {
+      expect(() => EmailSchema.parse('test@example.com')).not.toThrow()
+      expect(() => EmailSchema.parse('user.name+tag@domain.co.uk')).not.toThrow()
+    })
+
+    it('rejects invalid emails', () => {
+      expect(() => EmailSchema.parse('notanemail')).toThrow()
+      expect(() => EmailSchema.parse('@nodomain')).toThrow()
+      expect(() => EmailSchema.parse('missing@')).toThrow()
+    })
+  })
+
+  describe('PasswordSchema', () => {
+    it('validates passwords with all requirements', () => {
+      expect(() => PasswordSchema.parse('ValidPass1')).not.toThrow()
+      expect(() => PasswordSchema.parse('Complex123')).not.toThrow()
+    })
+
+    it('rejects passwords missing requirements', () => {
+      // Too short
+      expect(() => PasswordSchema.parse('Short1')).toThrow()
+      // No uppercase
+      expect(() => PasswordSchema.parse('lowercase123')).toThrow()
+      // No lowercase
+      expect(() => PasswordSchema.parse('UPPERCASE123')).toThrow()
+      // No number
+      expect(() => PasswordSchema.parse('NoNumbers')).toThrow()
+    })
+  })
+
+  describe('FieldConfigSchema', () => {
+    it('validates valid field config', () => {
+      const config = {
+        name: 'email',
+        label: 'Email',
+        type: 'email',
+        required: true,
+        placeholder: 'Enter email',
+      }
+      expect(() => FieldConfigSchema.parse(config)).not.toThrow()
+    })
+
+    it('requires name field', () => {
+      expect(() => FieldConfigSchema.parse({ label: 'No Name' })).toThrow()
+    })
+
+    it('rejects empty name', () => {
+      expect(() => FieldConfigSchema.parse({ name: '', label: 'Empty' })).toThrow()
+    })
+  })
+
+  describe('createLoginSchema', () => {
+    it('creates basic login schema', () => {
+      const schema = createLoginSchema()
+      type LoginValues = z.infer<typeof schema>
+
+      // Valid data
+      const valid: LoginValues = {
+        email: 'test@example.com',
+        password: 'Password123',
+      }
+      expect(() => schema.parse(valid)).not.toThrow()
+
+      // Invalid email
+      expect(() => schema.parse({ email: 'bad', password: 'Password123' })).toThrow()
+    })
+
+    it('creates login schema with remember me', () => {
+      const schema = createLoginSchema({ rememberMe: true })
+      type LoginValues = z.infer<typeof schema>
+
+      const valid: LoginValues = {
+        email: 'test@example.com',
+        password: 'Password123',
+        rememberMe: true,
+      }
+      expect(() => schema.parse(valid)).not.toThrow()
+    })
+  })
+
+  describe('createRegistrationSchema', () => {
+    it('creates registration schema with password confirmation', () => {
+      const schema = createRegistrationSchema({ confirmPassword: true })
+
+      // Matching passwords
+      expect(() =>
+        schema.parse({
+          email: 'test@example.com',
+          password: 'Password123',
+          confirmPassword: 'Password123',
+        })
+      ).not.toThrow()
+
+      // Non-matching passwords
+      expect(() =>
+        schema.parse({
+          email: 'test@example.com',
+          password: 'Password123',
+          confirmPassword: 'Different123',
+        })
+      ).toThrow()
+    })
+  })
+
+  describe('createContactSchema', () => {
+    it('creates basic contact schema', () => {
+      const schema = createContactSchema()
+
+      expect(() =>
+        schema.parse({
+          name: 'John Doe',
+          email: 'john@example.com',
+          message: 'This is a test message',
+        })
+      ).not.toThrow()
+    })
+
+    it('requires minimum message length', () => {
+      const schema = createContactSchema()
+
+      expect(() =>
+        schema.parse({
+          name: 'John',
+          email: 'john@example.com',
+          message: 'Short',
+        })
+      ).toThrow()
+    })
+  })
+})
+
+// ============================================================================
+// Converter Tests
+// ============================================================================
+
+describe('Forms Module - Converters', () => {
+  describe('convertRHFToFormState', () => {
+    it('converts RHF state to FormState', () => {
+      const rhfState = {
+        isSubmitting: false,
+        isSubmitted: false,
+        isValid: true,
+        isDirty: true,
+        errors: {},
+        touchedFields: { email: true },
+        dirtyFields: { email: true },
+      }
+
+      const fields: FieldConfig[] = [
+        { name: 'email', label: 'Email', type: 'email', required: true },
+        { name: 'password', label: 'Password', type: 'password', required: true },
+      ]
+
+      const result = convertRHFToFormState(rhfState, fields, {
+        title: 'Login',
+        submitLabel: 'Sign In',
+        values: { email: 'test@example.com', password: '' },
+      })
+
+      expect(result.title).toBe('Login')
+      expect(result.submitLabel).toBe('Sign In')
+      expect(result.loading).toBe(false)
+      expect(result.submitDisabled).toBe(false)
+      expect(result.fields).toHaveLength(2)
+      expect(result.fields?.[0].value).toBe('test@example.com')
+      expect(result.fields?.[0].valid).toBe(true) // touched + no error + required
+    })
+
+    it('merges errors from RHF state', () => {
+      const rhfState = {
+        isSubmitting: false,
+        isSubmitted: true,
+        isValid: false,
+        isDirty: true,
+        errors: {
+          email: { message: 'Invalid email', type: 'pattern' },
+        },
+        touchedFields: { email: true },
+        dirtyFields: { email: true },
+      }
+
+      const fields: FieldConfig[] = [
+        { name: 'email', label: 'Email', type: 'email' },
+      ]
+
+      const result = convertRHFToFormState(rhfState, fields)
+
+      expect(result.fields?.[0].error).toBe('Invalid email')
+      expect(result.submitDisabled).toBe(true) // Form is invalid
+    })
+  })
+
+  describe('formStateToUINode', () => {
+    it('converts FormState to UINode', () => {
+      const formState: FormState<{ email: string }> = {
+        title: 'Contact',
+        description: 'Get in touch',
+        fields: [
+          { name: 'email', label: 'Email', type: 'email' },
+        ],
+        submitLabel: 'Send',
+        loading: false,
+      }
+
+      const node = formStateToUINode(formState)
+
+      expect(node.type).toBe('form')
+      expect(node.props.title).toBe('Contact')
+      expect(node.props.description).toBe('Get in touch')
+      expect(node.props.submitLabel).toBe('Send')
+      expect(node.props.fields).toHaveLength(1)
+    })
+  })
+
+  describe('fieldConfigToUINode', () => {
+    it('converts FieldConfig to UINode', () => {
+      const field: FieldConfig = {
+        name: 'email',
+        label: 'Email Address',
+        type: 'email',
+        value: 'test@example.com',
+        required: true,
+        error: 'Invalid format',
+      }
+
+      const node = fieldConfigToUINode(field)
+
+      expect(node.type).toBe('field')
+      expect(node.props.name).toBe('email')
+      expect(node.props.label).toBe('Email Address')
+      expect(node.props.value).toBe('test@example.com')
+      expect(node.props.error).toBe('Invalid format')
+    })
+  })
+
+  describe('selectStateToUINode', () => {
+    it('converts SelectState to UINode', () => {
+      const state: SelectState<string> = {
+        options: [
+          { label: 'USA', value: 'us' },
+          { label: 'Canada', value: 'ca' },
+        ],
+        value: 'us',
+        label: 'Country',
+        open: true,
+      }
+
+      const node = selectStateToUINode(state)
+
+      expect(node.type).toBe('select')
+      expect(node.props.options).toHaveLength(2)
+      expect(node.props.value).toBe('us')
+      expect(node.props.label).toBe('Country')
+    })
+  })
+
+  describe('searchStateToUINode', () => {
+    it('converts SearchState to UINode', () => {
+      const state: SearchState = {
+        value: 'test query',
+        suggestions: [
+          { label: 'Test 1', value: 'test1' },
+          { label: 'Test 2', value: 'test2' },
+        ],
+        showSuggestions: true,
+        highlightedIndex: 0,
+      }
+
+      const node = searchStateToUINode(state)
+
+      expect(node.type).toBe('search')
+      expect(node.props.value).toBe('test query')
+      expect(node.props.suggestions).toHaveLength(2)
+      expect(node.props.showSuggestions).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Validation Helper Tests
+// ============================================================================
+
+describe('Forms Module - Validation Helpers', () => {
+  describe('extractFieldErrors', () => {
+    it('extracts errors from RHF errors object', () => {
+      const errors = {
+        email: { message: 'Invalid email' },
+        password: { message: 'Too short' },
+        name: {},
+      }
+
+      const result = extractFieldErrors(errors)
+
+      expect(result.email).toBe('Invalid email')
+      expect(result.password).toBe('Too short')
+      expect(result.name).toBeUndefined()
+    })
+
+    it('filters by field names when provided', () => {
+      const errors = {
+        email: { message: 'Invalid email' },
+        password: { message: 'Too short' },
+      }
+
+      const result = extractFieldErrors(errors, ['email'])
+
+      expect(result.email).toBe('Invalid email')
+      expect(result.password).toBeUndefined()
+    })
+  })
+
+  describe('hasFormErrors', () => {
+    it('returns true when errors exist', () => {
+      expect(hasFormErrors({ email: { message: 'Invalid' } })).toBe(true)
+    })
+
+    it('returns false when no errors', () => {
+      expect(hasFormErrors({})).toBe(false)
+    })
+  })
+
+  describe('getFirstErrorField', () => {
+    it('returns first error field', () => {
+      const errors = {
+        email: { message: 'Invalid' },
+        password: { message: 'Too short' },
+      }
+
+      const result = getFirstErrorField(errors)
+
+      expect(['email', 'password']).toContain(result)
+    })
+
+    it('respects field order when provided', () => {
+      const errors = {
+        email: { message: 'Invalid' },
+        password: { message: 'Too short' },
+      }
+
+      const result = getFirstErrorField(errors, ['password', 'email'])
+
+      expect(result).toBe('password')
+    })
+
+    it('returns undefined when no errors', () => {
+      expect(getFirstErrorField({})).toBeUndefined()
+    })
+  })
+})
+
+// ============================================================================
+// Type Export Tests
+// ============================================================================
+
+describe('Forms Module - Type Exports', () => {
+  it('exports FormValues type', () => {
+    // This is a compile-time test - if types are exported correctly, this compiles
+    const values: FormValues = {
+      email: 'test@example.com',
+      count: 42,
+      active: true,
+      tags: ['a', 'b'],
+    }
+    expect(values).toBeDefined()
+  })
+
+  it('exports FieldConfig type', () => {
+    const config: FieldConfig = {
+      name: 'test',
+      label: 'Test Field',
+      type: 'text',
+    }
+    expect(config).toBeDefined()
+  })
+
+  it('exports FormState type', () => {
+    const state: FormState = {
+      title: 'Test Form',
+      fields: [],
+    }
+    expect(state).toBeDefined()
+  })
+
+  it('exports SelectState type', () => {
+    const state: SelectState = {
+      options: [],
+      value: 'test',
+    }
+    expect(state).toBeDefined()
+  })
+
+  it('exports SearchState type', () => {
+    const state: SearchState = {
+      value: 'query',
+    }
+    expect(state).toBeDefined()
+  })
+})