Menú

Tutorial de Karma: Pruebas unitarias de front-end con Karma Test Runner

  • Principal
  • Otro
  • Tutorial de Karma: Pruebas unitarias de front-end con Karma Test Runner

karma tutorial front end unit testing using karma test runner

Pruebe Nuestro Instrumento Para Eliminar Los Problemas

Este tutorial explica cómo configurar Karma y automatizar las pruebas unitarias de front-end usando Karma, las opciones de configuración básica para el archivo Karma.conf.js, etc.

Este tutorial explica el procedimiento para automatizar las pruebas unitarias del front-end del software utilizando Karma y algunas de sus herramientas asociadas.

Comenzaremos con aplicaciones web desarrolladas usando la biblioteca JavaScript: 'Jquery' y el tiempo de ejecución de JavaScript: 'NodeJS'; y luego veremos algunos frameworks de JavaScript como AngularJS y ReactJS.

=>DESPLAZARSE HACIA ABAJOpara ver la lista completa de Tutoriales de Karma

Introducción al karma

Lo que vas a aprender:

Lista de tutoriales de karma

Tutorial #1: Tutorial de Karma: Pruebas unitarias de front-end con Karma Test Runner
Tutorial #2: Tutorial de Jasmine Framework que incluye Jasmine Jquery con ejemplos
Tutorial #3: Proyecto de muestra sobre pruebas unitarias de front-end con KARMA y JASMINE

Descripción general de los tutoriales de Karma en esta serie

Tutorial #Lo que vas a aprender
Tutorial_#1: Tutorial de Karma: Pruebas unitarias de front-end con Karma Test Runner
Este tutorial introductorio explica todo sobre cómo configurar Karma y automatizar las pruebas unitarias de front-end usando Karma, opciones de configuración básicas para el archivo Karma.conf.js, etc.
Tutorial_#2: Tutorial de Jasmine Framework que incluye Jasmine Jquery con ejemplos
Este tutorial cubre Jasmine Testing Framework y sus construcciones. Obtenga también información sobre el paquete Jasmine-Jquery que extiende Jasmine para probar aplicaciones Jquery.
Tutorial_#3: Proyecto de muestra sobre pruebas unitarias de front-end con KARMA y JASMINE
Este tutorial muestra cómo escribir especificaciones de prueba para un proyecto de muestra usando Karma & Jasmine. También aprenderá rápidamente a utilizar otras herramientas como gulp, browserify.

¿Qué son las pruebas unitarias de front-end?

El front-end de cualquier sistema de software es simplemente la interfaz donde el usuario accede a todas las funcionalidades proporcionadas por el sistema. Para garantizar la mejor experiencia de usuario, es necesario asegurarse de que los desarrolladores de front-end hayan codificado el front-end teniendo en cuenta todos los requisitos del usuario.

La única forma de hacer cumplir esto es escribir y ejecutar pruebas sobre los códigos del desarrollador. El producto debe aceptarse como un código / función de interfaz de usuario de calidad solo cuando el resultado de todas estas pruebas se encuentre en el estado 'aprobado'.

La prueba unitaria es un tipo de método de prueba de software en el que se prueba cada parte individual e independiente del código fuente para determinar si es lo suficientemente bueno para su uso.

Cuando nosotros Realice esta prueba unitaria en el front-end (lado del cliente) del software, se denomina prueba unitaria front-end. Lo opuesto a las pruebas de front-end son las pruebas de back-end (del lado del servidor).

Las pruebas de la unidad de front-end se pueden realizar de forma manual o automática. Las pruebas automatizadas de unidades de front-end están de moda en estos días, ya que son más efectivas y ahorran tiempo. Hay diversas herramientas que están disponibles para las pruebas de unidades frontales en diferentes plataformas de programación.

AngularJS y ReactJS son dos marcos de JavaScript de front-end populares, aunque ReactJS es bastante nuevo.

Para realizar pruebas unitarias en una aplicación, se utilizan los front-end construidos con estos marcos de front-end o incluso los construidos sin los marcos, ciertas herramientas de prueba de automatización como Karma, mocha, Jasmine, jest, enzima, etc.

