Prueba: Cuentas por cobrar – Realizar abono

Objetivo

Validar que el sistema permita realizar abonos a cuentas por cobrar con distintos medios de pago, incluyendo efectivo y transferencias.

Precondiciones

Usuario autenticado mediante el comando cy.login().
Acceso al dashboard del sistema (/dashboard).
Existencia de al menos un registro pendiente en Cuentas por cobrar.

Pasos Generales

Ingresar Cuentas por cobrar en el modulo de ingresos.
Seleccionar un registro disponible en la tabla.
Abrir el modal de abono.
Ingresar monto y medio de pago.
Si el medio es transferencia: seleccionar tipo de transferencia.
Confirmar el abono.
Aceptar confirmación en SweetAlert2.
Validar que el modal se cierre correctamente.

Resultado Esperado

El sistema debe permitir registrar abonos con distintos medios de pago.
El modal debe cerrarse al confirmar el abono.
El flujo debe completarse sin errores.

Explicación Detallada del Código

Variables de prueba

// --- Variables de prueba  ---
const abonos = [
  {
    monto: "200",
    medioPago: "Efectivo",
  },
  {
    monto: "300",
    medioPago: "Transferencia",
    tipoTransferencia: "Nequi",
  },
];

Explicacion:

| Aquí se definen los escenarios de prueba que serán utilizados:

abonos es un arreglo que contiene diferentes configuraciones de prueba.
Cada objeto dentro del arreglo representa un abono con su monto y su medio de pago.
En el caso de pagos con transferencia, además se incluye el campo tipoTransferencia para especificar el banco.

Iteración sobre escenarios

abonos.forEach((abono) => {
  it(`Debe realizar abonos con medio de pago: ${abono.medioPago}`, () => {
    // --- Iterar sobre cada abono ---
  });
});

Explicacion:

Con forEach, se recorre cada escenario definido en abonos.
Por cada escenario, se genera un it(...), que representa un caso de prueba independiente
El nombre del caso (Debe realizar abonos con medio de pago: ...) se construye según el valor de medioPago.

Navegar al módulo de Cuentas por Cobrar

// --- Paso 1: Navegar a módulo de Cuentas por cobrar ---
cy.visit("/cuentaspagar");

Explicacion:

Una vez dentro del dashboard, la prueba navega directamente a la ruta /cuentaspagar.
Aquí se carga el módulo donde están registradas las cuentas pendientes de pago y se gestionarán los abonos.

Seleccionar la primera fila de la tabla

// --- Paso 2: Seleccionar la primera fila de la tabla ---
cy.get("td.dtr-control.sorting_1").first().click();

Explicacion:

Se selecciona la primera fila de la tabla de cuentas, simulando que el usuario abre el detalle de una cuenta específica.
Se utiliza .first() para asegurarse de que se interactúa siempre con la primera coincidencia visible.

Abrir modal de abono

// --- Paso 3: Abrir modal de abono ---
cy.get('button[onclick^="window.abrirModalAbono"]', { timeout: 10000 })
  .should("be.visible")
  .first()
  .click();

Explicacion:

La prueba localiza el botón que abre el modal de abono, el cual tiene un atributo onclick específico.
Con { timeout: 10000 } se da un margen de espera de hasta 10 segundos, en caso de que el botón tarde en cargarse.
.should("be.visible") asegura que el botón esté visible antes de intentar hacer clic, evitando errores por interacción temprana.
Finalmente, .first().click() abre el modal correspondiente.

Completar modal de abono

// --- Paso 4: Completar modal ---
cy.get(".modal-dialog:visible").within(() => {
  // --- Ingresar monto del abono ---
  cy.get("#montoAbono").clear().type(abono.monto);

  // --- Seleccionar medio de pago ---
  cy.get("#medioPago").select(abono.medioPago);

  // --- Si es transferencia, seleccionar tipo de transferencia ---
  if (abono.medioPago === "Transferencia") {
    cy.get("#tipoTransferencia").select(abono.tipoTransferencia);
  }

  // --- Confirmar abono ---
  cy.get('button[onclick="confirmarAbono()"]').click();
});

Explicacion:

Una vez abierto el modal, se usa .within(...) para limitar todas las interacciones al del modal visible, evitando conflictos con elementos similares en la página.

| Se limpian y completan los campos:

Monto → el valor del abono se toma de los escenarios definidos en la variable abonos.
Medio de pago → puede ser efectivo o transferencia, y se selecciona dinámicamente.
Si el medio de pago es transferencia, se despliega un campo adicional para especificar el tipo de transferencia (ejemplo: Nequi).
Finalmente, se confirma el abono haciendo clic en el botón que dispara confirmarAbono()

Confirmar SweetAlert2

// --- Paso 5: Confirmar SweetAlert2 ---
cy.get(".swal2-popup:visible").within(() => {
  cy.get("button.swal2-confirm").click();
});

Explicacion:

Al confirmar el abono, el sistema despliega un SweetAlert2 como ventana emergente de confirmación.
Se asegura que el popup visible esté activo con .swal2-popup:visible.
Dentro del popup, se busca y se hace clic en el botón de confirmación (.swal2-confirm).
Esta acción equivale a que el usuario valide que realmente desea realizar el abono.

Validar cierre del modal

// --- Paso 6: Validar que el modal se cerró ---
cy.get(".modal-dialog", { timeout: 10000 }).should("not.be.visible");

// --- Espera breve antes de la siguiente iteración ---
cy.wait(500);

Explicacion:

Tras confirmar el abono, se valida que el modal haya sido cerrado correctamente.
Se aplica un timeout de 10 segundos para esperar a que desaparezca en caso de que la acción tarde un poco.
El should("not.be.visible") asegura que el flujo finalizó y el usuario ya no ve el modal en pantalla.
Finalmente, se incluye un cy.wait(500) para dar una pausa corta entre iteraciones, evitando que un escenario interfiera con el siguiente.

Resultados de la ejecución de la prueba

Escenario	Monto	Medio de Pago	Tipo de Transferencia	Estado
1	200	Efectivo	-	PASS
2	300	Transferencia	Nequi	PASS