# 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`:**

```javascript
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`:

```javascript
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):

```javascript
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:

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

3. 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://3ntr0pia-learning.gitbook.io/3ntr0-apuntes/angular/testing-jasmine-y-karma/modulo-3-introduccion-a-karma.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.