En primer lugar, aprenderíamos a realizar pruebas unitarias de front-end usando Karma y Jasmine y luego, más adelante, también podemos echar un vistazo a las otras herramientas.

Comenzaremos con la ejecución de pruebas unitarias de front-end utilizando accesorios para front-end construidos sin ninguno de los marcos de JavaScript para front-end. En total, dividiremos nuestros aprendizajes en esta serie en tres tutoriales.

En este primer tutorial, intentaremos tener una idea de cómo se está configurando Karma, el segundo tutorial explicará Jasmine en detalle, finalmente, en el tercer tutorial, veremos su aplicación práctica.

¿Qué es Karma Test Runner?

Karma_logo

Karma es una herramienta de prueba basada en nodos que le permite probar sus códigos JavaScript en múltiples navegadores reales. Una herramienta basada en nodos es cualquier herramienta que necesita el motor Nodejs instalado para que se ejecute y se puede acceder (instalar) a través del administrador de paquetes de nodos (npm).

Karma es una herramienta que hace que nuestro desarrollo basado en pruebas sea rápido, divertido y fácil. Técnicamente se denomina corredor de pruebas. Cabe mencionar aquí que Karma fue desarrollado por el equipo de Angular.

¿Cómo funciona el karma como testrunner?

Como corredor de pruebas, Karma hace tres cosas importantes:

  • Inicia un servidor web y sirve su fuente de JavaScript y archivos de prueba en ese servidor.
  • Carga todos los archivos fuente y de prueba en el orden correcto.
  • Finalmente, activa los navegadores para ejecutar las pruebas.

¿Qué más puede hacer el karma?

Además de las funciones de Karma mencionadas anteriormente, hay algunas otras cosas para las que Karma se puede configurar. Por ejemplo, para publicar cobertura de prueba de código para coveralls.io ; transpile un código de formato es6 a es5, agrupando varios archivos en un solo archivo y genere mapas de origen.

En nuestros tutoriales posteriores, veremos cómo funcionan algunas de estas cosas.

Requisitos para comenzar con Karma

Para comenzar con Karma, debe comprender NodeJS y el administrador de paquetes de Node.

¿Qué es NodeJS?

Nodejs resuelve la naturaleza de bloqueo de las llamadas asincrónicas de JavaScript, es decir, cuando se accede a una función asincrónica en JavaScript, evita que las otras partes del código se ejecuten hasta que regrese la llamada asincrónica. Sin embargo, con NodeJS, se pueden realizar llamadas asincrónicas a funciones sin bloqueo.

En términos técnicos, se puede decir que NodeJS es un tiempo de ejecución de JavaScript asincrónico controlado por eventos que hace que la creación de aplicaciones escalables en red sea fácil y posible.

Introducción a NodeJS

Simplemente necesita instalar el marco NodeJS. Todo lo que necesita hacer es visitar su sitio web y, según su sistema operativo, debe descargar el instalador y seguir las instrucciones de su sitio sobre su instalación.

¿Qué es Node Package Manager (Npm)?

El administrador de paquetes de nodos (npm) es un administrador de paquetes de JavaScript que se utiliza para instalar otras aplicaciones o módulos preconstruidos basados ​​en nodos que quizás desee reutilizar en su propia aplicación.

Npm se instala cuando instala NodeJS, pero npm se actualiza más rápido que el nodo. Por lo tanto, puede ser necesario que actualice su npm en algún momento. Para instalar la última versión de npm, debe ejecutar este comando desde su línea de comando: npm install npm @ latest -g

El comando anterior indica que le está pidiendo al shell del sistema operativo que ejecute la aplicación npm y la aplicación debe realizar la instalación del paquete npm. @latest indica que debe instalarse la última versión del paquete, la opción -g indica que el paquete debe instalarse globalmente.

Se pueden encontrar más detalles sobre npm Aquí .

Hay dos cosas importantes que deberían mencionarse aquí, es decir, instalar un paquete con las opciones –save y –save-dev.

Durante las pruebas, cualquier paquete instalado debe instalarse utilizando la opción –save-dev, es decir, para indicar al administrador de paquetes que instale el paquete como una dependencia de desarrollo y no como una dependencia del proyecto (cuando uso –save).

