Tutorial: Pruebas UI con Cypress ‐ Maestro Detalle

Tutorial de Pruebas de UI con Cypress en una Aplicación Angular: Componente Detalle de Libro

En este tutorial, aprenderemos a utilizar Cypress para realizar pruebas de interfaz de usuario en una aplicación Angular. Nos enfocaremos en realizar pruebas al componente de Detalle de Libro del proyecto de referencia del curso "Bookstore".

Imagen 1. Componente de detalle de libro que aparece al hacer clic en una tarjeta de libro

Cubriremos dos requisitos específicos:

1. Verificar que al hacer clic en cualquier tarjeta de libro, aparece el componente de detalle (en este caso, aparece encima de la lista de tarjetas de libros, no en una nueva ruta).
2. Comprobar que el componente de detalle muestra la siguiente información: título del libro, autores, ISBN, fecha de publicación, editorial, descripción y la imagen del libro.

Prerrequisitos

• Tener instalados Node.js y npm.
• Haber clonado localmente los repositorios de backend y frontend de la aplicación Bookstore.
• Haber ejecutado npm install cypress en una terminal de comandos dentro del proyecto frontend.
• Haber configurado Cypress en el proyecto (si no lo has hecho, sigue el Tutorial de Pruebas con Cypress para el Componente Listar Books).

Configuración Inicial de Cypress

1. Inicializar Cypress en el proyecto Angular (si aún no lo has hecho):

   Navega al directorio raíz de tu proyecto Angular y ejecuta:

   npx cypress open

   Este comando inicializará Cypress y creará una carpeta cypress con archivos de ejemplo.

2. Estructura de Directorios:

   La carpeta cypress contiene:

   • fixtures: Datos estáticos para utilizar en las pruebas.
   • integration o e2e: Lugar donde escribiremos las pruebas.
   • plugins: Plugins para extender funcionalidades.
   • support: Comandos y configuraciones globales.

Codificación de las Pruebas

Para crear un nuevo archivo de pruebas e2e, luego de ejecutar el comando npx cypress open, selecciona la opción de "E2E Testing" y luego la opción de "Crear nuevo spec" (si necesitas mayor claridad en este paso, revisa el Tutorial de Pruebas con Cypress para el Componente Listar Books).

Asigna al archivo el nombre book-detail.cy.ts.

Para editar el test de manera cómoda, puedes hacerlo desde un IDE como Visual Studio Code.

Test 1: Verificar que al hacer clic en cualquier tarjeta, aparece el componente de detalle

describe('Detalle de Libro', () => {
  beforeEach(() => {
    cy.visit('http://localhost:4200/'); // Ruta principal de la aplicación
  });

  it('Should show detail component when clicking on a book card', () => {
    cy.get('.book-card img').first().click(); // Hacer clic en la primera tarjeta de libro
    cy.get('app-book-detail').should('be.visible'); // Verificar que el componente de detalle es visible
  });
});

Resultado esperado

Imagen 2. Resultado esperado después de la ejecución de la primera prueba en Cypress

Explicación:

• cy.get('.book-card img').first().click();: Selecciona la imagen de la primera tarjeta de libro y simula un clic (según el HTML del componente Detalle, el evento click está en la imagen de la tarjeta).
• cy.get('.book-detail').should('be.visible');: Verifica que el componente de detalle tenga la clase book-detail y sea visible.

Test 2: Verificar que el componente de detalle muestra la información correcta

Para la correcta ejecución de esta segunda prueba, es necesario asignarle selectores a los diferentes tags o elementos HTML que componen el archivo 'book-detail.component.html'. Estos selectores son de utilidad para que Cypress pueda saber qué elemento debe buscar y analizar dentro de los snapshot que toma durante las pruebas.

Explicación de los Selectores Utilizados

Basándonos en el archivo HTML del componente detalle de libro: book-detail.component.html, los selectores CSS que se han elegido y añadido son los siguientes:

• app-book-detail: Selector general del componente de Detalle de los libros, está definido en 'book-detail.component.ts'.
• .book-title: Elemento que contiene {{ bookDetail?.name }}.
• .book-authors: Elementos que contienen los autores del libro.
• .book-isbn: Elemento que contiene {{ bookDetail?.isbn }}.
• .book-publishing-date: Elemento que contiene {{ bookDetail?.publishingDate }}.
• .book-editorial: Elemento que contiene {{ bookDetail?.editorial?.name }}.
• .book-description: Elemento que contiene {{ bookDetail?.description }}.
• .book-detail img: La imagen del libro.

En el caso de este tutorial, se añadieron las siguientes clases en el archivo HTML del componente para asignar los selectores anteriores:

<p class="h3 p-3 book-title">{{ bookDetail?.name }}</p>
<!-- ... -->
<dt>Authors</dt>
<dd class="caption book-authors" *ngFor="let author of bookDetail?.authors">
  <a routerLink="/authors/{{ author.id }}">{{ author.name }}</a>
</dd>
<!-- ... -->
<dt>ISBN</dt>
<dd class="book-isbn">{{ bookDetail?.isbn }}</dd>
<!-- ... -->
<dt>Publishing Date</dt>
<dd class="book-publishing-date">{{ bookDetail?.publishingDate }}</dd>
<!-- ... -->
<dt class="bold">Editorial</dt>
<dd class="caption book-editorial">{{ bookDetail?.editorial?.name }}</dd>
<!-- ... -->
<dt class="bold">Description</dt>
<dd class="book-description">{{ bookDetail?.description }}</dd>

Definición de la segunda prueba

  it('El componente de detalle debe mostrar la información del libro', () => {
    cy.get('.book-card img').first().click(); // Hacer clic en la primera tarjeta de libro
  
    // Verificar que el título del libro se muestra
    cy.get('app-book-detail .book-title').should('be.visible').and('not.be.empty');
  
    // Verificar que los autores se muestran
    cy.get('app-book-detail .book-authors').should('be.visible').and('not.be.empty');
  
    // Verificar que el ISBN se muestra
    cy.get('app-book-detail .book-isbn').should('be.visible').and('not.be.empty');
  
    // Verificar que la fecha de publicación se muestra
    cy.get('app-book-detail .book-publishing-date').should('be.visible').and('not.be.empty');
  
    // Verificar que la editorial se muestra
    cy.get('app-book-detail .book-editorial').should('be.visible').and('not.be.empty');
  
    // Verificar que la descripción se muestra
    cy.get('app-book-detail .book-description').should('be.visible').and('not.be.empty');
  
    // Verificar que la imagen del libro se muestra
    cy.get('app-book-detail img').should('be.visible').and('have.attr', 'src').and('not.be.empty');
  });

Resultado esperado

Después de ejecutar las pruebas, deberían aparecer como exitosas en la interfaz de Cypress.

Imagen 2. Resultado esperado luego de ejecutar las pruebas del componente de detalle

Versión final de la prueba e2e creada

El archivo de prueba book-detail.cy.ts debería verse de la siguiente forma al final:

describe('Detalle de Libro', () => {
  beforeEach(() => {
    cy.visit('http://localhost:4200/'); // Ruta principal de la aplicación
  });

  it('Should show detail component when clicking on a book card', () => {
    cy.get('.book-card img').first().click(); // Hacer clic en la primera tarjeta de libro
    cy.get('app-book-detail').should('be.visible'); // Verificar que el componente de detalle es visible
  });

  it('El componente de detalle debe mostrar la información del libro', () => {
    cy.get('.book-card img').first().click(); // Hacer clic en la primera tarjeta de libro
  
    // Verificar que el título del libro se muestra
    cy.get('app-book-detail .book-title').should('be.visible').and('not.be.empty');
  
    // Verificar que los autores se muestran
    cy.get('app-book-detail .book-authors').should('be.visible').and('not.be.empty');
  
    // Verificar que el ISBN se muestra
    cy.get('app-book-detail .book-isbn').should('be.visible').and('not.be.empty');
  
    // Verificar que la fecha de publicación se muestra
    cy.get('app-book-detail .book-publishing-date').should('be.visible').and('not.be.empty');
  
    // Verificar que la editorial se muestra
    cy.get('app-book-detail .book-editorial').should('be.visible').and('not.be.empty');
  
    // Verificar que la descripción se muestra
    cy.get('app-book-detail .book-description').should('be.visible').and('not.be.empty');
  
    // Verificar que la imagen del libro se muestra
    cy.get('app-book-detail img').should('be.visible').and('have.attr', 'src').and('not.be.empty');
  });
});

Ejecución de las Pruebas

Para ejecutar las pruebas en modo interactivo, como se mostró a lo largo del tutorial (con la interfaz gráfica de Cypress), ejecuta en una terminal:

npx cypress open

y sigue los pasos dados anteriormente.

Para ejecutar las pruebas en modo headless (sin interfaz gráfica), ejecuta en una terminal:

npx cypress run

Y verifica que los resultados sean todos exitosos.

Opciones por Explorar

• Uso de Fixtures: Si deseas simular datos o respuestas de API, puedes utilizar fixtures para proporcionar datos estáticos a tus pruebas.
• Comandos Personalizados: Puedes crear comandos personalizados en cypress/support/commands.js para reutilizar código común.
• Esperas y Sincronización: Cypress maneja automáticamente las esperas, pero si necesitas esperar por solicitudes o elementos específicos, utiliza cy.wait() y cy.intercept().

Recursos Adicionales

• Documentación Oficial de Cypress
• Cypress para Aplicaciones Angular

---

¡Con esto, has aprendido cómo implementar pruebas básicas para el componente de detalle de libro en tu aplicación Angular utilizando Cypress! Estas pruebas aseguran que el componente de detalle se muestra correctamente y que toda la información esencial del libro está presente. Recuerda revisar también el tutorial de pruebas con Cypress para el componente de Listar Libros, el cual se encuentra en la wiki del curso.

---

Autores

Versión 1: Octubre de 2024

• Alonso Hernández Tavera ([email protected])