Skip to content

Prueba: Ingresos – Generar Cotización

Objetivo

Verificar que el sistema permita crear cotizaciones correctamente para distintos clientes y tasas de IVA. La prueba valida desde la apertura del modal hasta la aparición de la cotización en la tabla.


Precondiciones

  • Usuario autenticado mediante el comando cy.login().
  • Acceso al dashboard del sistema (/dashboard).
  • Ruta activa para cotizaciones: /cliente/cotizaciones.`
  • Modal para crear cotización existe y es accesible: #modalCrearCotizacion.
  • roducto con código SH229 existe y está disponible en el selector de productos del modal.
  • Opciones de IVA válidas disponibles: no_aplica, 0, 5, 1, 9.
  • erfaz de notificación (SweetAlert2) presente para confirmar guardado.

Pasos Generales

  1. Navegar al módulo de Cotizaciones (/cliente/cotizaciones).
  2. Abrir el modal de crear Cotización
  3. Ingresar el nombre del cliente.
  4. Completar la descripción de la cotización.
  5. Seleccionar el producto por su código (SH229) desde el selector interno del modal.
  6. Editar la descripción del producto dentro de la línea de la cotización.
  7. Completar cantidad y descuento para el producto.
  8. Seleccionar la tasa de IVA correspondiente al escenario.
  9. Guardar la cotización.
  10. Esperar el cierre de (SweetAlert2)

Resultado Esperado

  • El modal de cotización debe abrirse correctamente
  • Todos los campos deben aceptar la información ingresada.
  • Al guardar, la cotización debe registrarse sin errores.

Explicación Detallada del Código

Visitar el modulo de cotizaciones

cy.visit("/cliente/cotizaciones");

Explicación

  • cy.visit("/cliente/cotizaciones") sitúa el test en la página de cotizaciones donde está el botón para crear nueva cotización.implementación

Definición de escenarios

const escenarios = [
  {
    cliente: "Cliente A",
    descripcion: "Desc A",
    producto: "SH229",
    productoDescripcion: "Producto prueba",
    cantidad: "2",
    descuento: "10",
    iva: "no_aplica",
  },
  {
    cliente: "Cliente B",
    descripcion: "Desc B",
    producto: "SH229",
    productoDescripcion: "Producto prueba",
    cantidad: "2",
    descuento: "10",
    iva: "0",
  },
  {
    cliente: "Cliente C",
    descripcion: "Desc C",
    producto: "SH229",
    productoDescripcion: "Producto prueba",
    cantidad: "2",
    descuento: "10",
    iva: "5",
  },
  {
    cliente: "Cliente D",
    descripcion: "Desc D",
    producto: "SH229",
    productoDescripcion: "Producto prueba",
    cantidad: "2",
    descuento: "10",
    iva: "19",
  },
];

Explicación

  • Array con 4 escenarios (uno por tipo de IVA que quieres validar).
  • Cada objeto contiene los datos mínimos necesarios: cliente, descripcion, producto (código), productoDescripcion (texto editable en la línea), cantidad, descuento e iva.

Iteración y test por escenario

escenarios.forEach((escenario) => {
  it(`Debe crear cotización para ${escenario.cliente} con IVA ${escenario.iva}`, () => {
    // ... flujo ...
  });
});

Explicación

  • forEach itera sobre cada escenario y crea un it(...) independiente.
  • Nombres dinámicos (${escenario.cliente} y ${escenario.iva}) hacen los reportes legibles y fáciles de filtrar.

Apertura del modal y verificación inicial

// Abrir modal
cy.get('button[onclick="abrirModalCrearCotizacion()"]').click();
cy.get("#modalCrearCotizacion").should("be.visible");

Explicación

  • Selecciona el botón que dispara la apertura del modal usando el atributo onclick.
  • should("be.visible") confirma que el modal cargó y está listo para interactuar.

Llenar nombre y descripcion

cy.get('#modalCrearCotizacion input[name="cliente"]')
  .clear()
  .type(escenario.cliente);

cy.get('#modalCrearCotizacion input[name="descripcion"]')
  .clear()
  .type(escenario.descripcion);

Explicación

  • Se escribe el nombre del cliente en el input del modal.
  • Campo de texto que describe la cotización. Se limpia y se escribe el contenido definido en el escenario.

Selección del producto por código

cy.get("#modalCrearCotizacion .cotizacion-select-input").click();
cy.get(
  `#modalCrearCotizacion .cotizacion-select-option[data-codigo="${escenario.producto}"]`
).click({ force: true });

Explicación

  • Se abre el selector de productos dentro del modal (clase .cotizacion-select-input).
  • Se selecciona la opción cuyo atributo data-codigo coincide con escenario.producto (SH229).
  • click({ force: true }) fuerza el clic si la opción está cubierta por algún overlay.

Edición de campos de la línea del producto

cy.get(
  '#modalCrearCotizacion input[name="productosCotizacion[1][descripcion]"]'
)
  .clear()
  .type(escenario.productoDescripcion);

cy.get('#modalCrearCotizacion input[name="productosCotizacion[1][cantidad]"]')
  .clear()
  .type(escenario.cantidad);

cy.get('#modalCrearCotizacion input[name="productosCotizacion[1][descuento]"]')
  .clear()
  .type(escenario.descuento);

cy.get(
  '#modalCrearCotizacion select[name="productosCotizacion[1][iva]"]'
).select(escenario.iva);

Explicación

  • Los inputs están nombrados como productosCotizacion[1][campo] (la fila 1 de productos).
  • Se limpia y escribe la descripción del producto en la línea agregada.
  • Se completan cantidad y descuento, y se selecciona la tasa de IVA desde el <select>.

Guardado y manejo de confirmación

cy.get("#modalCrearCotizacion div.modal-footer.bg-light")
  .find("button.btn.btn-success")
  .click();

// Esperar y cerrar SweetAlert2 usando el botón "Entendido"
cy.get(".swal2-container", { timeout: 10000 }).should("not.be.visible");

Explicación

  • Se identifica el botón de guardado en el footer del modal (clase .btn.btn-success) y se hace clic.
  • Se espera que aparezca la confirmación de SweetAlert2 y que desaparezca; should("not.be.visible") con timeout amplio da margen en caso de procesos asíncronos largos.

Validación final en la tabla de cotizaciones

cy.get(".table-cotizaciones")
  .find("span.badge.badge-light.border.font-weight-semibold.text-primary")
  .last()
  .invoke("text")
  .then((codigo) => {
    cy.get(".table-cotizaciones").should("contain.text", codigo);
  });

Explicación

  • Accede a la tabla donde se listan las cotizaciones: .table-cotizaciones.
  • Busca el span.badge... (badge que contiene el código o identificador de la cotización) y toma el último (la cotización recién creada).
  • Extrae el texto del badge (invoke("text")) y luego comprueba que la tabla contenga ese codigo.

Resultados de la ejecución de la prueba

Escenario Cliente IVA Producto Cantidad Descuento Estado
1 Cliente A no_aplica SH229 2 10 PASS
2 Cliente B 0 SH229 2 10 PASS
3 Cliente C 5 SH229 2 10 PASS
4 Cliente D 19 SH229 2 10 PASS