Prueba unitaria de AngularJS: Tutorial de Karma Jasmine

Una de las características más brillantes de Angular.JS es el aspecto de prueba. Cuando los desarrolladores de Google desarrollaron AngularJS, tuvieron en cuenta las pruebas y se aseguraron de que todo el marco de AngularJS fuera comprobable.

En AngularJS, las pruebas se realizan normalmente utilizando Karma (framework). Las pruebas de Angular JS se pueden realizar sin Karma, pero el marco de Karma tiene una funcionalidad tan brillante para probar el código de AngularJS, que tiene sentido usar este marco.

  • En AngularJS, podemos realizar pruebas unitarias por separado para controladores y directivas.
  • También podemos realizar pruebas de fin de final de AngularJS, que está probando desde la perspectiva del usuario.

En este tutorial, aprenderá:

  • Introducción e instalación del marco de Karma
    • Instalación de Karma
    • Configuración del marco de Karma
  • Prueba de controladores AngularJS
  • Probando directivas AngularJS
  • Prueba de extremo a extremo de aplicaciones AngularJS JS

Introducción e instalación del marco de Karma

Karma es una herramienta de automatización de pruebas creada por el equipo de Angular JS en Google. El primer paso para usar Karma es instalar Karma. Karma se instala a través de npm (que es un administrador de paquetes que se utiliza para una fácil instalación de módulos en una máquina local).

Instalación de Karma

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

Paso 1) Ejecute la siguiente línea desde dentro de la línea de comando

npm install karma karma-chrome-launcher karma-jasmine

Donde

  1. npm es la utilidad de línea de comandos para el administrador de paquetes de nodos que se utiliza para instalar módulos personalizados en cualquier máquina.
  2. El parámetro de instalación indica a la utilidad de línea de comandos npm que se requiere la instalación.
  3. Hay 3 bibliotecas que se especifican en la línea de comando que son necesarias para trabajar con karma
    • karma es la biblioteca principal que se utilizará con fines de prueba.
    • karma-chrome-launcher es una biblioteca separada que permite que el navegador Chrome reconozca los comandos de karma.
    • karma-jazmín: instala jazmín, que es un marco dependiente del karma.

Paso 2) El siguiente paso es instalar la utilidad de línea de comando karma. Esto es necesario para ejecutar comandos de línea de karma. La utilidad de la línea de karma se utilizará para inicializar el entorno de karma para la prueba.

Para instalar la utilidad de línea de comando, ejecute la siguiente línea desde dentro de la línea de comando

npm install karma-cli

donde,

  1. karma-cli se usa para instalar la interfaz de línea de comandos para karma que se usará para escribir los comandos de karma en la interfaz de línea de comandos.

Configuración del marco de Karma

El siguiente paso es configurar el karma que se puede hacer a través del comando

"karma -init"

Después de ejecutar el paso anterior, karma creará un archivo karma.conf.js. El archivo probablemente se verá como el fragmento que se muestra a continuación.

files: ['Your application Name'/AngularJS/AngularJS.js','Your application Name'/AngularJS-mocks/AngularJS-mocks.js','lib/app.js','tests/*.js']

Los archivos de configuración anteriores le dicen al motor de tiempo de ejecución de karma lo siguiente

  1. 'Nombre de su aplicación' : será reemplazado por el nombre de su aplicación.
  2. ' Nombre de su aplicación' / AngularJS / AngularJS.js ' - Esto le dice a karma que su aplicación depende de los módulos centrales en AngularJS
  3. 'Nombre de su aplicación' / AngularJS-mocks / AngularJS-mocks.js ' : esto le dice a karma que use la funcionalidad de prueba unitaria para AngularJS del archivo Angular.JS-mocks.js.
  4. Todas las aplicaciones principales o los archivos de lógica empresarial están presentes en la carpeta lib de su aplicación.
  5. La carpeta de pruebas contendrá todas las pruebas unitarias

Para verificar si karma está funcionando, cree un archivo llamado Sample.js, ingrese el siguiente código y colóquelo en el directorio de prueba.

