Hace algún tiempo, hablamos sobre la importancia de hacer testing y los pecados capitales del testing de apps. A estas alturas, nadie discutirá que el testeo es importantísimo. Hoy, nuestro Slashboy Gerard Riera, Software Developer de Slashmobility, nos trae un tutorial sobre unit testing con Karma y Jasmine. Con él aprenderemos qué es el Unit Testing, cuáles son sus beneficios y cómo llevarlo a cabo. Vamos a por ello.
¿Qué es el Unit Testing?
El Unit Testing, consiste en probar pequeñas unidades de código de los componentes de nuestra App, para corroborar el buen funcionamiento del mismo.
¿Cuáles son los beneficios de usar Unit Testing?
- Mejora el diseño de tu código: empezar a escribir una función sin primero haber pensado mucho en su diseño, es un fallo muy común entre desarrolladores. Usar Tests Unitarios, va a hacer que el desarrollador le dé muchas más vueltas a la hora de diseñar el código que está escribiendo.
- Permite refactorización: ya que con los tests unitarios, nos aseguramos de que nuestro código funcione correctamente. Podemos añadir nuevas funcionalidades mucho más fácilmente, con la certeza de que no añadimos más bugs.
- Añadir nuevas funcionalidades sin romper nada: cuando añadamos nuevas funcionalidades a nuestro código, podemos ejecutar tests unitarios para asegurarnos de que no estamos rompiendo ninguna otra parte de nuestra app.
Crear un proyecto Angular con Karma y Jasmine
Utilizando angular-cli, Karma y Jasmine ya vienen instalados y configurados para que podamos empezar a trabajar con los tests unitarios.
Empecemos creando el proyecto
1.- npm install -g @angular/cli
2.- ng new angular-unit-testing
Si se usa cualquier otro framework, por ejemplo Ionic, vamos a tener que instalar y configurar Karma y Jasmine nosotros mismos. Si estamos trabajando en un proyecto que no sea Angular, para instalar Karma y Jasmine, tecleamos esta línea en la terminal:
npm-install karma-jasmine
Estas son las dependencias que se añaden al proyecto una vez se hayan instalado Karma y Jasmine:
Sin embargo, los más importantes son:
jasmine-core: Jasmine es el framework que vamos a utilizar para crear nuestros tests unitarios. Tiene varias funcionalidades para que podamos crear diferentes tipos de tests.
karma: Karma es un ejecutor de tareas para nuestros tests. Usa un archivo de configuración para preparar el archivo de puesta en marcha, los reportadores, el framework para hacer tests y el navegador, entre otras cosas.
El resto de dependencias son principalmente reportadores para nuestros tests, herramientas para usar Karma y Jasmine, y el lanzador del navegador.
Si nos fijamos atentamente, cuando ya tengamos nuestro proyecto creado y configurado correctamente con Karma y Jasmine, vemos que, por cada componente que hayamos creado en nuestro proyecto, también se ha creado un archivo llamado nombre-componente.spec.ts. Este es el archivo que vamos a usar para hacer tests unitarios:
Creando nuestros primeros tests
Ahora que ya lo tenemos todo instalado y configurado, nos dirigimos al componente que queramos testear (en nuestro caso vanos a ir al componente principal de la app), y abrimos el archivo nombre-componente.spec.ts.
Primero, vamos a crear un test para comprobar que el componente se crea correctamente:
Vamos a desmenuzar este pequeño trozo de código:
En la primera línea, añadimos la descripción que queramos que nuestro test tenga. Esta línea es meramente informativa, es para que sepamos qué test estamos haciendo.
La constante fixture, es una copia del componente que queremos testear; en este caso AppComponent.
Luego creamos una constante que se llame app. Esta constante va a ser una instancia del componente.
Por último, con la función expect(app).toBeTruthy(), estamos comprobando que el componente se haya creado correctamente.
Supongamos que en nuestro componente, tenemos un elemento HTML, el cual es el título del componente, y este elemento HTML, tiene enlazada una variable que se llama “title”, la cual tiene como valor “My Web App”. Nosotros queremos comprobar que realmente el valor de la variable “title”, tenga el valor “My Web App”. Para comprobarlo, hacemos lo siguiente:
Analicemos este código:
Aquí, en la última línea estamos indicando que esperamos el valor de la variable title, sea “My Web App”. Ahora que ya hemos escrito nuestro test, guardamos el archivo, nos vamos a la línea de comandos, dentro de nuestro proyecto, y ejecutamos:
ng test
Se abrirá una ventana a parte de nuestro navegador de Internet, mostrando todos los tests que tenemos incorporados en nuestra App, y si han pasado correctamente o no:
Si algún test falla, se mostrará cuál es el test que ha fallado y por qué:
Cómo podéis ver, hacer tests unitarios es simple y se pueden realizar todo tipo de tests. Esperamos que este tutorial os ayude a comprender un poco mejor cómo hacer tests unitarios en vuestros proyectos. ¡¡Qué lo disfrutéis!!
