Skip to content

Instantly share code, notes, and snippets.

@NeftaliYagua
Created February 4, 2026 20:02
Show Gist options
  • Select an option

  • Save NeftaliYagua/c71297a8d1e36ae1b6469d89b12a700f to your computer and use it in GitHub Desktop.

Select an option

Save NeftaliYagua/c71297a8d1e36ae1b6469d89b12a700f to your computer and use it in GitHub Desktop.
Plan de Testing - Corrección de Formularios Angular Reactive Forms

Plan de Testing - Corrección de Formularios Angular Reactive Forms

Resumen

Este documento describe el plan de testing para validar las correcciones realizadas en los formularios del proyecto panel para cumplir con el estándar de Angular Reactive Forms (FormGroup/FormControl).

Cambios Realizados

1. Corrección de client_name en formularios de edición de reservas

Archivos modificados:

  • projects/panel/src/app/pages/bookings/edit/edit.ts
  • projects/panel/src/app/pages/bookings/edit/edit.html
  • projects/panel/src/app/components/edit-booking-form/edit-booking-form.ts
  • projects/panel/src/app/components/edit-booking-form/edit-booking-form.html

Cambios:

  • Se agregó client_name como FormControl al FormGroup bookingForm
  • Se cambió el input de disabled a readonly y se agregó formControlName="client_name"
  • Se actualizó el patchValue para incluir client_name y se deshabilitó el control después de establecer el valor

Casos de prueba:

  1. ✅ Verificar que el campo client_name se muestra correctamente al editar una reserva
  2. ✅ Verificar que el campo está deshabilitado (readonly) y no se puede editar
  3. ✅ Verificar que el valor se carga correctamente desde el booking
  4. ✅ Verificar que el formulario sigue siendo válido con el nuevo campo

2. Conversión de recurrenceConfig signal a FormGroup en pricing

Archivos modificados:

  • projects/panel/src/app/pages/pricing/pricing.ts
  • projects/panel/src/app/pages/pricing/pricing.html

Cambios:

  • Se convirtió recurrenceConfig de signal a FormGroup anidado dentro de tariffForm
  • Se actualizaron todos los métodos que usaban recurrenceConfig() para usar el FormGroup
  • Se actualizó el HTML para usar formControlName y formGroupName="recurrence"
  • Se corrigió el textarea de description para usar formControlName directamente

Casos de prueba:

  1. ✅ Verificar que la configuración de recurrencia se carga correctamente al editar un ajuste existente
  2. ✅ Verificar que se puede cambiar la frecuencia de recurrencia (NONE, DAILY, WEEKLY, MONTHLY, YEARLY)
  3. ✅ Verificar que el intervalo se puede modificar correctamente
  4. ✅ Verificar que los días de la semana se pueden seleccionar/deseleccionar para frecuencia WEEKLY
  5. ✅ Verificar que el día del mes se puede seleccionar para frecuencia MONTHLY
  6. ✅ Verificar que mes y día se pueden seleccionar para frecuencia YEARLY
  7. ✅ Verificar que la vista previa de recurrencia se actualiza correctamente
  8. ✅ Verificar que al guardar, la configuración de recurrencia se convierte correctamente a RRULE
  9. ✅ Verificar que al crear un nuevo ajuste, la recurrencia se resetea correctamente
  10. ✅ Verificar que el campo description funciona correctamente con formControlName

3. Conversión de campos dinámicos en enroll-client a FormArray

Archivos modificados:

  • projects/panel/src/app/pages/bookings/class/enroll-client/enroll-client.ts
  • projects/panel/src/app/pages/bookings/class/enroll-client/enroll-client.html

Cambios:

  • Se creó selectedClientsFormArray como FormArray de FormGroups
  • Se agregaron métodos helper para sincronizar el FormArray con selectedClients signal
  • Se actualizaron los campos de pago para usar formControlName dentro del FormArray
  • Se mantiene la sincronización bidireccional entre FormArray y signal para compatibilidad

