Testing de Angular

La programación web está en la cresta de la ola. No se trata del "futuro" de JavaScript, ni siquiera de un posible futuro cercano, se trata del presente. El lenguaje TypeScript fue fuertemente cuestionado por los "scripteros" más conservadores, pero lo cierto es que ya se encuentra estacionado como la mejor manera de encarar un proyecto web. A TypeScript se le suma Angular, que pasa de ser un framework a ser, prácticamente, un concepto; con un montón de pequeñas partes que lo componen. Nadie está obligado a usar todo lo que ofrece Angular, pero la realidad indica que, mientras más se aprende, más se utilizan sus herramientas y componentes. Y una de las opciones más cuestionadas es el testing. Es hora de despejar algunas dudas.

¿Qué es el Testing en Angular? ¿Para qué nos sirve?

Es un concepto que consiste en ejecutar una serie de scripts que testean una Aplicación como si fuera una persona, devolviendo información muy precisa de aquello que no funciona como se tiene pensado funcionar. Al iniciar un nuevo en Angular, nos encontraremos con una carpeta en nuestra carpeta raíz llamada "e2e"; del mismo modo, cada componente, servicio o directiva tiene asociado un archivo ".spec.ts". Todo esto corresponde a archivos necesarios para testing. Sin embargo, Angular nos provee de dos sistemas distintos de testeo, de acuerdo a nuestras necesidades.

Jasmine

Los desarrolladores de Jasmine lo definen como un behaviour-driven, lo que podriamos definir como un entorno para testear código de JavaScript. Consiste en la plataforma base con la cual Angular ejecuta los testeos, aún así los testeos son programados y ejecutados con otros frameworks distintos, y podemos elegir cual utilizar dependiendo nuestras necesidades o comodidad.

Karma

Con Karma podremos testear cada componente de nuestra aplicación, mediante la programación de un test con el archivo "*.spec.ts". El concepto detrás de Karma es poder programar los testeos independientes de cada componente o servicio, en lugar de la aplicación entera. Para ejecutar los testeos, usaremos el siguiente comando:

ng test

Se nos abrirá un navegador que mostrará nuestra App con una serie de mensajes. Cada uno de ellos corresponde a cada Test, mostratá un mensaje de "Éxito" si todo está bien, y un mensaje de "Error" si hay algún problema.

Protractor

El concepto de Protractor es más centralizado, en lugar de tener un archivo por componente (lo cual puede ser conveniente) tendremos una carpeta en la raíz de la App, llamada "e2e", donde tendremos una serie de archivos que corresponden al testing en general. Para funcionar se necesitan solo dos, el archivo de configuración y el de testing. Protractor utiliza, igual que Karma, el entorno Jasmine, para ejecutarlo usaremos el siguiente comando:

ng e2e

Se denomina "e2e" a "end-to-end", un sistema de testeo que atraviesa toda la aplicación, de principio a fin, buscando errores. Esos testeos también tendremos que programarlos, pero la ventaja de Protractor es que tendremos todo en una carpeta disociada de la carpeta de sources. El sistema ejecutará una instancia de navegador donde la máquina hará las veces de una persona interactuando. Al finalizar, la instancia del navegador se cerrará y los resultados serán impresos en la terminal.


Esto se trata solo de un pantallazo general de que son los testeos en Angular, ampliaremos para explicar como programar cada uno de estos sistemas de testeo, para eso recomendamos suscribirse a nuestro canal de Youtube: Moldeo Interactive Youtube.