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
- Navegar al módulo de Cotizaciones (
/cliente/cotizaciones). - Abrir el modal de crear Cotización
- Ingresar el nombre del cliente.
- Completar la descripción de la cotización.
- Seleccionar el producto por su código (SH229) desde el selector interno del modal.
- Editar la descripción del producto dentro de la línea de la cotización.
- Completar cantidad y descuento para el producto.
- Seleccionar la tasa de IVA correspondiente al escenario.
- Guardar la cotización.
- 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
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,descuentoeiva.
Iteración y test por escenario
escenarios.forEach((escenario) => {
it(`Debe crear cotización para ${escenario.cliente} con IVA ${escenario.iva}`, () => {
// ... flujo ...
});
});
Explicación
forEachitera sobre cada escenario y crea unit(...)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 conescenario.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
cantidadydescuento, y se selecciona la tasa deIVAdesde 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")contimeoutamplio 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 |