¿Qué aprenderá?

Al finalizar este tutorial el estudiante estará en capacidad de desarrollar pruebas de extremo a extremo (end to end o e2e) para una aplicación Angular.

¿Qué construirá?

Un conjunto de pruebas e2e y para una aplicación Angular.

¿Qué necesita?

Es necesario que conozca:

  1. La estructura de un proyecto de Angular: módulos, componentes, servicios.
  2. La funcionalidad de Angular-Cli.
  3. El concepto y propósito de las pruebas de e2e.

Las pruebas end-to-end, también conocidas como pruebas de extremo a extremo son un tipo de prueba de software que valida el sistema de software junto con su integración con interfaces externas.

El propósito de la prueba de extremo a extremo es replicar un escenario completo de producción.

Para realizar las pruebas usaremos Cypress, un framework de pruebas e2e. Con Cypress se simula la interacción entre un usuario y el navegador (por ejemplo, hacer clic en un botón, hacer drag-and-drop en un elemento de la página, entre otras).

Para instalar Cypress en el proyecto ejecute el comando ng add @cypress/schematic. En la terminal se pedirá la confirmación para instalarlo, también preguntará si quiere utilizar el comando ng e2e para la ejecución de las pruebas y por último, preguntará si quiere agregar ‘Cypress component testing'. Puede responder "yes" a todas las preguntas.

El comando creará en el proyecto una nueva carpeta denominada cypress la cual contiene:

En la carpeta integration se creó un archivo spec.ts con una prueba por defecto:

describe('My First Test', () => {
  it('Visits the initial project page', () => {
    cy.visit('/')
    cy.contains('app is running!')
  })
})

En la prueba se visita la ruta inicial y se verifica que en DOM existan los textos Welcome y sandbox app is running!. Como estos valores no están en la aplicación de ejemplo vamos a actualizar el contenido por el siguiente:

describe('My First Test', () => {
 it('Visits the initial project page', () => {
   cy.visit('/')
   cy.contains('Bookly')
 })
})

Para ejecutar la prueba debe detener el servidor y ejecutar el comando ng e2e. Esto compila la aplicación y abrirá una ventana en la que se le pide al usuario que seleccione el navegador a utilizar.

Podrá ver como se abre una ventana del navegador seleccionado con una interfaz de Cypress. Ahora seleccione el archivo de pruebas.

Haga clic en la única prueba existente y ejecútela.

Vamos a crear una nueva prueba en la que navegaremos al listado de autores y verificaremos que aparezca el texto Stephen King que corresponde al nombre de uno de los autores que retorna el API. 

describe('Test Stephen King', () => {
 it('Visits the initial project page', () => {
   cy.visit('/authors/list')
   cy.contains('Stephen King')
 })
})

Diríjase a la ventana del navegador que está ejecutando Cypress y revise el resultado.

Vamos a crear un set de pruebas las cuales tendrán una preparación denotada por beforeEach con la cual se visitará la página de crear un autor usando el camino de la interfaz de navegación. 

beforeEach(() => {
    cy.visit('/')
    cy.contains('Authors').click()
    cy.contains('Create').click()
  })

En la primera prueba, (it('Ir a la pagina de crear Author'...) comprobará que se haya redirigido a la sección correcta.

it('Ir a la pagina de crear Author', () => {
    cy.url().should('include', '/authors/create')
})

La segunda prueba, (it('Llenar el formulario y enviar'...) llenará el formulario, dará click en el botón de enviar y revisará que aparezca el aviso de éxito de toastr.

it('Llenar el formulario y enviar', () => {
    cy.get('#name').type('Billy McBucket')
    cy.get('#image').type('https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.infobae.com%2Fcripto247%2Faltcoins%2F2018%2F07%2F08%2Fdogecoin-que-hoy-vale-mas-de-300-millones-comenzo-por-el-meme-de-este-perro%2F&psig=AOvVaw3INeU-LRs6EaKaQoio041u&ust=1708717459547000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCNiKgt7av4QDFQAAAAAdAAAAABAE')
    cy.get('#birthDate').type('06/11/2002')
    cy.get('#description').type('The greatest author ever.')
    cy.get('.btn-primary').click()
    cy.contains('Author created')
  })

La última prueba, (it('Llenar el formulario y borrar'...) llenará el formulario, dará click en el botón de limpieza del formulario y revisará que esté vacío el campo de nombre.

it('Llenar el formulario y borrar', () => {
    cy.get('#name').type('Billy McBucket')
    cy.get('#image').type('https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.infobae.com%2Fcripto247%2Faltcoins%2F2018%2F07%2F08%2Fdogecoin-que-hoy-vale-mas-de-300-millones-comenzo-por-el-meme-de-este-perro%2F&psig=AOvVaw3INeU-LRs6EaKaQoio041u&ust=1708717459547000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCNiKgt7av4QDFQAAAAAdAAAAABAE')
    cy.get('#birthDate').type('06/11/2002')
    cy.get('#description').type('The greatest author ever.')
    cy.get('.btn-danger').click()
    cy.get('#name').should('have.value', '')
  })

A continuación puede ver el set de pruebas completo.

describe('Prueba Formulario', () => {
  beforeEach(() => {
    cy.visit('/')
    cy.contains('Authors').click()
    cy.contains('Create').click()
  })
  it('Ir a la pagina de crear Author', () => {
    cy.url().should('include', '/authors/create')
  })
  it('Llenar el formulario y enviar', () => {
    cy.get('#name').type('Billy McBucket')
    cy.get('#image').type('https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.infobae.com%2Fcripto247%2Faltcoins%2F2018%2F07%2F08%2Fdogecoin-que-hoy-vale-mas-de-300-millones-comenzo-por-el-meme-de-este-perro%2F&psig=AOvVaw3INeU-LRs6EaKaQoio041u&ust=1708717459547000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCNiKgt7av4QDFQAAAAAdAAAAABAE')
    cy.get('#birthDate').type('06/11/2002')
    cy.get('#description').type('The greatest author ever.')
    cy.get('.btn-primary').click()
    cy.contains('Author created')
  })
  it('Llenar el formulario y borrar', () => {
    cy.get('#name').type('Billy McBucket')
    cy.get('#image').type('https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.infobae.com%2Fcripto247%2Faltcoins%2F2018%2F07%2F08%2Fdogecoin-que-hoy-vale-mas-de-300-millones-comenzo-por-el-meme-de-este-perro%2F&psig=AOvVaw3INeU-LRs6EaKaQoio041u&ust=1708717459547000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCNiKgt7av4QDFQAAAAAdAAAAABAE')
    cy.get('#birthDate').type('06/11/2002')
    cy.get('#description').type('The greatest author ever.')
    cy.get('.btn-danger').click()
    cy.get('#name').should('have.value', '')
  })
})

Diríjase a la ventana del navegador que está ejecutando Cypress y revise el resultado.