📚Módulo 6: Técnicas avanzadas en Karma

🔧 6.1. Configuración personalizada del entorno de pruebas

Karma permite personalizar muchos aspectos del entorno de pruebas para adaptarse mejor a las necesidades de tu proyecto. Puedes ajustar:

• Ejecución en múltiples navegadores: Ejecuta pruebas en distintos navegadores simultáneamente (Chrome, Firefox, Edge, etc.).

• Headless testing: Ejecutar pruebas sin interfaz gráfica, ideal para entornos de CI/CD.

• Ejecución selectiva de pruebas: Definir qué pruebas se ejecutarán en base a patrones de archivos.

Ejemplo de configuración en Karma para múltiples navegadores y headless:

module.exports = function (config: any) {
  config.set({
    frameworks: ["jasmine", "@angular-devkit/build-angular"], // Incluimos Jasmine y Angular
    files: ["src/**/*.spec.ts"], // Ruta de los archivos de pruebas

    // Ejecutar en múltiples navegadores
    browsers: ["Chrome", "Firefox", "Edge"],

    // Modo headless para Chrome (sin interfaz gráfica)
    customLaunchers: {
      ChromeHeadless: {
        base: "Chrome",
        flags: [
          "--headless",
          "--disable-gpu",
          "--no-sandbox",
          "--disable-dev-shm-usage",
        ],
      },
    },

    // Reportes de cobertura
    reporters: ["progress", "coverage"],
    preprocessors: {
      "src/**/*.spec.ts": ["coverage"], // Añadimos cobertura de código a los archivos de prueba
    },

    // Directorio de los reportes de cobertura
    coverageReporter: {
      type: "html",
      dir: "coverage/",
    },

    singleRun: true, // Ejecuta una sola vez y finaliza (útil en CI)
  });
};

🚀 6.2. Karma y CI/CD (Integración continua)

Karma se integra fácilmente con herramientas de CI/CD como Jenkins, GitLab CI, Travis CI o CircleCI. En estos entornos, es importante ejecutar las pruebas en modo headless para evitar la necesidad de abrir un navegador gráfico. Ejemplo de integración en GitLab CI:

Añade un archivo .gitlab-ci.yml en la raíz de tu proyecto Angular:

 image: node:16

stages:

    test

cache: paths: - node_modules/

before_script:

    npm install # Instala las dependencias

test: stage: test script: - npm run test -- --watch=false --browsers=ChromeHeadless # Ejecuta Karma en modo headless artifacts: paths: - coverage/ # Guarda los reportes de cobertura como artefacto ```

Configura Karma en modo headless en el archivo karma.conf.js:

module.exports = function(config: any) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    browsers: ['ChromeHeadless'],  // Modo headless para CI/CD
    singleRun: true,  // Ejecuta una sola vez para CI
    reporters: ['progress', 'coverage'],  // Reporte de progreso y cobertura
    coverageReporter: {
      type: 'lcov',  // Generamos reporte en formato lcov para CI
      dir: 'coverage/',
      subdir: '.',
      check: {  // Opcional: condiciones mínimas de cobertura
        global: {
          statements: 80,
          branches: 70,
          functions: 80,
          lines: 80
        }
      }
    }
  });
};

📊 6.3. Generación de reportes avanzados con Karma

Karma tiene soporte para generar reportes avanzados, que pueden ser utilizados en procesos de integración continua o para verificar la calidad del código. Algunos reportes comunes incluyen:

Cobertura de código: Generar reportes de cobertura de líneas, ramas, funciones, etc.
JUnit: Reportes en formato XML, ideales para herramientas como Jenkins.

Ejemplo de configuración de reportes en Karma:

module.exports = function(config: any) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    browsers: ['ChromeHeadless'],
    reporters: ['progress', 'coverage', 'junit'],  // Añadimos el reporte junit
    coverageReporter: {
      type: 'html',  // Genera un reporte HTML
      dir: 'coverage/',
      check: {  // Condiciones mínimas de cobertura
        global: {
          statements: 80,
          branches: 70,
          functions: 80,
          lines: 80
        }
      }
    },
    junitReporter: {
      outputDir: 'test-results',  // Carpeta para guardar los reportes JUnit
      outputFile: 'junit-report.xml',
      useBrowserName: false
    },
    singleRun: true
  });
};

🏃‍♂️ 6.4. Estrategias para acelerar las pruebas con Karma

En proyectos grandes, ejecutar todas las pruebas puede ser lento. Karma ofrece varias estrategias para acelerar las pruebas:

Ejecución paralela: Puedes configurar Karma para que ejecute las pruebas en múltiples procesos de navegador, acelerando el tiempo de ejecución.
Ejecución selectiva de pruebas: Ejecuta solo las pruebas relacionadas con los cambios recientes (útil cuando trabajas en una sección del proyecto).

Ejemplo de ejecución paralela:

module.exports = function(config: any) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    browsers: ['ChromeHeadless'],
    concurrency: 2,  // Ejecutamos pruebas en 2 navegadores al mismo tiempo
    singleRun: true,
    reporters: ['progress']
  });
};

Ejemplo de ejecución selectiva de pruebas:

Puedes utilizar patrones de archivos para ejecutar solo las pruebas necesarias. Por ejemplo, si solo deseas ejecutar las pruebas de los servicios:

module.exports = function(config: any) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    files: ['src/app/services/**/*.spec.ts'],  // Solo ejecuta pruebas en la carpeta de servicios
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};