describe('Sample test', function() {it('Condition is true', function() {expect('AngularJS').toBe('AngularJS');});});

El código anterior tiene los siguientes aspectos

  1. La función de descripción se utiliza para dar una descripción de la prueba. En nuestro caso, le damos la descripción 'Prueba de muestra' a nuestra prueba.
  2. La función 'it' se utiliza para dar un nombre a la prueba. En nuestro caso, damos el nombre de nuestra prueba como 'La condición es verdadera'. El nombre de la prueba debe ser significativo.
  3. La combinación de las palabras clave 'espera' y 'toBe' indica cuál es el valor esperado y real del resultado de la prueba. Si el valor real y esperado es el mismo, entonces la prueba pasará; de lo contrario, fallará.

Cuando ejecute la siguiente línea en el símbolo del sistema, ejecutará el archivo de prueba anterior

KARMA start

El siguiente resultado se toma del IDE Webstorm en el que se llevaron a cabo los pasos anteriores.

  1. La salida viene en el explorador de Karma dentro de Webstorm. Esta ventana muestra la ejecución de todas las pruebas que están definidas en el marco de karma.
  2. Aquí puede ver que se muestra la descripción de la prueba ejecutada que es "Prueba de muestra".
  3. A continuación, puede ver que se ejecuta la prueba en sí, que tiene el nombre "La condición es verdadera".
  4. Tenga en cuenta que, dado que todas las pruebas tienen el icono verde "Ok" al lado, que simboliza que todas las pruebas pasaron.

Prueba de controladores AngularJS

El marco de prueba de karma también tiene la funcionalidad de probar los controladores de un extremo a otro. Esto incluye probar el objeto $ scope que se usa dentro de los Controladores.

Veamos un ejemplo de cómo podemos lograrlo.

En nuestro ejemplo,

Primero necesitaríamos definir un controlador. Este controlador llevaría a cabo los pasos mencionados a continuación

  1. Cree una variable de ID y asígnele el valor 5.
  2. Asigne la variable de ID al objeto $ scope.

Nuestra prueba probará la existencia de este controlador y también probará para ver si la variable ID del objeto $ scope está establecida en 5.

Primero, debemos asegurarnos de que se cumplan los siguientes requisitos previos

    1. Instale la biblioteca Angular.JS-mocks a través de npm. Esto se puede hacer ejecutando la siguiente línea en el símbolo del sistema
npm install Angular JS-mocks
  1. Lo siguiente es modificar el archivo karma.conf.js para asegurarse de que se incluyan los archivos correctos para la prueba. El siguiente segmento solo muestra la parte de archivos del karma.conf.js que necesita ser modificado 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • El parámetro 'archivos' básicamente le dice a Karma todos los archivos que se requieren en la ejecución de las pruebas.
  • Los archivos AngularJS.js y AngularJS-mocks.js son necesarios para ejecutar las pruebas unitarias de AngularJS
  • El archivo index.js contendrá nuestro código para el controlador
  • La carpeta de prueba contendrá todas nuestras pruebas de AngularJS

A continuación se muestra nuestro código Angular.JS que se almacenará como un archivo Index.js en la carpeta de prueba de nuestra aplicación.

El siguiente código solo hace las siguientes cosas

  1. Crea un módulo de Angular JS llamado sampleApp
  2. Crea un controlador llamado AngularJSController
  3. Crea una variable llamada ID, dale un valor de 5 y asígnala al objeto $ scope
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

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

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

