Angular.js Unit Testing

Una de las características más importantes de Angular.js es la de pruebas. Cuando los desarrolladores de Google desarrollaron Angular, las tuvieron en cuenta y se aseguraron de que todo el marco de Angular fuera comprobable.

En Angular, las pruebas se realizan utilizando Karma, un framework con características sólidas para probar código Angular, por lo que tiene sentido utilizarlo.

El primer paso para utilizar Karma es instalarlo a través de npm (un administrador de paquetes utilizado para facilitar la instalación de módulos en una máquina local).

La instalación de Karma a través de npm se realiza en dos etapas.

Etapa 1. Ejecuta el siguiente comando:

1. npm es la utilidad de línea de comandos para el Node Package Manager, utilizado para instalar módulos personalizados en cualquier máquina.
   
2. El parámetro install indica a la utilidad de línea de comandos npm que se requiere instalación.
   
3. Se especifican 3 bibliotecas en la línea de comando, necesarias para trabajar con Karma.
   
4. Karma es la biblioteca principal que se utilizará con fines de prueba.
   
5. karma-chrome-launcher es una biblioteca separada que permite que el navegador Chrome reconozca los comandos de Karma.
   
6. karma-jasmine – Instala jasmine, una estructura dependiente de Karma.
   

Etapa 2. Instale la utilidad de línea de comandos Karma. Esto es necesario para ejecutar los comandos de Karma. La utilidad de línea de comandos Karma se utilizará para inicializar el entorno Karma para realizar pruebas.

Para instalar la utilidad de línea de comando, ejecuta lo siguiente:

Karma-cli se utiliza para instalar la interfaz de línea de comandos para Karma, que se utilizará para escribir los comandos en la interfaz.

Configuración del framework Karma

El siguiente paso es configurar en Karma con el comando:

Después de realizar el paso anterior, Karma creará un archivo karma.conf.js. El archivo probablemente se verá como esto:

Los archivos de configuración anteriores le brindan al runtime karma la siguiente información:

1. ‘Nombre de tu aplicación’ – Se sustituirá con el nombre de tu aplicación.
2. ‘Your application Name’/AngularJS/AngularJS.js’ – Esto le dice a Karma que tu aplicación depende de los módulos centrales de Angular.
3. ‘Your application Name’/AngularJS-mocks/AngularJS-mocks.js’ – Le dice a Karma que use la funcionalidad Unit Testing para Angular del archivo Angular.JS-mocks.js.
4. Todos los archivos principales de la aplicación o de la lógica de negocios están presentes en la carpeta lib de tu aplicación.
5. La carpeta de pruebas contendrá todas las pruebas unitarias.
   

Para comprobar si Karma está funcionando, crea un archivo llamado sample.js, inserta el código a continuación y colócalo en el directorio test.

El código tiene los siguientes detalles:

• La función describe se utiliza para proporcionar una descripción de la prueba. En nuestro caso, damos la descripción sample test para nuestra prueba.
• La función 'it' se utiliza para darle un nombre a la prueba. En nuestro caso, le nombramos nuestra prueba como The condition is true. El nombre de la pueba debe ser significativo.
• La combinación de palabras clave. 'expect' e 'toBe' Indica cuál es el valor esperado y real del resultado de la prueba. Si el valor real y el esperado son iguales, la prueba pasa; de lo contrario, falla.
  

Cuando ejecutas la siguiente línea en el prompt de comando, ella ejecutará el archivo:

El resultado siguiente está tomado de IDE Webstorm, en el que se realizaron los pasos anteriores.

1. El resultado viene en Karma Explorer dentro de Webstorm. Esta ventana muestra la ejecución de todas las pruebas definidas en el marco Karma.
2. Aquí puede ver que se muestra la descripción de la ejecución de prueba, que es Sample test.
3. Luego puedes ver que la prueba en sí, que lleva el nombre Condición es verdadera, se ejecuta.
4. Ten en cuenta que, como en todas las pruebas, thay un ícono verde Ok al lado, que simboliza que todas las pruebas han pasado.
   

Probando Angular.js Controllers

El marco de pruebas de Karma también tiene la funcionalidad de probar controllers de punta a punta. Eso incluye la prueba del objeto $scope usado en los Controllers.

Veamos un ejemplo de cómo podemos conseguirlo.

Primero, precisaríamos definir un controller para ejecutar las etapas abajo mencionadas.

1. Crea una variable de ID y atribúyele el valor 5.
2. Atribuye la variable ID al objeto $scope.
   

