Pruebas unitarias de AngularJS: tutorial de Karma Jasmine

Por: james hartman james hartman
Hours Actualizado

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

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

  • En AngularJS, podemos realizar Examen de la unidad por separado para controladores y directivas.
  • También podemos realizar pruebas de extremo a extremo de AngularJS, que son pruebas desde la perspectiva del usuario.

Introducción e instalación del marco Karma.

Karma es un herramienta de automatización de pruebas creado por el equipo de Angular JS en GoogleEl primer paso para usar Karma es instalarlo. Karma se instala mediante npm (un gestor de paquetes que facilita la instalación de módulos en una máquina local).

Instalación del 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 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 comando npm que se requiere instalación.
  3. Hay 3 bibliotecas especificadas 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 karma.
    • karma-jasmine: esto instala jasmine, que es un marco dependiente de Karma.

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

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

npm install karma-cli

donde,

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

    • Configuración del marco Karma.

    El siguiente paso es configurar karma, lo cual se puede hacer mediante el 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 indican al motor de ejecución de Karma lo siguiente

    1. 'Nombre de su aplicación' – Esto 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 principales 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 desde el archivo Angular.JS-mocks.js.
    4. Todos los archivos principales de la aplicación o de la 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 comprobar 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 darle un nombre a la prueba. En nuestro caso, le damos el nombre a nuestra prueba como "La condición es verdadera". El nombre de la prueba debe ser significativo.
    3. La combinación de las palabras clave "esperar" y "toBe" indica cuál es el valor esperado y real del resultado de la prueba. Si el valor real y el esperado son iguales, entonces la prueba pasará, de lo contrario fallará.

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

    KARMA start

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

    Configuración del marco Karma

    1. La salida viene en el explorador Karma dentro Webstorm. Esta ventana muestra la ejecución de todas las pruebas 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 todas las pruebas tienen el ícono verde "Aceptar" al lado, lo que simboliza que todas las pruebas pasaron.

    ARTÍCULOS RELACIONADOS

    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 pruebas del objeto $scope que se utiliza 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 ID y asígnele el valor 5.
    2. Asigne la variable ID al objeto $scope.

    Nuestra prueba comprobará la existencia de este controlador y también comprobará si la variable ID del objeto $scope está configurada en 5.

    Primero debemos asegurarnos de que se cumpla el siguiente requisito previo

    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

    Lo siguiente es modificar el archivo karma.conf.js para garantizar que se incluyan los archivos correctos para la prueba. El siguiente segmento solo muestra los archivos que forman parte de karma.conf.js que deben modificarse

    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 necesarios para la ejecución de las pruebas.
    • Los archivos AngularJS.js y AngularJS-mocks.js son necesarios para ejecutar 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 código siguiente simplemente hace lo siguiente:

    1. Crear una Módulo AngularJS llamada aplicación de muestra
    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 ejecute 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 para nuestra prueba será el que se muestra a continuación.

    El código estará en un archivo independiente llamado ControllerTest.js, que se colocará en la carpeta de pruebas. El código que aparece a continuación solo realiza las siguientes tareas clave:

    1. Función beforeEach: esta función se utiliza 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 está definido 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. controlador var = $controlador('AngularJSController', { $alcance: $alcance }); – Aquí estamos comprobando 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 $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 karma y dará el mismo resultado que se mostró en el tema anterior.

    Prueba de directivas AngularJS

    El marco de pruebas Karma también tiene la funcionalidad para probar directivas personalizadas. Esto incluye la plantilla.URLque se utilizan dentro de 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 prueba de AngularJS".
    var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

    Una vez que el código anterior se ejecute 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 para nuestra prueba será el que se muestra a continuación.

    El código estará en un archivo independiente llamado DirectiveTest.js, que se colocará en la carpeta de pruebas. El código que aparece a continuación solo realiza las siguientes tareas clave:

    1. Función beforeEach: esta función se utiliza 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. El $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 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 dentro de un documento HTML.
    4. var elemento = $compile(“Guru99>Guru99>”) – Esto se utiliza para comprobar 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 inyectará como 'Guru99>Guru99>'. Por lo tanto, esta instrucción se utiliza para realizar esa verificación.
    5. expect(element.html()).toContain(“Esto es prueba de AngularJS”): esto se usa para indicarle a la función expect que debe encontrar el elemento (en nuestro caso, la etiqueta div) que contenga el texto HTML interno 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 directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

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

    Pruebas de extremo a extremo de aplicaciones AngularJS JS

    El marco de pruebas de karma junto con un marco llamado ProtracTor tiene la funcionalidad de probar una aplicación web de principio a fin.

    Por lo tanto, no se trata solo de probar directivas y controladores, sino también de 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, 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 revisa cada par clave-valor en el objeto de alcance del tutorial utilizando la variable ptutor.
    3. Finalmente, estamos usando el etiqueta junto con los pares clave-valor (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla.
    <table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

    Una vez que el código anterior se ejecute 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 para nuestra prueba será el que se muestra a continuación.

    En realidad, nuestra prueba probará la directiva ng-repeat y garantizará que contenga 3 filas de datos como debería en el ejemplo anterior.

    Primero debemos asegurarnos de que se cumpla el siguiente requisito previo

    Instala el protracLibrería Tor a través de npm. Esto se puede hacer ejecutando la siguiente línea en la línea de comandos.

    "npm install protractor"

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

    El código estará en un archivo independiente llamado CompleteTest.js, que se colocará en la carpeta de pruebas. El código que aparece a continuación solo realiza las siguientes tareas clave:

    1. La función del navegador la proporciona el protracLa biblioteca tor asume que nuestra aplicación AngularJS (con el código mostrado arriba) se está ejecutando en nuestro sitio. URL – http://localhost:8080/Guru99 /
    2. var list=element.all(by.repeater(ptutor in tutorial')); -Esta línea de código en realidad obtiene la directiva ng-repeat que se rellena con el código 'ptutor in tutorial'. El elemento y by.repeater son palabras clave especiales proporcionadas por el protracBiblioteca Tor que nos permite obtener detalles de la directiva ng-repeat.
    3. esperar(lista.count()).toEqual(3); – Por último, estamos usando la función expect para ver que, de hecho, estamos completando 3 elementos en nuestra tabla como resultado de la directiva ng-repeat.
    Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

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

    Resumen

    • Las pruebas en AngularJS se realizan utilizando el framework karma, un framework que ha sido desarrollado por Google misma.
    • El marco karma se instala utilizando el administrador de paquetes de nodos. Los módulos clave 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 normalmente 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 al ejecutar todas las pruebas.
    • Karma también se puede utilizar para probar controladores y directivas personalizadas.
    • Para una prueba web de extremo a extremo, otro marco llamado protracTor debe instalarse mediante el gestor de paquetes de Node. Este framework proporciona métodos especiales que permiten probar todos los elementos de una página HTML.

    Resumir este post con: