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).
Archivos modificados:
projects/panel/src/app/pages/bookings/edit/edit.tsprojects/panel/src/app/pages/bookings/edit/edit.htmlprojects/panel/src/app/components/edit-booking-form/edit-booking-form.tsprojects/panel/src/app/components/edit-booking-form/edit-booking-form.html
Cambios:
- Se agregó
client_namecomo FormControl al FormGroupbookingForm - Se cambió el input de
disabledareadonlyy se agregóformControlName="client_name" - Se actualizó el
patchValuepara incluirclient_namey se deshabilitó el control después de establecer el valor
Casos de prueba:
- ✅ Verificar que el campo
client_namese muestra correctamente al editar una reserva - ✅ Verificar que el campo está deshabilitado (readonly) y no se puede editar
- ✅ Verificar que el valor se carga correctamente desde el booking
- ✅ Verificar que el formulario sigue siendo válido con el nuevo campo
Archivos modificados:
projects/panel/src/app/pages/pricing/pricing.tsprojects/panel/src/app/pages/pricing/pricing.html
Cambios:
- Se convirtió
recurrenceConfigde signal a FormGroup anidado dentro detariffForm - Se actualizaron todos los métodos que usaban
recurrenceConfig()para usar el FormGroup - Se actualizó el HTML para usar
formControlNameyformGroupName="recurrence" - Se corrigió el textarea de
descriptionpara usarformControlNamedirectamente
Casos de prueba:
- ✅ Verificar que la configuración de recurrencia se carga correctamente al editar un ajuste existente
- ✅ Verificar que se puede cambiar la frecuencia de recurrencia (NONE, DAILY, WEEKLY, MONTHLY, YEARLY)
- ✅ Verificar que el intervalo se puede modificar correctamente
- ✅ Verificar que los días de la semana se pueden seleccionar/deseleccionar para frecuencia WEEKLY
- ✅ Verificar que el día del mes se puede seleccionar para frecuencia MONTHLY
- ✅ Verificar que mes y día se pueden seleccionar para frecuencia YEARLY
- ✅ Verificar que la vista previa de recurrencia se actualiza correctamente
- ✅ Verificar que al guardar, la configuración de recurrencia se convierte correctamente a RRULE
- ✅ Verificar que al crear un nuevo ajuste, la recurrencia se resetea correctamente
- ✅ Verificar que el campo
descriptionfunciona correctamente con formControlName
Archivos modificados:
projects/panel/src/app/pages/bookings/class/enroll-client/enroll-client.tsprojects/panel/src/app/pages/bookings/class/enroll-client/enroll-client.html
Cambios:
- Se creó
selectedClientsFormArraycomo FormArray de FormGroups - Se agregaron métodos helper para sincronizar el FormArray con
selectedClientssignal - Se actualizaron los campos de pago para usar
formControlNamedentro del FormArray - Se mantiene la sincronización bidireccional entre FormArray y signal para compatibilidad
Casos de prueba:
- ✅ Verificar que se puede agregar un cliente a la lista de seleccionados
- ✅ Verificar que los campos de pago (tipo, monto, referencia) se pueden editar correctamente
- ✅ Verificar que el tipo de precio (individual/total) se puede cambiar para el primer cliente
- ✅ Verificar que el monto se actualiza automáticamente al cambiar entre precio individual y total
- ✅ Verificar que se puede eliminar un cliente de la lista
- ✅ Verificar que al eliminar un cliente, el FormArray se actualiza correctamente
- ✅ Verificar que al inscribir clientes, los valores del FormArray se sincronizan correctamente
- ✅ Verificar que después de inscribir, el FormArray se limpia correctamente
- ✅ Verificar que cuando hay un pago total, el FormArray se limpia correctamente
- ✅ Verificar que los campos readonly/disabled funcionan correctamente (payment_amount)
- Tener acceso al entorno de desarrollo
- Tener credenciales de acceso válidas
- Tener datos de prueba disponibles (reservas, clases, clientes, etc.)
- Navegar a la página de reservas
- Seleccionar una reserva existente para editar
- Verificar que el campo "Cliente" muestra el nombre correcto
- Intentar editar el campo (debe estar deshabilitado)
- Verificar que se puede guardar la reserva sin errores
- Navegar a la página de pricing
- Crear un nuevo ajuste de tarifa
- 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
- Verificar que la vista previa se actualiza correctamente
- Guardar el ajuste y verificar que se guarda correctamente
- Editar el ajuste guardado y verificar que la configuración se carga correctamente
- Modificar la recurrencia y guardar nuevamente
- Navegar a la página de inscripción de clientes en una clase
- Agregar un cliente a la lista de seleccionados
- Verificar que aparecen los campos de pago
- Seleccionar un tipo de pago
- Verificar que el monto se calcula correctamente
- Ingresar una referencia de transacción
- Cambiar el tipo de precio (si es el primer cliente y está disponible)
- Agregar más clientes y verificar que los campos funcionan para cada uno
- Eliminar un cliente y verificar que se elimina correctamente
- Inscribir los clientes y verificar que se guardan correctamente
Se recomienda crear tests unitarios para:
- Verificar que los FormGroups se inicializan correctamente
- Verificar que los FormControls tienen los validadores correctos
- Verificar que los métodos de actualización funcionan correctamente
- Verificar la sincronización entre FormArray y signals
Se recomienda crear tests de integración para:
- Verificar el flujo completo de edición de reservas
- Verificar el flujo completo de creación/edición de ajustes de tarifa
- Verificar el flujo completo de inscripción de clientes
✅ 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
- Los cambios mantienen la compatibilidad con la lógica de negocio existente
- Se mantiene la sincronización bidireccional entre FormArray y signals en
enroll-clientpara compatibilidad - El campo
client_namese mantiene readonly ya que es solo informativo - La configuración de recurrencia ahora está completamente integrada en el FormGroup principal
2024-12-19
Correcciones realizadas según estándar de Angular Reactive Forms