Menu

Pruebas unitarias: Configuración de entorno

testingdemos - August 02, 2017 por Nicolas Molina
ionic3.6.0ionic-native3.12.1ionic-app-scripts2.1.3cordova-cli7.0.1ionic-cli3.6.0

Vamos a escribir pruebas unitarias para aplicaciones en Ionic y para lograrlo debemos configurar y preparar un conjunto de herramientas en nuestro proyecto, en este artículo explicaremos como preparar este entorno fácilmente.

Recuerda nuestro artículo anterior sobre conceptos Testing en Angular/Ionic.

Necesitaremos el siguiente conjunto de herramientas:

Karma (Test Runner)

https://karma-runner.github.io/

Karma es el encargado de correr todas las pruebas unitarias que escribamos y como resultado nos da un reporte que nos muestra las pruebas que pasaron y las pruebas que fallaron. En la mayoría de veces para ejecutar las pruebas unitarias lanza un navegador para correr las pruebas unitarias.

Jasmine

https://jasmine.github.io/

Jasmine es un framework para escribir pruebas unitarias, nos facilita herramientas para poder escribir pruebas de forma controlada y tiene funciones para hacer verificaciones, en este artículo Pruebas unitarias: Introducción a Jasmine hablamos más a profunidad sobre Jasmine.

Angular Testing

Desde la versión de Angular 2 en adelante Angular provee un conjunto de herramientas para poder preparar las pruebas unitarias y de esta manera podemos escribir pruebas fácilmente para los artefactos de Angular / Ionic, como componentes, directivas, pipes, providers etc.

Cuando iniciamos un proyecto con Angular CLI al momento de crear el proyecto con ng start nombre-proyecto, nos entrega un proyecto ya preparado para ejecutar y escribir pruebas unitarias con Karma y Jasmine ya configurados para trabajar, pero en el caso de Ionic no es así, cuando iniciamos un proyecto con Ionic CLI, no tiene por defecto este ambiente configurado, por esta razón los vamos a explicar como configurar nuestro Karma + Jasmine en un proyecto con Ionic.

Configurando Ionic + Karma + Jasmine

Paso 1:

Instalar las herramientas necesarias en nuestro proyecto, debemos descargar como dependencias de desarrollo a Karma y Jasmine más un conjunto de utilidades para preparar el ambiente de testing en proyectos en Ionic. Para instalar todo esto solo ejecuta el siguiente comando completo en un terminal:

npm install karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-mocha-reporter karma-sourcemap-loader karma-webpack null-loader jasmine ts-loader ts-node angular2-template-loader html-loader @types/jasmine @types/jasminewd2 --save-dev

Son bastantes nuevas dependencias que debemos instalar en nuestro proyecto pero la bandera —save-devnos asegura que estas dependencias solo se usan en el momento de desarrollo y no como parte del proyecto en producción.

Paso 2:

Vamos a crear una carpeta nueva llamada testing donde tendremos la configuración de Karma y Webpack con Ionic, tendremos los siguientes tres archivos:

  1. testing/karma-test-shim.js
  2. testing/karma.conf.js
  3. testing/webpack.test.js

Como son archivos largos, ponemos el enlace directo a un repositorio para poder copiar y pegar.

Paso 3:

Ahora vamos a agregar un script para correr las pruebas unitarias con un solo comando en la terminal para esto debemos modificar el archivo package.json y agregar un nuestro script llamado test.

...
 "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test": "karma start ./testing/karma.conf.js"
},
...

Ahora con esta configuración podemos correr en nuestra terminal el comando:

npm test

Y nos arroja algo como esto:

Esto significa que todo nuestro ambiente esta bien configurado sin embargo aun no hemos escribo ninguna prueba unitaria, Karma identifica los archivos terminados en *.spec.ts para correr pruebas y por ahora no tenemos ningún archivo *.spec.ts no identifica ninguna prueba para correr.

Vamos a crear el siguiente archivo:

src/test.spec.ts

Con el siguiente contenido:

describe("test", ()=>{
  it("test for an sum", ()=>{
    expect(5+5).toEqual(10);
  });
});

Y si volvemos a ejectar npm test, veremos los siguiente:

¡Genial! esta corriendo nuestra prueba, eso quiere decir que nuestro entorno quedo listo para trabajar.

¿Las sentencias describe, it y expect las viste antes? estas sentencias hacen parte de Jasmine, si quieres saber más hacer de Jasmine mira nuestro artículo Pruebas unitarias: Introducción a Jasmine

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

Y luego

ionic cordova prepare

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!