Pruebas unitarias de AngularJS: Karma Jasmine Tutorial

Una de las características más brillantes de Angular.js es el aspecto de pruebas. Cuando los desarrolladores de Google desarrollaron AngularJS, mantuvieron las pruebas en mente y se aseguraron de que todo el marco AngularJS fuera probable.

En AngularJS, las pruebas se llevan a cabo normalmente usando Karma (framework). Las pruebas Angular JS se pueden llevar a cabo sin Karma, pero el marco Karma tiene una funcionalidad tan brillante para probar el código AngularJS, que tiene sentido usar este marco.

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

En este tutorial, usted aprenderá –

Introducción e instalación del marco Karma

Karma es una herramienta de automatización de pruebas creada por el equipo 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 utilizado para facilitar la 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

En donde

  1. npm es la utilidad de línea de comandos para el administrador de paquetes de nodos utilizada 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 la instalación es necesaria.
  3. Hay 3 bibliotecas que se especifican en la línea de comandos que son necesarias para trabajar con karma
  • karma es la biblioteca central que será utilizada para propósitos de prueba.
  • karma-chrome-launcher es una biblioteca separada que permite que los comandos karma sean reconocidos por el navegador Chrome.
  • karma-jazmín — Esto instala jazmín que es un marco dependiente para 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 las pruebas.

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

en el que,

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

Configuración del marco Karma

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

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

Los archivos de configuración anteriores le dicen al motor de tiempo de ejecución karma las siguientes cosas

  1. ‘Nombre de su aplicación’ — Este será reemplazado por el nombre de su solicitud.
  2. ‘Nombre de su aplicación’/AngularJs/AngularJs.js’ – Esto le dice al 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 al karma que use la funcionalidad de prueba de unidades para AngularJS desde el archivo Angular.js-Mocks.js.
  4. Todos los archivos principales de la aplicación o 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 el karma está funcionando, cree un archivo llamado Sample.js, ponga el siguiente código y colóquelo en el directorio de prueba.

El código anterior tiene los siguientes aspectos

  1. La función describe se utiliza para dar una descripción de la prueba. En nuestro caso, estamos dando 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, estamos dando el nombre de nuestra prueba como ‘Condición es verdadero’. El nombre de la prueba debe ser significativo.
  3. La combinación de la palabra clave ‘expect’ 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 ejecuta la siguiente línea en el símbolo del sistema, se ejecutará el archivo de prueba anterior

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 se definen en el marco del 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 un nombre de “Condición es verdadera”.
  4. Tenga en cuenta que dado que todas las pruebas tienen el icono verde “Ok” junto a él que simboliza que todas las pruebas pasaron.

Prueba de controladores AngularJS

El marco de pruebas de karma también tiene la funcionalidad para probar Controladores de extremo a extremo. Esto incluye la prueba del objeto $scope que se utiliza en Controllers.

Veamos un ejemplo de cómo podemos lograr esto.

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 probará la existencia de este controlador y también probará para ver si la variable ID del objeto $scope se establece en 5.

Primero tenemos que asegurarnos de que el siguiente requisito previo esté en su lugar

  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

  1. A continuación, debe modificar el archivo karma.conf.js para asegurarse de que se incluyen los archivos correctos para la prueba. El siguiente segmento solo muestra los archivos parte del karma.conf.js que necesita ser modificado

  • El parámetro ‘files’ básicamente le dice a Karma todos los archivos que se requieren en la ejecución de las pruebas.
  • Se requiere el archivo AngularJS-Mocks.js y AngularJS-Mocks.js para ejecutar pruebas unitarias AngularJS
  • El archivo index.js va a contener nuestro código para el controlador
  • La carpeta de prueba va a contener todas nuestras pruebas 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. Crear un módulo JS angular llamado SampleApp
  2. Crear un controlador llamado AngularJSController
  3. Cree una variable llamada ID, asígnele un valor de 5 y asígnele al objeto $scope

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

El código para nuestra prueba será como 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. BeforeEach función – Esta función se utiliza para cargar nuestro módulo AngularJjs 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 pruebas unitarias, un objeto simulado representa un objeto ficticio que en realidad se utilizará para la prueba. Este objeto simulará realmente 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 $scope = {}; Este es un objeto simulado 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 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