El código estará en un archivo separado llamado ControllerTest.js, que se colocará en la carpeta de prueba. El siguiente código solo hace las siguientes cosas clave

  1. Función beforeEach: esta función se usa para cargar nuestro módulo AngularJS.JS llamado 'sampleApp' antes de la ejecución de la prueba. Tenga en cuenta que este es el nombre del módulo en un archivo index.js.

  2. El objeto $ controller se crea como un objeto de maqueta para el controlador '' Angular JSController '' que se define en nuestro archivo index.js. En cualquier tipo de prueba unitaria, un objeto simulado representa un objeto ficticio que realmente se utilizará para la prueba. Este objeto simulado en realidad simulará el comportamiento de nuestro controlador.

  3. beforeEach (inject (function (_ $ controller_) - Esto se usa para inyectar el objeto simulado en nuestra prueba para que se comporte como el controlador real.

  4. var $ alcance = {}; Este es un objeto simulado que se está creando para el objeto $ scope.

  5. var controller = $ controller ('AngularJSController', {$ alcance: $ alcance}); - Aquí estamos verificando la existencia de un controlador llamado 'Angular.JSController'. Aquí también estamos asignando 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 el $ scope.ID con 5

describe('AngularJSController', function() {beforeEach(module('sampleApp'));var $controller;beforeEach(inject(function(_$controller_){$controller = _$controller_;}));describe('$scope.ID', function() {it('Check the scope object', function() {var $scope = {};var controller = $controller('AngularJSController', { $scope: $scope });expect($scope.ID).toEqual(5);});});});

La prueba anterior se ejecutará en el navegador de karma y dará el mismo resultado de aprobación que se mostró en el tema anterior.

Prueba de directivas de AngularJS

El marco de prueba de karma también tiene la funcionalidad para probar directivas personalizadas. Esto incluye las URL de plantilla que se utilizan dentro de las directivas personalizadas.

Veamos un ejemplo de cómo podemos lograrlo.

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

  1. Cree un módulo AngularJS llamado sampleApp
  2. Cree una directiva personalizada con el nombre - Guru99
  3. Cree una función que devuelva una plantilla con una etiqueta de encabezado que muestre el texto "Esto es AngularJS Testing".
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

El código estará en un archivo separado llamado DirectiveTest.js, que se colocará en la carpeta de prueba. El siguiente código solo hace las siguientes cosas clave

  1. Función beforeEach: esta función se usa para cargar nuestro módulo Angular JS llamado 'sampleApp' antes de la ejecución de la prueba.

  2. El servicio $ compile se utiliza para compilar la directiva. Este servicio es obligatorio y debe declararse para que Angular.JS pueda usarlo para compilar nuestra directiva personalizada.

  3. $ Rootscope es el alcance principal de cualquier aplicación AngularJS.JS. Hemos visto 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 haciendo 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 desde dentro de un documento HTML.

  4. var element = $ compile (" ") - Esto se usa para verificar si nuestra directiva se inyecta como debería. El nombre de nuestra directiva personalizada es Guru99, y sabemos por nuestro capítulo de directivas personalizadas que cuando la directiva se inyecta en nuestro HTML, se inyecta como ' '. Por lo tanto, esta declaración se usa para hacer esa verificación.

  5. esperar (elemento.html ()). toContain ("Esto es prueba de AngularJS") - Esto se usa para indicar a la función de espera que debe encontrar el elemento (en nuestro caso la etiqueta div) para contener el texto innerHTML de "Esto es Pruebas de AngularJS ".

describe('Unit testing directives', function() {var $compile,$rootScope;beforeEach(module('sampleApp'));beforeEach(inject(function(_$compile_, _$rootScope_){$compile = _$compile_;$rootScope = _$rootScope_;}));it('Check the directive', function() {// Compile a piece of HTML containing the directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

La prueba anterior se ejecutará en el navegador de karma y dará el mismo resultado de aprobación que se mostró en el tema anterior.

Prueba de extremo a extremo de aplicaciones AngularJS JS

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

Por lo tanto, no se trata solo de probar directivas y controladores, sino también de probar cualquier otra cosa que pueda aparecer en una página HTML.

Veamos un ejemplo de cómo podemos lograrlo.

En nuestro ejemplo a continuación, tendremos una aplicación AngularJS que crea una tabla de datos usando la directiva ng-repeat.

  1. Primero estamos creando una variable llamada "tutorial" y asignándole 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, usamos la directiva ng-repeat. Esta directiva pasa por cada par clave-valor en el objeto de alcance del tutorial mediante el uso de la variable ptutor.
  3. Finalmente, estamos usando la etiqueta junto con los pares clave-valor (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla.


{{ ptutor.Name }}{{ ptutor.Description }}

Articulos interesantes...