Coverage Summary

Extensión de VS Code para visualizar reportes de cobertura de pruebas en un WebView interactivo con estilo similar a SonarQube.

✨ Características

• 📊 Visualización de cobertura de código en formato tabla
• 🍩 Gráfico tipo donut con el porcentaje de cobertura global
• 🎨 Código de colores para identificar rápidamente áreas problemáticas:
  • 🟢 Verde: >= 90% cobertura
  • 🟡 Amarillo: >= 70% cobertura
  • 🔴 Rojo: < 70% cobertura
• 📈 Cálculo de cobertura estilo SonarQube (líneas + branches)

📋 Requisitos

• VS Code versión 1.102.0 o superior
• Archivo coverage/coverage-summary.json generado por Vitest, Jest u otro framework de testing

🚀 Uso

1. Abre un proyecto que contenga el archivo coverage/coverage-summary.json
2. Abre la paleta de comandos (Ctrl+Shift+P / Cmd+Shift+P)
3. Busca y ejecuta: "Show cooberture Report"
4. Se abrirá un panel con el reporte visual de cobertura

📦 Instalación

Opción 1: Instalar desde archivo VSIX

1. Descarga el archivo coverage-summary-0.0.4.vsix
2. Abre VS Code
3. Ve a Extensions (Ctrl+Shift+X / Cmd+Shift+X)
4. Haz clic en los 3 puntos (...) arriba a la derecha
5. Selecciona "Install from VSIX..."
6. Selecciona el archivo .vsix descargado

Opción 2: Instalar desde terminal

code --install-extension coverage-summary-0.0.4.vsix

🛠️ Desarrollo y generación del .vsix

Si deseas modificar la extensión o generar tu propio archivo .vsix:

1. Clonar e instalar dependencias

git clone <url-del-repositorio>
cd report-sonar-unit-test
npm install

2. Instalar vsce (herramienta de empaquetado)

npm install --save-dev @vscode/vsce

3. Generar el archivo .vsix

npx vsce package --allow-missing-repository

Esto generará el archivo coverage-summary-0.0.4.vsix en la raíz del proyecto.

📁 Estructura esperada del JSON

La extensión espera un archivo coverage/coverage-summary.json con la siguiente estructura:

{
  "total": {
    "lines": { "total": 100, "covered": 80, "pct": 80 },
    "statements": { "total": 100, "covered": 80, "pct": 80 },
    "functions": { "total": 20, "covered": 15, "pct": 75 },
    "branches": { "total": 10, "covered": 8, "pct": 80 }
  },
  "src/archivo.js": {
    "lines": { "total": 50, "covered": 40, "pct": 80 },
    "statements": { "total": 50, "covered": 40, "pct": 80 },
    "functions": { "total": 10, "covered": 8, "pct": 80 },
    "branches": { "total": 5, "covered": 4, "pct": 80 }
  }
}

⚙️ Configuración de Vitest

Para generar el archivo de cobertura compatible, agrega esto a tu vitest.config.js:

export default {
  test: {
    coverage: {
      reporter: ['json-summary'],
    },
  },
};

⚙️ Configuración de Jest

Para Jest, agrega esto a tu jest.config.js:

module.exports = {
  collectCoverage: true,
  coverageReporters: ['json-summary'],
};

📝 Changelog

Consulta el archivo CHANGELOG.md en el repositorio para el historial de cambios.

📄 Licencia

MIT

¡Disfruta mejorando la cobertura de tu código! 🚀