Test e2e en AngularJs

¿Hacéis pruebas de las aplicaciones punta a punta automatizadas? ¿No? pues deberías. Es posible automatizar las pruebas de una aplicación web y así olvidarnos de estar probando, en cada despliegue que hagáis, si alguien ha ‘roto’ algo.

Las pruebas punta a punta (end-to-end) sirven para testear si la ejecución de la aplicación es correcta de inicio a fin en un entorno real con acceso a la BBDD inclusive.

En este caso vamos a explicar cómo hacer las pruebas end-to-end con angularJs. Para ello Google nos proporciona la herramienta de node.js, protractor, que es un “wrapper” o elemento envolvente de selenium webdriver, el cual nos proporciona una API para acceder al navegador y poder manipularlo. Protractor proporciona algunas funcionalidades extras, además de las de selenium, que nos sirven como ayuda en Angular.Js, y además lanza los tests escritos en javascript.

Para ‘lanzar’ estos tests, protractor nos permite usar varios frameworks (jasmine, mocha o cucumber) que proporcionan la sintaxis, scaffolding y herramientas de reporting.

Nosotros vamos a explicar cómo funcionan los test e2e con protractor + cucumber.

Cucumber utiliza una sintaxis llamada Guerkin, que le permite describir el comportamiento del software sin detallar cómo se implementa ese comportamiento. Vamos al grano, pongamos un ejemplo:

Este sería nuestro fichero: gestion_usuarios.feature

Feature: Gestión de usuarios
Como administrador
Quiero poder crear, editar, actualizar y eliminar usuarios
Para que puedan loguear en el sistema

Scenario: Crear usuario
Given: Yo soy un usuario anónimo
When: Yo navego a "/"
Then: Yo debería ser redirigido a "/login"
When: Yo introduzco el texto "admin@test.com" en el campo "email"
And: Yo introduzco el texto "password" en el campo "password"
And: Yo pulso el botón "Acceder"
Then: Yo debería ser redirigido a “/users”
When: Yo pulso el botón “crear usuario”
Then: Yo debería ser redirigido a “/users/new”
When: Yo introduzco el texto “usuario1” en el campo “nombre”
And: Yo introduzco el texto “usuario1@gmail.com” en el campo “email”
And: Yo pulso el botón “guardar”
Then: Un mensaje modal con el texto “Guardado con exito” deberia aparecer

Esto podría ser un ejemplo real, donde podemos escribir los tests basándose en un conjunto de reglas (steps) definidas por nosotros, ya que utilizamos lenguaje natural. La definición de steps correspondiente en el nuestro fichero step_definitions.js sería:

// GIVEN

this.Given(/^Yo soy un usuario anónimo$/, clearCookies);


//WHEN

this.When(/^Yo navego a "([^"]*)"$/, browseToAngularUrl);

this.When(/^Yo introduzco el texto "([^"]*)" en el campo "([^"]*)"$/, inputText);

this.When(/^Yo pulso el botón "([^"]*)"$/, clickButton);


//THEN

this.Then(/^Yo debería ser redirigido a "([^"]*)"$/, redirectedToUrl);

this.Then(/^Un mensaje modal con el texto "([^"]*)" deberia aparecer$/, modalMsgShouldShow);

Donde clearCookies, browseToAngularUrl, inputText, clickButton, redirectedToUrl y modalMsgShouldShow son funciones javascript. Así pues la funciones quedarían definidas de la siguiente forma, en el mismo fichero step_definitions.js (u en otro archivo) para que nuestra definición de steps o diccionario quede más limpia.

 function clearCookies() {
    browser.manage().deleteAllCookies();
 }
 function browseToAngularUrl(url) {
    browser.get('/#' + url);
 }
function inputText(inputTextEntry, inputName) {
    return element(by.css('[name="' + inputName + '"]')).sendKeys(inputTextEntry);
}
function clickButton(buttonText) {
        // buttonText seria una funcion propia nuestra que buscaría el texto del botón.
        var button = element(byButtonText(buttonText));
        return button.click();
}
function redirectUrlContains(location) {
    browser.getCurrentUrl().then(function (url) {
      chai.expect(url).to.contain(location); 
// donde chai es una librería de afirmación que nos permite
// comparar la veracidad de una expresión.
    });
 }

function modalMsgShouldShow(text) {
    browser.waitForAngular().then(function(){
expect(element(by.css(‘modal’)).getText()).to.eventually.equal(text);
    });
 }

Como veis, protractor nos proporciona una API, para acceder al ‘browser’ o buscar un elemento con ‘element’ entre otras cosas. Una vez tuviéramos definidos todos nuestros steps, cualquiera podrá utilizarlos para crear nuevos tests.

Para lanzarlos bastará con crear una tarea en gulp o grunt, o directamente llamar a protractor con nuestro fichero de configuración de protractor y este abrirá un navegador y realizará todos los pasos definidos de manera automática.

Si todo va bien, en consola veremos todos nuestros pasos con el color verde. En los sucesivos posts explicaremos como configurar protractor.

Conclusiones

1. Cucumber nos proporciona una sintaxis de lenguaje natural, por lo que cualquiera puede crear nuevos test.
2. Una vez definido nuestro conjunto de steps, podemos reutilizarlos en cualquiera de nuestros proyectos, si construimos nuestro HTML de manera similar.
3. Nos permite utilizar metodologías de desarrollo basadas en comportamiento o BDD (behavior-driven development)
4. Permite lanzar nuestros test en entornos de integración continua (CI)  de tal forma que si no cumple los test, podemos cancelar el despliegue.
5. Podemos generar reports con los resultados de los tests para entregarlos al cliente.