¿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 de ejemplo. La aplicación que se va a probar está compuesta por un módulo principal AppModule y dos módulos LikeModule y PostModule.
En el módulo Like hay un componente LikeComponent que despliega dos botones (Like y Dislike) y un texto que representa el número de likes.
En el módulo Post hay un componente PostListComponent que despliega un listado de posts. Este componente invoca un servicio http para obtener los posts.
La apariencia final de la aplicación es la siguiente:
Imagen 1. Apariencia de la aplicación
¿Qué necesita?
Es necesario que conozca:
- La estructura de un proyecto de Angular: módulos, componentes, servicios.
- La funcionalidad de Angular-Cli.
- El concepto y propósito de las pruebas de integración.
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 Protractor, es un framework de pruebas e2e para aplicaciones escritas en Angular. Protractor ejecuta pruebas contra una aplicación que se ejecuta en un navegador real, utilizando Selenium (un entorno de pruebas de software para aplicaciones basadas en la web, también conocido como WebDriver).
En otras palabras, con Protractor 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).
Las pruebas end-to-end se especifican en la carpeta e2e que se encuentra en la raíz del proyecto.
En esta carpeta está el archivo protractor.conf.js que será el que se ejecuta con protractor para correr las pruebas.
Luego en la carpeta src estarán los archivos con las suites de pruebas. Por defecto, esta carpeta contiene dos archivos: app.po.ts y app.e2e-spec.ts.
El primero corresponde a lo que se denomina el Page Object Class, el cual permite describir una página web a un alto nivel.
El segundo corresponde a una prueba específica que comprueba que la página despliega un mensaje específico.
En la prueba que vamos a elaborar, se espera que cuando el usuario haga clic sobre el botón Likes, el número de likes asociados al post se incremente en uno.
it('Click on Like button', () => {
element(by.id('btnLike1')).click().then(function () {
expect(element(by.id('likes1')).getAttribute("innerText")).toBe("1")
});
});Para esto hacemos uso del método element, que busca en el DOM un elemento con el id btnLike1. Es importante aclarar que cada vez que se crea un post, se le asocia un botón con un id único. Para el caso de los botones Like, el id está conformado por la cadena btnLike mas el id del post. En el caso del botón Dislike, el id está conformado por la cadena btnDislike más el id del post.
Una vez obtenido el elemento, se llama al método click. Esto simula el evento en el cual el usuario hizo clic sobre ese botón. Luego se llama a una función anónima como callback.
Al hacer clic, se espera que el elemento <span> que está después del botón btnLike1 contenga, en su atributo innerText el valor 1. Por eso se busca el elemento con el id likes1 que corresponde al span del post 1.
Para la ejecución de la prueba debe asegurarse de que protractor está instalado. Para esto, desde una consola ejecute el comando protractor --version. Esto deberá generar una salida como Version 5.4.3.
En caso de que Protractor no esté instalado, ejecute el comando npm install -g protractor.
Luego, ejecute webdriver-manager update. Esto descargará los binarios necesarios para ejecutar el servidor Selenium.
Para iniciar el servidor Selenium ejecute webdriver-manager start.
Esto inicia un servidor que escucha peticiones en la URL http://localhost:4444.
Finalmente, desde otra consola ingrese a la carpeta e2e y ejecute el comando protractor protractor.conf.js. Esto abrirá una nueva ventana del navegador por defecto. Ejecutará la prueba y mostrará los resultados.
El código a continuación muestra que los dos tests (el que viene por defecto y el nuevo donde se prueba el comportamiento del botón Like) se ejecutaron correctamente.
[16:09:13] I/direct - Using ChromeDriver directly...
Jasmine started
workspace-project App
✓ should display welcome message
✓ Click on Like button
Executed 2 of 2 specs SUCCESS in 3 secs.
[16:09:20] I/launcher - 0 instance(s) of WebDriver still running
[16:09:20] I/launcher - chrome #01 passed