La dependencia del desarrollo debe elegirse ya que la aplicación no necesita ese paquete durante la fase de producción, sino que solo lo requiere durante la fase de desarrollo para fines de garantía de calidad.

¿Cómo instalar Karma?

Para comenzar con Karma, debe crear una carpeta para el proyecto para el que está a punto de escribir las pruebas unitarias. Puede nombrarlo como 'basicUT'. Estoy usando Visual Studio Code como editor de texto, por lo que también te recomiendo que lo descargues e instales. Puedes encontrarlo Aquí .

Abra la ventana de terminal incorporada del código de Visual Studio, haga clic en 'Ver menú' y luego seleccione el submenú de terminal integrado.

En la ventana de terminal, escriba 'npminit' como se muestra en la siguiente figura. Este comando lo guía para configurar automáticamente el archivo 'package.json' que todas las aplicaciones basadas en nodos deben tener.

El archivo package.json almacena información sobre su aplicación, como su nombre, número de versión, autor, dependencias de la aplicación, dependencias de desarrollo, comando de prueba o secuencia de comandos y secuencia de comandos para iniciar la aplicación o construir la aplicación en un formulario ejecutable.

Hacer clic Aquí para obtener más detalles sobre el archivo 'package.json'.

Captura de pantalla de Inicialización de un archivo package.json usando npminit

Inicializando un archivo package.json

Como se describió anteriormente, para instalar Karma, todo lo que necesita es ejecutar el comando npm instala Karma @ latest –save-dev . Espero que ahora pueda interpretar lo que implica ese comando.

Ahora que hemos instalado Karma con éxito, ¿qué es lo siguiente que debe hacer para utilizar Karma en las pruebas de su unidad de front-end?

Todo lo que necesita hacer es escribir el archivo de configuración para él, y el archivo generalmente se llama Karma.conf.js para JavaScript. Sin embargo, es diferente para CoffeeScript. Hacer clic Aquí para explorar más sobre el archivo de configuración de Karma.

Descripción general de las opciones de configuración del archivo Karma.conf.js

El archivo de configuración Karma.conf.js debe contener las instrucciones de configuración que Karma debe seguir para realizar las tres funciones importantes de Karma.

Este archivo de configuración se puede crear de forma manual o automática mediante el comando: 'karma init', que comienza a mostrar diferentes preguntas para que las responda, y Karma usa las respuestas que usted proporciona para configurar el archivo de configuración.

Ya habrías descubierto que ejecutar el comando: 'karma init', da el error “ 'Karma' no se reconoce como un programa operativo de comando interno o externo o un archivo por lotes ”.

Esto se debe a que Karma se instaló localmente y no globalmente en el proyecto en el que está trabajando. Por lo tanto, el shell de su sistema operativo no puede encontrar la aplicación Karma en su configuración ambiental de ruta si está usando Windows o en el archivo .bash_profile si está usando Mac.

Para corregir este error, necesitamos instalar Karma globalmente. No solo Karma, sino el paquete diseñado específicamente para permitir el uso de Karma en la línea de comandos que es Karma-cli. Simplemente ejecute el comando, ′ Npm install -g karma-cli ’ .

Ahora vuelva a ejecutar el comando karma-init y podrá ver las preguntas como se muestra en la siguiente figura. Cuando responda a cada pregunta y presione la tecla 'ENTER', aparecerá la siguiente pregunta.

Ejecutando el comando Karma init en la línea de comandos.

Ejecutando el comando karma init

La siguiente tabla le dará una lista de las preguntas, su significado junto con cuál debe ser su respuesta en el contexto de este tutorial.

Preguntas sobre Karma init

P # 1) ¿Qué marco de prueba desea utilizar?

Explicación: Un marco de prueba es un paquete que proporciona las funciones y rutinas necesarias para automatizar el proceso de codificación de pruebas para cualquier producto de software de un idioma en particular. Por ejemplo, jasmine y mocha son marcos de prueba para paquetes de software JavaScript, Junit y JTest son marcos de prueba para Java, verifique esta para más detalles.

Responder: Aparece una instrucción que le pide que use la pestaña para ver otros marcos de prueba disponibles para una aplicación basada en nodos, pero de forma predeterminada, ve jazmín, así que simplemente haga clic en Intro.

P # 2) ¿Quieres usar Require.js?