Casos de prueba:

  1. ✅ Verificar que se puede agregar un cliente a la lista de seleccionados
  2. ✅ Verificar que los campos de pago (tipo, monto, referencia) se pueden editar correctamente
  3. ✅ Verificar que el tipo de precio (individual/total) se puede cambiar para el primer cliente
  4. ✅ Verificar que el monto se actualiza automáticamente al cambiar entre precio individual y total
  5. ✅ Verificar que se puede eliminar un cliente de la lista
  6. ✅ Verificar que al eliminar un cliente, el FormArray se actualiza correctamente
  7. ✅ Verificar que al inscribir clientes, los valores del FormArray se sincronizan correctamente
  8. ✅ Verificar que después de inscribir, el FormArray se limpia correctamente
  9. ✅ Verificar que cuando hay un pago total, el FormArray se limpia correctamente
  10. ✅ Verificar que los campos readonly/disabled funcionan correctamente (payment_amount)

Testing Manual

Pre-requisitos

  1. Tener acceso al entorno de desarrollo
  2. Tener credenciales de acceso válidas
  3. Tener datos de prueba disponibles (reservas, clases, clientes, etc.)

Pasos de Testing

1. Testing de formularios de edición de reservas

  1. Navegar a la página de reservas
  2. Seleccionar una reserva existente para editar
  3. Verificar que el campo "Cliente" muestra el nombre correcto
  4. Intentar editar el campo (debe estar deshabilitado)
  5. Verificar que se puede guardar la reserva sin errores

2. Testing de configuración de recurrencia en pricing

  1. Navegar a la página de pricing
  2. Crear un nuevo ajuste de tarifa
  3. Configurar diferentes tipos de recurrencia:
    • Sin recurrencia
    • Diaria con intervalo
    • Semanal con días específicos
    • Mensual con día específico
    • Anual con mes y día específicos
  4. Verificar que la vista previa se actualiza correctamente
  5. Guardar el ajuste y verificar que se guarda correctamente
  6. Editar el ajuste guardado y verificar que la configuración se carga correctamente
  7. Modificar la recurrencia y guardar nuevamente

3. Testing de inscripción de clientes en clases

  1. Navegar a la página de inscripción de clientes en una clase
  2. Agregar un cliente a la lista de seleccionados
  3. Verificar que aparecen los campos de pago
  4. Seleccionar un tipo de pago
  5. Verificar que el monto se calcula correctamente
  6. Ingresar una referencia de transacción
  7. Cambiar el tipo de precio (si es el primer cliente y está disponible)
  8. Agregar más clientes y verificar que los campos funcionan para cada uno
  9. Eliminar un cliente y verificar que se elimina correctamente
  10. Inscribir los clientes y verificar que se guardan correctamente

Testing Automatizado (Recomendado)

Unit Tests

Se recomienda crear tests unitarios para:

  1. Verificar que los FormGroups se inicializan correctamente
  2. Verificar que los FormControls tienen los validadores correctos
  3. Verificar que los métodos de actualización funcionan correctamente
  4. Verificar la sincronización entre FormArray y signals

Integration Tests

Se recomienda crear tests de integración para:

  1. Verificar el flujo completo de edición de reservas
  2. Verificar el flujo completo de creación/edición de ajustes de tarifa
  3. Verificar el flujo completo de inscripción de clientes

Criterios de Aceptación

✅ Todos los formularios usan FormGroup/FormControl según el estándar de Angular ✅ Todos los campos están conectados mediante formControlName ✅ No hay campos usando [value] y (change) dentro de formularios reactivos ✅ La funcionalidad existente se mantiene intacta ✅ No hay errores de compilación o linting ✅ Los formularios se validan correctamente ✅ Los valores se guardan y cargan correctamente

Notas Adicionales

  • Los cambios mantienen la compatibilidad con la lógica de negocio existente
  • Se mantiene la sincronización bidireccional entre FormArray y signals en enroll-client para compatibilidad
  • El campo client_name se mantiene readonly ya que es solo informativo
  • La configuración de recurrencia ahora está completamente integrada en el FormGroup principal

Fecha de Creación

2024-12-19

Autor

Correcciones realizadas según estándar de Angular Reactive Forms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment