⚒️Módulo 3: Introducción a Karma

🔍 3.1. ¿Qué es Karma?

Karma es un test runner para JavaScript que ejecuta pruebas en diferentes navegadores. Es compatible con Jasmine, y su principal función es ejecutar las pruebas de manera automatizada y generar informes sobre el estado de las mismas. En el contexto de Angular, Karma está preconfigurado para trabajar con Jasmine, lo que facilita su integración en proyectos creados con Angular CLI.

⚙️ 3.2. Instalación y configuración de Karma

Cuando creas un proyecto Angular usando Angular CLI, Karma viene configurado por defecto. No necesitas instalarlo por separado. Sin embargo, si estás en un entorno donde deseas configurarlo manualmente, puedes instalar Karma y sus dependencias:

1. Instalación de Karma y otros paquetes necesarios: npm install karma karma-jasmine karma-chrome-launcher --save-dev

2. Después de la instalación, es necesario crear el archivo de configuración con: npx karma init

Este comando generará un archivo karma.conf.js donde puedes personalizar la configuración de Karma según tus necesidades.

📁 3.3. Karma y Angular CLI: Configuración predeterminada

Cuando generas un nuevo proyecto Angular, Angular CLI ya incluye el archivo de configuración de Karma, karma.conf.js. Este archivo define cómo y dónde se ejecutarán las pruebas. La configuración básica incluye la integración con Jasmine y el uso de Chrome como navegador para ejecutar las pruebas.

Puedes ejecutar las pruebas simplemente con: ng test

Este comando abre el navegador, ejecuta las pruebas y muestra los resultados en tiempo real. Si quieres que las pruebas se ejecuten sin abrir un navegador (modo headless), puedes modificar la configuración.

🛠️ 3.4. Entendiendo el archivo karma.conf.js

El archivo karma.conf.js es el corazón de la configuración de Karma. Contiene varias opciones clave:

• frameworks: Especifica qué frameworks de prueba estás utilizando, como Jasmine.

• files: Define los archivos que Karma necesita cargar para ejecutar las pruebas (normalmente especifica los archivos de pruebas o de código fuente).

• browsers: Lista los navegadores donde se ejecutarán las pruebas. Por defecto, se usa Chrome, pero puedes agregar otros como Firefox.

• reporters: Define cómo Karma debe mostrar los resultados de las pruebas (por ejemplo, en la terminal o en un archivo de reporte).

Ejemplo básico de archivo karma.conf.js:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],  // Usamos Jasmine como framework de pruebas
    files: [
      'src/**/*.spec.ts'  // Indicamos a Karma que ejecute todas las pruebas con extensión .spec.ts
    ],
    browsers: ['Chrome'],  // Usamos el navegador Chrome para las pruebas
    reporters: ['progress'],  // Mostramos el progreso de las pruebas en la terminal
    singleRun: false  // Con 'false', Karma sigue ejecutando las pruebas en segundo plano
  });
};

▶️ 3.5. Ejecutando pruebas con Karma

Para ejecutar las pruebas en un proyecto Angular, simplemente debes usar el comando: ng test

Este comando ejecuta Karma, que a su vez ejecuta todas las pruebas de Jasmine definidas en tu proyecto. Al hacer cambios en el código, Karma detectará estos cambios y volverá a ejecutar las pruebas automáticamente, mostrando los resultados en tiempo real.

Si quieres que las pruebas se ejecuten una única vez (ideal para entornos de integración continua), puedes usar: ng test --watch=false

🖥️ 3.6. Integración con navegadores y headless testing

Por defecto, Karma abre un navegador para ejecutar las pruebas. Sin embargo, en muchos casos (especialmente en CI/CD o servidores), es mejor ejecutar las pruebas en modo "headless" (sin interfaz gráfica).

Puedes configurar Karma para usar Chrome Headless añadiendo lo siguiente en karma.conf.js:

browsers: ['ChromeHeadless'],  // Usamos Chrome sin interfaz gráfica
singleRun: true  // Ejecuta las pruebas solo una vez y luego cierra el proceso

Esto es útil para ejecutar pruebas en servidores o en pipelines de integración continua, ya que no es necesario abrir una ventana de navegador física.

📝 3.7. Reportes de pruebas y depuración en Karma

Karma genera reportes sobre el estado de las pruebas. El reporte por defecto en la terminal muestra el número de pruebas ejecutadas, cuántas pasaron, cuántas fallaron, y los detalles de los errores.

Puedes configurar reportes adicionales en karma.conf.js:

• reporters: Puedes agregar más opciones como dots, progress o junit para generar diferentes tipos de reportes.

Para agregar el reporte en formato junit (ideal para herramientas CI):

reporters: ['progress', 'junit'],  // Progreso en la terminal y reporte en formato junit
junitReporter: {
  outputDir: 'test-results',  // Directorio donde se guardarán los reportes
  outputFile: 'junit-report.xml'  // Nombre del archivo de reporte
}

📊 3.8. Cobertura de código con karma-coverage

La cobertura de código es una métrica importante que muestra qué porcentaje del código ha sido ejecutado durante las pruebas. Para obtener un reporte de cobertura en Angular, puedes usar el plugin karma-coverage.

Pasos para habilitar cobertura de código:

1. Instala el plugin: npm install karma-coverage --save-dev

2. Actualiza tu archivo karma.conf.js para incluir coverage como uno de los reportes:

reporters: ['progress', 'coverage'],  // Agrega el reporte de cobertura
coverageReporter: {
  type: 'html',
  dir: 'coverage/'  // El reporte se guardará en la carpeta 'coverage'
}

1. Ejecuta las pruebas con: ng test

Al finalizar, podrás revisar el reporte de cobertura en la carpeta coverage/ en formato HTML, donde se mostrará qué líneas de código han sido ejecutadas y cuáles no.