Testing Formularios Complejos

gistfile1.txt

describe('Registration Form', () => {
  it('valida y envía formulario completo', async () => {
    const user = userEvent.setup()
    const handleSubmit = vi.fn()
    
    render(<RegistrationForm onSubmit={handleSubmit} />)

    // Llenar campos
    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
    await user.type(screen.getByLabelText(/password/i), 'SecurePass123!')
    await user.type(screen.getByLabelText(/confirm password/i), 'SecurePass123!')
    
    // Seleccionar checkbox
    await user.click(screen.getByRole('checkbox', { name: /terms/i }))
    
    // Seleccionar radio
    await user.click(screen.getByRole('radio', { name: /personal/i }))
    
    // Seleccionar dropdown
    await user.selectOptions(
      screen.getByRole('combobox', { name: /country/i }),
      'US'
    )

    // Enviar
    await user.click(screen.getByRole('button', { name: /register/i }))

    // Verificar
    await waitFor(() => {
      expect(handleSubmit).toHaveBeenCalledWith({
        email: 'test@example.com',
        password: 'SecurePass123!',
        accountType: 'personal',
        country: 'US',
        acceptedTerms: true,
      })
    })
  })

  it('muestra errores de validación', async () => {
    const user = userEvent.setup()
    render(<RegistrationForm />)

    // Enviar sin llenar
    await user.click(screen.getByRole('button', { name: /register/i }))

    // Verificar errores
    expect(await screen.findByText(/email is required/i)).toBeInTheDocument()
    expect(screen.getByText(/password is required/i)).toBeInTheDocument()
  })

  it('valida formato de email', async () => {
    const user = userEvent.setup()
    render(<RegistrationForm />)

    await user.type(screen.getByLabelText(/email/i), 'invalid-email')
    await user.tab() // Blur event

    expect(await screen.findByText(/invalid email format/i)).toBeInTheDocument()
  })
})