La prueba anterior se ejecutará en el navegador karma y dará el mismo resultado de pase como se muestra en el tema anterior.

Pruebas de directivas AngularJS

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

 

Veamos un ejemplo de cómo podemos lograr esto.

En nuestro ejemplo, primero definimos una directiva personalizada que hace las siguientes cosas

1. Crear un módulo AngularJS llamado SampleApp
2. Crear una directiva personalizada con el nombre — Guru99
3. Crear una función que devuelve una plantilla con una etiqueta de encabezado que muestra el texto “Esto es AngularJS Testing”.

Una vez que el código anterior se ejecuta correctamente, el siguiente paso sería crear un caso de prueba para asegurarse de que el código se ha escrito y ejecutado correctamente. El código para nuestra prueba será como 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. BeforeEach función – 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 ámbito 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 secundario 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 cualquier cambio desde dentro de un documento HTML.
  4. var element = $compile (“<ng-Guru99></ng-Guru99>”) – 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 inyectará como ‘<ng-Guru99></ng-Guru99>’. Por lo tanto, esta declaración se utiliza para hacer esa comprobación.
  5. expect (element.html ()) .toContener (“Esto es AngularJS Testing”) – Esto se usa para instruir a la función expect que debe encontrar el elemento (en nuestro caso la etiqueta div) para contener el texto innerHTML de “This is AngularJS Testing”.

La prueba anterior se ejecutará en el navegador karma y dará el mismo resultado de pase como se muestra en el tema anterior.

Pruebas de extremo a extremo aplicaciones AngularJS JS

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

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

Veamos un ejemplo de cómo podemos lograr esto.

En nuestro ejemplo a continuación, vamos a tener una aplicación AngularJS que crea una tabla de datos utilizando 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. La variable tutorial se asigna entonces al objeto scope para que se pueda acceder desde nuestra vista.
  2. Para cada fila de datos en la tabla, estamos utilizando la directiva ng-repeat. Esta directiva pasa por cada par clave-valor en el objeto ámbito tutorial mediante el uso de la variable ptutor.
  3. Por último, estamos utilizando la <td> etiqueta junto con los pares de valores clave (ptutor.Name y ptutor.Description) para mostrar los datos de la tabla.

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

Nuestra prueba realmente va a probar la directiva ng-repeat y garantizar que contiene 3 filas de datos como debería del ejemplo anterior.

Primero tenemos que asegurarnos de que el siguiente requisito previo esté en su lugar

1. Instale la biblioteca de transportador a través de npm. Esto se puede hacer ejecutando la siguiente línea en el símbolo del sistema

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

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

  1. La función del navegador es proporcionada por la biblioteca de transportador y asume que nuestra aplicación AngularJS (con el código mostrado arriba) se está ejecutando en nuestra URL del sitio – http://localhost:8080/Guru99/
  2. var list=element.all (by.repeater (ptutor en tutorial’)); –
    Esta línea de código realmente está obteniendo 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 la biblioteca de transportador que nos permite obtener detalles de la directiva ng-repeat.
  3. expect (list.count ()) .toEqual (3); – Por último, estamos usando la función expect para ver que estamos obteniendo 3 elementos completados en nuestra tabla como resultado de la directiva ng-repeat.

La prueba anterior se ejecutará en el navegador karma y dará el mismo resultado de pase como se muestra en el tema anterior.

Resumen

  • Las pruebas en AngularJS se logran mediante el uso del framework karma, un framework que ha sido desarrollado por Google mismo.
  • El framework karma se instala usando el administrador de paquetes de nodos. Los módulos clave que se requieren para ser instalados para las pruebas básicas son karma, karma–chrome-launcher, karma-jasmine y karma-cli.
  • Las pruebas se escriben en archivos js separados, normalmente guardados en la carpeta de prueba 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 utiliza este archivo de configuración al ejecutar todas las pruebas.
  • Karma se puede utilizar para probar Controladores y directivas personalizadas también.
  • Para una prueba web de extremo a extremo, otro marco llamado transportador debe instalarse a través del nodo, administrador de paquetes. Este marco proporciona métodos especiales que se pueden utilizar para probar todos los elementos en una página HTML.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *