Saltar al contenido
Consejos

Introducción al desarrollo impulsado por pruebas angulares

Para asegurar una configuración rápida y eficiente, recomiendo usar el Node Package Manager (npm) para mantener las dependencias de su proyecto Angular.

Primero, instalar el CLI del Karma a nivel mundial. Necesitaremos esto para poder ejecutar el comando de karma directamente desde la línea de comandos.

Introducción al desarrollo impulsado por pruebas angulares
Introducción al desarrollo impulsado por pruebas angulares
1npminstall -g karma-cli

bash

Luego, crea un directorio donde almacenarás los archivos de tu proyecto. Abre tu terminal y ejecuta los siguientes comandos:

12mkdir myitemsappcd myitemsapp

bash

Instalación de paquetes

Una vez que estés en el directorio, empieza a configurar tus dependencias del proyecto. Primero, inicializa tu archivo package.json:

1npm init

bash

Se le harán varias preguntas sobre los detalles de su proyecto. Puede saltárselas y simplemente copiar el contenido abajo en su archivo package.json.

12345678910111213141516171819{"nombre": "myitemsapp", "versión": "1.0.0", "descripción":"", "principal": "karma.conf.js", "directorios":{"prueba": "pruebas"}, "dependencias":{"angular":"^1". 5.7", "save":"^2.3.0"}, "devDependencias":{}, "scripts":{"test": "echo N "Error: no se especifica ninguna pruebaN" && exit 1"}, "author":"", "license": "ISC"}

json

Entonces, empieza a instalar las dependencias de tu proyecto, empezando por Angular:

1234npminstall angular --savenpminstall karma --save-devnpminstall karma-jasmine jasmine-core --save-devnpminstall angular-mocks --save-dev

bash

A continuación, tienes que elegir un lanzador de navegador para que el Karma lo use: Puedes usar uno para Chrome(npm install karma-chrome-launcher –save-dev) , Firefox , Internet Explorer, Opera, PhantomJS y otros.

Iré con Google Chrome:

1npminstall karma-chrome-launcher --save-dev

bash

Configurando el Karma

Configure su entorno de prueba usando un archivo de configuración (karma.conf.js). Esto es similar a la configuración del paquete.json, que usamos para configurar el entorno del proyecto.

Hay muchas opciones para configurar el Karma. Las más esenciales son las siguientes:

  • Marcos – los marcos de prueba que se van a utilizar. En esta guía, estamos usando a Jasmine.
  • Archivos… archivos que serán usados para las pruebas. Normalmente se incluyen tanto los archivos de marco (en este caso, Angular) como el proyecto y los propios archivos de prueba.
  • Navegadores – Puedes especificar qué navegadores debe usar el Karma para realizar sus pruebas.

Antes de empezar, crea dos carpetas en tu directorio de trabajo.

12mkdir appmkdir tests

Usaremos la aplicación para almacenar nuestro código de aplicación y las pruebas para mantener nuestras pruebas. De esta manera, mantendremos los dos separados. En casos más avanzados, se optaría por un enfoque más genérico utilizando comodines y almacenando los archivos de prueba y de aplicación juntos.

Con su terminal, ejecute el siguiente comando en el directorio del proyecto:

1karma init

bash

Responda a las preguntas como sigue:

  • Marco de pruebas: Seleccionar jazmín.
  • ¿Quieres usar Require.js?: no
  • Navegador: Cromado.
  • Especifica las rutas de tus archivos js y spec: Introduzca cada uno de los siguientes, presionando Enter después de cada uno. Después de introducir el último, pulse enter de nuevo:app/**.jstests/**.jsNota: Recibirá una advertencia en su consola después de cada uno de estos diciendo que no hay archivos que coincidan con este patrón. Está bien, es normal.node_modules/angular/angular.jsnode_modules/angular-mocks/angular-mocks.js
  • ¿Algún archivo excluido? Sólo tienes que pulsar Intro
  • ¿Quieres que el Karma vigile todos los archivos y haga pruebas de cambio? Sí

Al final, deberías terminar con un archivo karma.conf.js que se vea así:

1234567891011121314151617181920212223242526272829303132333435363738394041424344module.exports=function(config){ config.set({/// ruta base que será usada para resolver todos los patrones (eg. archivos, excluido) basePath:"",// marcos a utilizar// marcos disponibles: https://npmjs.org/browse/keyword/karma-adapter frameworks:["jasmine"],// lista de archivos / patrones a cargar en el navegador archivos:["node_modules/angular/angular. js", "node_modules/angular-mocks/angular-mocks.js", "app/**.js", "tests/**.js"],// lista de archivos a excluir:[],// archivos de coincidencia de preprocesamiento antes de servirlos al navegador // preprocesadores disponibles: https://npmjs.org/browse/keyword/karma-preprocessor preprocesadores:{},// reportero de resultados de pruebas a utilizar // valores posibles:$0027dots$0027,$0027progress$0027// reporteros disponibles: https://npmjs. org/browse/keyword/karma-reporter reporters:["progress"],// servidor web port port:9876,// habilitar / deshabilitar colores en la salida(reporters y logs) colores:true,// nivel de registro // valores posibles: config.LOG_DISABLE||| config.LOG_ERROR|| config.LOG_WARN|| config.LOG_INFO|| config.LOG_DEBUG logLevel: config. LOG_INFO,// habilitar / deshabilitar ver el archivo y ejecutar las pruebas siempre que cualquier archivo cambie autoWatch:true,// iniciar estos navegadores // lanzadores de navegadores disponibles: https://npmjs.org/browse/keyword/karma-launcher navegadores:["Chrome"],//ContinuoModo de Integración //iftrue,Karma captura los navegadores, ejecuta las pruebas y sale de singleRun:false,//ConcurrencyLevel// cuantos navegadores deben iniciarse simultáneamente concurrencia:Infinity});};

javascript

Una vez que termines este paso, estarás listo para sumergirte en las características de prueba.

Realizando sus pruebas

Para ejecutar sus pruebas, puede ejecutar cualquiera de estos comandos en la terminal:

12karma startnpm test