Introducción a los Tests End-to-End en Angular 5

¿Qué son los tests e2e?


Los tests e2e (end-to-end) son utilizados para poder probar si determinados flujos de tu aplicación están funcionando correctamente desde el inicio hasta el final. El propósito de los tests e2e es identificar dependencias y asegurar que la información es correctamente intercambiada entre componentes y sistemas. Los test e2e no reemplazan a los tests unitarios, pero son fundamentales para asegurar que los flujos de la aplicación no se rompen al integran nuevos cambios y tienen un papel fundamental en la Integación Continua.

En el caso concreto de las aplicaciones Angular, Protractor (http://www.protractortest.org) nos ofrece un framework que nos permite ejecutar tests e2e en un navegador real, como si un usuario estuviera navegando por nuestra aplicación.

¿Cómo funciona Protractor?


Protractor es un programa node.js que soporta los frameworks de testing Jasmine y Mocha. Normalmente en Angular Jasmine es el framework más popular (https://jasmine.github.io/).

Por otro lado, Protractor trabaja con Selenium, que es un framework de automatización de navegación en browsers, por lo tanto nos proporcionará la infraestructura necesaria para simular la interacción del usuario por nuestra aplicación. Selenium se compone de Selenium Server, WebDriver APIs y WebDriver.

Protractor Components Diagram

Cuando se ejecuta un test e2e estaría ocurriendo lo siguiente:

  1. El test es procesado usando la libería que expone el WebDriver API bindings. Esta información se envía a Selenium server vía http.

  2. Selenium Server se encarga de interceptar comandos y enviarlos a uno o varios browsers. Esta comunicación se realiza por JSON Webdriver Wire Protocol.

  3. El comando es interpretado por el navegador a través del Browser Driver.

Mi primer test e2e en Angular 5


Si estás empezando en Angular, lo más recomendable para empezar a realizar test e2e, es que inicies de un template de angular-cli, que ya te dará todo el entorno configurado y con un test de ejemplo.

Si no conoces angular-cli, es un interfaz de línea de comandos muy útil cuando trabajas con aplicaciones Angular. Si necesitas instalarlo echa un vistazo en https://cli.angular.io/.

Para iniciar un proyecto nuevo con angular-cli en un cmd tecleamos:
 ng new e2e-prueba

verás que dentro de la carpeta e2e-prueba, tienes creada otra carpeta e2e. Aquí es donde deberían ir todos tus tests e2e. Vamos a echarle un ojo al ejemplo que nos ha generado. Primero tenemos el fichero de Page Object app.po.ts:

app.po.ts.jpeg

Este fichero nos proporciona una clase que representa a la página principal de la aplicación y nos ofrece dos métodos: navigateTo (para ir a la home de la app) y getParagraphText (que mediante un selector con sintaxis jQuery devuelve el texto que haya en el encabezado de nuestra página).

Por otro lado, tenemos el test e2e en el fichero app.e2e-spec.ts.

app.e2e-spec.ts.JPG

En este fichero con sintaxis Jasmine, tenemos el comando describe que nos da la descripción del test, el comando beforeEach, que se ejecutará siempre antes de cada uno de nuestros tests y el test dentro del comando it. Como se puede observar dentro del test, utilizando la clase AppPage se navega primero a la home con el método navigateTo, y se pide el texto del encabezado, comprobando que sea igual a "Welcome to app!".

Para ejecutar el test basta con escribir en la consola:
ng e2e

Veremos que nos ejecuta un navegador y acto seguido nos arroja los resultados, con un informe de que el test se pasó correctamente: test-e2e-execution.JPG

Y hasta aquí la introducción a los tests e2e en Angular 5 y Protractor, espero que os haya resultado útil. Si quieres ver más ejemplos puedes ir a http://www.protractortest.org/#/tutorial.

A futuro me gustaría escribir otro artículo con algún ejemplo más complejo o más centrado en aspectos de configuración de Protractor.


Comments

Post a Comment

Popular posts from this blog

Building Micro-Frontends with Single-Spa

Image
Introduction Micro-services architecture is becoming trendy since it is a suitable option many projects, specially those that are complex and we want to be able spilt our business logic into different services that can be built and deliver independently. In spite of the fact that micro-services architectures are more complex, they increase the resilience of your system and increase the time-to-market delivery, which can be crucial for many companies. But it is not all about services and backend. With the introduction of single page applications (SPAs), we can build fully-functional user interfaces that can work independently in the browser. And here we should ask ourselves the same questions as for backend applications: Is my SPA becoming a huge monolith? Would I like to deliver functional modules independently? If you using micro-services, is there a relation between my services and your UI? Do we want to have functional teams that can deliver new features (frontend+backend) independe
Read more

Why you should migrate your old csproj to SDK format

Image
Introduction  With the introduction of Visual Studio 2017, the format used for csproj was updated including several advantages. This new format will be used when you create a new .Net Core project or .Net Standard library. In spite of the fact that VS2017 continues supporting old csproj format, you can migrate your old projects to SDK format. As a result, you will have the following benefits: Cleaner csproj files. With new format, a lot of things can be omitted, so your csproj files will be cleaner. Files are included using a wildcard , instead of including every single file.  Solution project references are simplier . NuGet reference packages as PackageReferences , so you won't need packages.config and you will be able to use wildcard in your references (for example, 1.0.*). NuGet package definition as a part of the project file. You won't need more nuspec files. Definition of AssemblyInfo attributes in csproj , you won't need more AssemblyInfo.cs files. In ad
Read more

AWS assuming role + MFA with pulumi (and other applications)

Image
Introduction In AWS, managing your IAM in a centralized account is a good practice, so then you can assume a role to access to other accounts without need of duplicating users. You can find more info about this approach in this article . In addition, for security reasons, it is highly recommended to enable MFA (Multi-factor Authentication), so you need a device to generate a temporary code to get access. In the image below it is showed how assume role with MFA works, but you also have an article about MFA in this link . This approach is really useful and most of the configuration can be automated with pulumi (or other providers like terraform or CloudFormation). And once it is configured, you can switch your role and get access to other accounts with a few clicks.  However, when it comes to external software such us pulumi, getting access assuming a role and using MFA might not be too straightforward. In this article we will see how this can be configured and how we can easily refresh
Read more