Explicación: Require.js es un cargador de archivos y módulos JavaScript. Quizás se esté preguntando: ¿por qué necesita un cargador de archivos o módulos? Leer esta

Responder: En el código, escribiremos, no usaría require.js, así que simplemente responde no. La pregunta es ¿qué usaríamos? Para poder usar las instrucciones require para traer archivos externos a otro archivo, necesitamos un cargador de módulos, por lo que optaríamos por Browserify. Verá más detalles a continuación.

P # 3) ¿Quieres capturar cualquier navegador automáticamente?

Explicación: Recuerda que karma es una herramienta que te ayuda a probar tu interfaz en diferentes navegadores, por lo tanto, esta pregunta está destinada a que selecciones los navegadores que te gustaría activar cada vez que realizas la prueba con karma start.

Responder: Para esta lección, seleccione chrome, firefox y phantomjs. Ahora la pregunta es ¿qué es PhantomJS? PhantomJS es un navegador web sin cabeza que está diseñado para pruebas de sitios web sin cabeza, captura de pantalla, automatización de páginas y monitoreo de red, puede ver los detalles Aquí .

Otra pregunta, ¿qué es un navegador web sin cabeza? Un navegador web sin cabeza es un navegador sin una interfaz gráfica de usuario, los códigos se ejecutan en un entorno similar a una consola.

P # 4) ¿Cuál es la ubicación de sus archivos fuente y de prueba?

Explicación: Esta pregunta está destinada a exponer la ruta donde guardará los archivos de front-end y los archivos de prueba que realizarán las pruebas unitarias en ellos.

Responder: Para este proyecto, ingrese public / js / *. Js para la ruta de los archivos fuente y test / * Spec.js para la ruta de los archivos de prueba. El * Spec.js indica que todos los archivos de prueba se pueden llamar de cualquier manera, pero deben contener Spec al final con una extensión de archivo .js.

P # 5) ¿Debería excluirse alguno de los archivos incluidos en los patrones anteriores?

Explicación: A veces, puede ser necesario que no se carguen ciertos archivos de origen y archivos de prueba; esta pregunta está destinada a que especifique los archivos que Karma no debe cargar en el navegador.

Responder: Simplemente ingrese una cadena vacía presionando enter. ¿Viste el enunciado 'Puede usar patrones globales, Por ejemplo, '** / *. Swp'. ’. Los patrones globales se utilizan para especificar un conjunto de nombres de archivo en un entorno similar a Unix utilizando el carácter comodín.
En nuestro caso, public / js / *. Js representa cualquier archivo con el nombre de cualquier conjunto de caracteres indicado por (*) y tiene la extensión de archivo .js y reside en la ruta public / js. Leer más Aquí

P # 6) ¿Quieres que Karma observe todos los archivos y ejecute las pruebas al cambiar?

Explicación: Cuando un ejecutor de tareas / pruebas mira sus archivos, todo lo que simplemente significa es que cada vez que edita los archivos durante el desarrollo, el ejecutor de pruebas / tareas vuelve a cargar el archivo o vuelve a realizar la función en el archivo nuevamente, sin que usted venga a preguntar manualmente hacerlo de nuevo.

Responder: Así que simplemente responde que sí.

Otro contenido del archivo karma.conf.js

# 1) ruta base : Esta configuración lleva el nombre de cualquier carpeta que se debe utilizar para resolver la información de ruta proporcionada para los archivos de prueba y de origen.

# 2) preprocesadores : Lleva el nombre de los archivos de programa que se deben utilizar para procesar los archivos fuente y de prueba antes de cargarlos en el navegador.

¿Por qué es necesario?

Con el advenimiento del estilo de codificación ES6 que los navegadores aún no comprenden, existe la necesidad de transpilar el código del formato ES6 a ES5 que el navegador pueda entender, por lo tanto, se puede especificar el preprocesador de babel para Karma para que se use para transpilar el código de ES6 a ES5 antes de cargarlo en el navegador.

Hay otros usos de un preprocesador, P.ej. publicación de cobertura de prueba de código en coveralls.io, consulte Aquí para más detalles.

# 3) reporteros : Esta opción de configuración especifica el paquete que se utilizará para informar los resultados de la prueba. Hay varios reporteros para informar la cobertura de prueba de código; P.ej. cobertura. Pero, de forma predeterminada, está configurado para progresar. Tenga en cuenta que es una matriz, por lo que también puede agregar otros reporteros.

# 4) puerto : Esto especifica el puerto en el que se activa el navegador.

# 5) colores : Especifica si los reporteros deben producir los informes con colores.

#6) nivel de registro : Esto especifica el nivel de registro. De forma predeterminada, está configurado en config.LOG_INFO, lo que significa que solo se registra la información.

# 7) singleRun : Esto especifica si Karma debe salir después de ejecutar la prueba una vez. Si se establece en verdadero, Karma ejecuta la prueba y sale con el estado 0 o 1 dependiendo de si la prueba falló o pasó, de lo contrario, Karma no se detiene.

Esta configuración es necesaria para realizar pruebas de integración continua con herramientas como TravisCI y CircleCI.

# 8) concurrencia : Esto especifica cuántos navegadores Karma debe iniciar al mismo tiempo. De forma predeterminada, se establece en infinito.

Hacer clic Aquí para obtener información detallada sobre las opciones de configuración de Karma.

Si eres un aprendiz observador, entonces debes haber visto estas tres líneas.

|_+_|

Exploremos esto en la siguiente sección.

Lanzadores del navegador Karma

Karma-firefox-launcher, Karma-chrome-launcher y Karma-phantomjs-launcher se pueden denominar generalmente como los lanzadores del navegador de Karma.

Karma necesita activar estas aplicaciones de navegador que son independientes, por lo que se requiere una aplicación de terceros para proporcionar una interfaz a Karma para ejecutar el comando de shell que activa los navegadores en cualquier sistema operativo en el que Karma esté ejecutando una prueba.

Por lo tanto, son lanzadores de navegadores Karma para firefox, chrome y phantomjs respectivamente. Karma muestra esas declaraciones para informarnos de su incapacidad para instalar esos requisitos y luego nos pide que lo instalemos nosotros mismos manualmente.

Para hacer eso, usaremos el administrador de paquetes de nodos y ejecutaremos estos comandos desde la línea de comandos: npm instalar Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev

Todos debemos tener los navegadores Chrome y Firefox instalados, con Phantomjs no instalados. Si eso es cierto, entonces debe instalarlo, consulte Aquí para obtener detalles y haga clic en Aquí para obtener una guía de inicio rápido.

Conclusión

En este tutorial, intentamos comprender de qué se trata la prueba de unidades de front-end. También presentamos una importante herramienta de prueba de unidades de front-end para software JavaScript conocida como Karma, que es una herramienta basada en nodos. También presentamos las opciones de configuración básicas para el archivo Karma.conf.js y todo lo que implican.

cuál es el mejor descargador de música para pc

Para llevar

  • La prueba unitaria es un tipo de método de prueba de software en el que se prueba cada parte individual e independiente del código fuente para determinar si es lo suficientemente bueno para su uso.
  • Cuando realizamos esta prueba unitaria en el front-end (lado del cliente) del software, se conoce como prueba unitaria front-end.
  • Karma es una herramienta de prueba basada en nodos que le permite probar sus códigos JavaScript en múltiples navegadores reales. Por lo tanto, se denomina corredor de pruebas.
  • Nodejs es un JavaScript en tiempo de ejecución impulsado por eventos asincrónico que hace que la creación de aplicaciones escalables en red sea fácil y posible.
  • El administrador de paquetes de nodos (npm) es un administrador de paquetes de JavaScript que se utiliza para instalar otras aplicaciones o módulos preconstruidos basados ​​en nodos que quizás desee reutilizar en su propia aplicación.

Siguiente tutorial

Karma por sí solo no puede automatizar la prueba unitaria de aplicaciones de JavaScript, también necesita trabajar con otras herramientas de prueba como un marco de prueba que facilitará la redacción de nuestros casos de prueba.

En nuestro próximo tutorial, exploraremos acerca de Jasmine y el paquete Jasmine-Jquery que extiende la funcionalidad de Jasmine para poder probar accesorios HTML que hacen uso de la biblioteca JavaScript: Jquery.

Lectura recomendada

^