Nuestra prueba verificará la existencia del controller y si la variable ID del objeto $scope está definida como 5.

Aquí necesitamos garantizar que el siguiente prerrequisito esté en vigor.

Instala la biblioteca Angular.JS-mocks vía npm. Eso se logra con lo siguiente:

A continuación, modifica el archivo karma.conf.js para garantizar que los archivos correctos sean incluidos en la prueba. El segmento abajo muestra la parte de los archivos de karma.conf.js que precisa modificarse.

• El parámetro files informa a Karma todos los archivos necesarios para la ejecución de las pruebas.
• Los archivos AngularJS.js y AngularJS-mocks.js son necesarios para ejecutar pruebas de unidad Angular.
• El archivo index.js contendrá nuestro código para el controlador.
• La carpeta test contendrá todas nuestras pruebas Angular.
  

Abajo está nuestro código Angular, que será almacenado como un archivo index.js en la carpeta de pruebas de nuestra aplicación.

El código abajo realiza las siguientes acciones:

• Crea un módulo Angular llamado sampleApp;
• Crea un controlador llamado AngularJSController;
• Crea una variable llamada ID. Dale un valor de 5 y asígnalo al objeto $scope.
  

Una vez que el código anterior se haya ejecutado correctamente, el siguiente paso es crear un caso de prueba para garantizar que el código se haya escrito y ejecutado correctamente.

El código para nuestra prueba se mostrará más abajo.

El código estará en un archivo separado llamado ControllerTest.js, que será colocado en la carpeta test. El siguiente código abajo considera esto:

