Viam Coverage Report

Extensión de VS Code y Kiro para visualizar reportes de cobertura de pruebas unitarias de código nuevo/modificado en un WebView interactivo, con integración de Quality Gate de SonarCloud.

✨ Características

• 📊 Visualización de cobertura de código nuevo 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: >= 85% cobertura
  • 🟡 Amarillo: >= 60% cobertura
  • 🔴 Rojo: < 60% cobertura
• 📈 Cálculo de cobertura estilo SonarQube (líneas + branches)
• 🔗 Integración con SonarCloud: Consulta automática del Quality Gate asignado al proyecto
• ✅ Validación de requisitos: Muestra si la cobertura local cumple el umbral de new_coverage del Quality Gate
• 🔒 Token seguro: Almacenamiento encriptado del token usando SecretStorage del sistema operativo

📋 Requisitos

• VS Code versión 1.102.0 o superior (o Kiro)
• Archivo coverage/coverage-*.json generado por Vitest, Jest, pytest u otro framework de testing
• Para integración con SonarCloud (opcional):
  • Archivo sonar-project.properties en la raíz del proyecto
  • Token de SonarCloud configurado

⚙️ Configuración de SonarCloud

1. Configurar Token de Autenticación

El token se almacena de forma segura y encriptada en el sistema operativo (Keychain en Mac, Credential Manager en Windows).

Pasos:

1. Abre la paleta de comandos (Cmd+Shift+P en Mac / Ctrl+Shift+P en Windows)
2. Busca: "Viam Coverage: Configurar Token de SonarCloud"
3. Pega tu token y presiona Enter
4. ✅ El token queda guardado de forma segura

Nota: Obtén tu token en https://sonarcloud.io/account/security o solicítalo al administrador de SonarCloud de tu organización.

2. Archivo sonar-project.properties

La extensión lee automáticamente el archivo sonar-project.properties para identificar el proyecto:

sonar.projectKey=TuOrganizacion_tu-proyecto
sonar.organization=tu-organizacion
sonar.host.url=https://sonarcloud.io

🚀 Uso

Ver Reporte de Cobertura

1. Abre un proyecto que contenga archivos coverage/coverage-*.json
2. Cmd+Shift+P / Ctrl+Shift+P
3. Busca: "Show cooberture Report"

Comandos Disponibles

📊 Visualización

Sección Principal

• Gráfico donut con porcentaje de cobertura total de código nuevo
• Semáforo visual (🟢🟡🔴) según rangos fijos 60%/85%
• Estadísticas: líneas cubiertas, total líneas, funciones, branches

Sección Quality Gate (SonarCloud)

• Nombre del Quality Gate asignado al proyecto
• Umbral de new_coverage requerido
• Estado de cumplimiento (✅ Cumple / ❌ No Cumple)
• Nota aclaratoria: El semáforo local es independiente del Quality Gate

Cobertura por Lenguaje

• Cards individuales por lenguaje detectado (JavaScript, Python, etc.)
• Porcentaje y semáforo por lenguaje

Detalle por Archivo

• Tabla con todos los archivos nuevos/modificados
• Cobertura de líneas, funciones y branches por archivo

📦 Instalación

Opción 1: Instalar desde archivo VSIX

1. Descarga el archivo viam-coverage-report-0.0.6.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 viam-coverage-report-0.0.6.vsix

🔒 Seguridad

• El token NO se guarda en archivos de configuración (settings.json)
• El token NO se expone en logs ni en la interfaz
• El token se almacena usando SecretStorage de VS Code:
  • macOS: Keychain
  • Windows: Credential Manager
  • Linux: libsecret (GNOME Keyring / KWallet)

🛠️ Desarrollo

Clonar e instalar dependencias

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

Generar el archivo .vsix

npm install --save-dev @vscode/vsce
npx vsce package --allow-missing-repository

📁 Estructura esperada de archivos

coverage-summary.json (Jest/Vitest)

{
  "total": {
    "lines": { "total": 100, "covered": 80, "pct": 80 },
    "functions": { "total": 20, "covered": 15, "pct": 75 },
    "branches": { "total": 10, "covered": 8, "pct": 80 }
  }
}

coverage-python.json (pytest/coverage.py)

{
  "meta": { "format": 3, "version": "7.x.x" },
  "files": { ... },
  "totals": { "covered_lines": 80, "num_statements": 100 }
}

🔄 Comportamiento sin SonarCloud

Si no hay configuración de SonarCloud o la conexión falla:

• La extensión continúa funcionando con el semáforo local (60%/85%)
• Se muestra un mensaje indicando cómo configurar el token
• No se inventan umbrales ni se simula cumplimiento

📝 Changelog

v0.0.6

• 🔒 SecretStorage: Token almacenado de forma segura y encriptada
• ✨ Nuevos comandos para configurar/eliminar token
• ✨ Bearer token (estándar Web API v2)
• ✨ Mensajes de error específicos (token no configurado, inválido, expirado)
• ✨ Rangos de cobertura: 60%/85%
• ✨ Integración con SonarCloud Quality Gate
• 🎨 Tooltip mejorado en gráfico donut

v0.0.5

• Versión inicial con soporte multi-lenguaje
• Gráfico donut de cobertura
• Detalle por archivo

📄 Licencia

MIT

¡Mejora la cobertura de tu código nuevo! 🚀