Testing en Angular2 utilizando Angular-CLI

  • por Thomas Vogt

Introducción

A medida que un desarrollo crece y se vuelve cada vez más complejo, se hace difícil evitar que las partes nuevas interfieran con las viejas. Puede ocurrir que al incorporar una funcionalidad nueva, una antigua deje de funcionar correctamente y no nos demos cuenta de lo que está pasando.

Esto se puede evitar generando tests, los que verifican que cada parte de la aplicación o programa funcione como esperamos.

En este tutorial veremos como crear simples tests unitarios y de integración para Angular 2 utilizando Angular-CLI y los componentes incluidos en este.

 

Instalación

Para poder instalar Angular-CLI se necesita Node 4 o superior, además de NPM 3 o superior.

Si se cumplen los prerrequisitos, basta con instalar utilizando el comando:

npm install -g angular-cli

Una vez instalado podemos crear un proyecto nuevo:

ng new [nombre del proyecto]

Para más funcionalidades del CLI revisa la documentación.

 

Tests Unitarios

Este tipo de tests verifica que los métodos tengan el comportamiento que se desea. Por ejemplo, si tenemos un DemoComponent con una función testableFunction() que no debe retornar nunca null, un simple test en jasmine que verifique esto sería de la forma:

it('Should not return null', () => {
  let result = testableFunction();
  expect(result).not.toBe(null);
});

El test debe estar en el archivo demo.component.spec.ts, en la misma carpeta que demo.component.ts.

Luego, para correr los tests, basta con ingresar el comando:

ng test

Lo que nos debería arrojar un resultado del estilo:

31 01 2017 10:47:08.851:WARN [karma]: No captured browser, open http://localhost:9876/
31 01 2017 10:47:08.859:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
31 01 2017 10:47:08.859:INFO [launcher]: Launching browser Chrome with unlimited concurrency
31 01 2017 10:47:08.897:INFO [launcher]: Starting browser Chrome
31 01 2017 10:47:10.021:INFO [Chrome 56.0.2924 (Linux 0.0.0)]: Connected on socket /#E7RZF6p26LxylGw9AAAA with id 52852908
Chrome 56.0.2924 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.397 secs / 0.389 secs)

Con lo que nos aseguramos que nuestra función opera como queremos.

Por otra parte, si hubiese algún problema con nuestra función, la última línea del resultado sería:

Chrome 56.0.2924 (Linux 0.0.0) DemoComponent Should not be null FAILED
	Expected null not to be null.

Y sabríamos que hay un inconveniente.

 

Tests de Integración

Para testear funcionalidades complejas o flujos que engloban varios métodos, no basta con tests unitarios, sino que se hacen necesarios los tests de integración. Los tests de integración permiten simular el uso de la aplicación y chequear distintos parámetros que se debiesen cumplir.

Los tests de integración deben estar en la carpeta e2e del proyecto. En este caso haremos un test para el flujo de inicio de sesión, por lo que lo llamaremos login.e2e-spec.ts y agregamos en el documento el siguiente test:

it('Should log in', () => {
  browser.get('/login');
  element(by.css('input[name=email]')).sendKeys('test@email.com');
  element(by.css('input[name=password]')).sendKeys('testpassword');
  element(by.css('button[name=submit]')).click();
  expect(element(by.css('input[name=email]')).isPresent()).toBeFalsy();
});

Los tests de integración dan instrucciones al navegador para que este las realice. En este caso le damos las credenciales de inicio de sesión y luego le pedimos que confirme el inicio de sesión. Si la vista resultante contiene los campos de inicio de sesión, quiere decir que el inicio de sesión falló, mientras que si el 'input[name=email]' ya no está presente, quiere decir que el inicio de sesión fue exitoso.

Para correr los tests de integración utilizando Protractor (la opción por defecto incluida en el CLI), basta con ingresar el comando:

ng e2e

Lo cual abrirá una nueva ventana del navegador que ejecutará las instrucciones especificadas en el test. Una vez finalizados, en la consola mostrará el resultado.

En este caso:

.  Demo App
    ✓ Should Log In



1 specs, 0 failures
Finished in 26.894 seconds

Executed 1 of 1 specs SUCCESS in 27 secs.
[11:40:34] I/launcher - 0 instance(s) of WebDriver still running
[11:40:34] I/launcher - chrome #01 passed

Lo que quiere decir que el test fue exitoso.

 

Para más ejemplos de uso, puedes revisar las documentaciones señaladas al final.

 

Referencias

Documentación Angular 2

angular-CLI

Jasmine

Karma

Protractor