1. Función beforeEach – Es usada para cargar nuestro módulo AngularJS.JS llamado sampleApp antes de la ejecución de la prueba. Observa que este es el nombre del módulo en un archivo index.js.
2. El objeto $controller se crea como un objeto mockup para el controlador Angular JSController, definido en nuestro archivo index.js. En cualquier tipo de prueba de unidad, un objeto simulado representa un objeto ficticio que en realidad se utilizará para realizar pruebas. Este objeto ficticio en realidad simulará el comportamiento de nuestro controlador.
3. BeforeEach(inject(function(_$controller_) – Esto se utiliza para inyectar el objeto simulado en nuestra prueba para que se comporte como el controlador real.
4. Var $scope = {}; - Este es un objeto ficticio que se está creando para el objeto $scope.
5. Var controller = $controller(‘AngularJSController’, { $scope: $scope }); – Aquí estamos comprobando la existencia de un controlador llamado Angular.JSController. Aquí también asignamos todas las variables de nuestro objeto $scope en nuestro controlador en el archivo index.js al objeto $scope en nuestro archivo de prueba.
6. Finalmente, estamos comparando $scope.ID com 5.
   

La prueba anterior se ejecutará en el navegador Karma y proporcionará el mismo resultado que se muestra en el tema anterior.

Probando Angular.js Directives

El marco de prueba de Karma también tiene la funcionalidad de probar directivas personalizadas. Esto incluye las templateURLs que se utilizan en directivas personalizadas.

Veamos un ejemplo de cómo conseguir eso.

En nuestro ejemplo, primero definiremos una directiva personalizada que haga lo siguiente:

1. Crea un módulo angular llamado sampleApp;
2. Crea una directiva personalizada con el nombre – MyDirective;
3. Cree una función que devuelva una plantilla con una etiqueta de encabezado que muestre el texto This is AngularJS Testing.

Una vez que el código anterior se haya ejecutado correctamente, el siguiente paso es crear un caso de prueba para garantizar que el código se haya escrito y ejecutado correctamente. El código para nuestra prueba será el que se muestra a continuación.

El código estará en un archivo separado llamado DirectiveTest.js, colocado en la carpeta test. El siguiente código considera lo siguiente:

1. Función beforeEach – Esta función se utiliza para cargar nuestro módulo Angular llamado sampleApp antes de ejecutar la prueba.
   
2. El servicio $compile se utiliza para compilar la directiva. Este servicio es obligatorio y debe declararse para que Angular pueda usarlo para compilar nuestra directiva personalizada.
   
3. $rootscope es el alcance principal de cualquier aplicación Angular. Vimos el objeto $scope del controlador en capítulos anteriores. Bueno, el objeto $scope es el objeto hijo del objeto $rootscope. La razón por la que esto se declara aquí es porque estamos realizando un cambio en una etiqueta HTML real en el DOM a través de nuestra directiva personalizada. Por lo tanto, necesitamos usar el servicio $rootscope que realmente escucha o sabe cuándo ocurre algún cambio en un documento HTML.
   
4. Var element = $compile(“<ng-MyDirective></ng-MyDirective>”) – Esto se utiliza para verificar que nuestra directiva se inyecta como debería. El nombre de nuestra directiva personalizada es MyDirective, y sabemos por nuestro capítulo de directivas personalizadas que cuando la directiva se inyecta en nuestro HTML, se inyectará como <ng-MyDirective></ng-MyDirective>. Por lo tanto, esta declaración se utiliza para realizar esta verificación.
   
5. Expect(element.html()).toContain(“This is AngularJS Testing”) – Esto se utiliza para instruir la función expect que debe encontrar el elemento (en nuestro caso, el tag div) para contener el texto innerHTML de This is AngularJS Testing.

La prueba anterior se ejecutará en el navegador Karma y proporcionará el mismo resultado que se muestra en el tema anterior.

Probando aplicaciones AngularJS End to End

El marco de prueba de Karma junto con un marco llamado Protractor tiene la funcionalidad de probar una aplicación web de un extremo a otro.

Así que no se trata sólo de probar directivas y controladores, sino que también se prueba cualquier otro detalle que pueda aparecer en una página HTML.

Veamos un ejemplo. Tendremos una aplicación Angular que crea una tabla de datos usando la directiva ng-repeat.

1. Primero, creamos una variable llamada tutorial y le asignamos algunos pares clave-valor en un solo paso. Cada par clave-valor se utilizará como datos al mostrar la tabla. Luego, la variable del tutorial se asigna al objeto de alcance para que se pueda acceder a él desde nuestra vista.
   
2. Para cada fila de datos de la tabla, utilizamos la directiva ng-repeat. Esta directiva pasa por cada par clave-valor en el objeto de alcance del tutorial utilizando la variable ptutor.
   
3. Finalmente, estamos usando la etiqueta <td> junto con pares clave-valor (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla.
   

La prueba anterior se ejecutará en el navegador Karma y proporcionará el mismo resultado que se muestra en el tema anterior.

Una vez que el código anterior se haya ejecutado correctamente, el siguiente paso es crear un caso de prueba como se muestra a continuación.

Nuestra prueba realmente probará la directiva ng-repeat y garantizará que contenga 3 líneas de datos como debería en el ejemplo anterior.

Primero, debemos asegurarnos de que se cumpla el siguiente requisito previo.

Instale la biblioteca protractor a través de npm. Esto se puede hacer ejecutando la siguiente línea:

El código para nuestra prueba será el que se muestra a continuación.

El código estará en un archivo separado llamado CompleteTest.js, que se colocará en la carpeta test. El siguiente código solo realiza las siguientes acciones:

1. La función del navegador la proporciona la biblioteca del navegador protractor y supone que nuestra aplicación Angular (con el código que se muestra arriba) se ejecuta en la URL de nuestro sitio web:  http://localhost:8080/MySite/.
   
2. Var list=element.all(by.repeater(ptutor no tutorial')); - Esta línea de código en realidad está obteniendo la directiva ng-repeat que se completa con el código ptutor en el tutorial. El elemento y by.repeater son palabras clave especiales proporcionadas por la biblioteca de transportadores que nos permiten obtener detalles de la directiva ng-repeat.
   
3. Expect(list.count()).toEqual(3); – Finalmente, estamos usando la función expect para ver si realmente estamos completando 3 elementos en nuestra tabla como resultado de la directiva ng-repeat.
   

La prueba anterior se ejecutará en el navegador Karma y proporcionará el mismo resultado que se muestra en el tema anterior.

Resumen

• Las pruebas en Angular se realizan utilizando el framework Karma, desarrollado por la propia Google.
  
• El marco Karma se instala utilizando el administrador de paquetes de nodos. Los módulos principales que se deben instalar para las pruebas básicas son karma, karma-chrome-launcher, karma-jasmine y karma-cli.
  
• Las pruebas se escriben en archivos js separados, que generalmente se guardan en la carpeta de pruebas de su aplicación. La ubicación de estos archivos de prueba debe mencionarse en un archivo de configuración especial llamado karma.conf.js. Karma usa este archivo de configuración cuando ejecuta todas las pruebas.
  
• Karma también se puede utilizar para probar controladores y directivas personalizados.
  
• Para las pruebas web de un extremo a otro, es necesario instalar otro marco llamado protractor a través de npm. É proporciona métodos especiales que se pueden utilizar para probar todos los elementos de una página HTML.

¡Hasta pronto!