Add scripts for E2E and unit test coverage integration
- Added `merge-coverage.ts` to combine Jest and Playwright coverage into a unified report with comprehensive statistics and thresholds. - Included `convert-v8-to-istanbul.ts` for transforming Playwright V8 coverage into Istanbul format, enabling seamless merging. - Introduced E2E coverage helpers for Playwright tests (`startCoverage`, `stopAndSaveCoverage`, `withCoverage`) to collect and process both V8 and Istanbul coverage. - Configured `.nycrc.json` with coverage thresholds and reporting formats for improved visibility and enforcement.
This commit is contained in:
215
frontend/scripts/convert-v8-to-istanbul.ts
Normal file
215
frontend/scripts/convert-v8-to-istanbul.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* V8 to Istanbul Coverage Converter
|
||||
*
|
||||
* Converts Playwright's V8 coverage format to Istanbul format
|
||||
* so it can be merged with Jest coverage data.
|
||||
*
|
||||
* Usage:
|
||||
* npm run coverage:convert
|
||||
* # or directly:
|
||||
* tsx scripts/convert-v8-to-istanbul.ts
|
||||
*
|
||||
* Input:
|
||||
* - V8 coverage files in: ./coverage-e2e/raw/*.json
|
||||
* - Generated by Playwright's page.coverage API
|
||||
*
|
||||
* Output:
|
||||
* - Istanbul coverage in: ./coverage-e2e/.nyc_output/e2e-coverage.json
|
||||
* - Ready to merge with Jest coverage
|
||||
*
|
||||
* Prerequisites:
|
||||
* - npm install -D v8-to-istanbul
|
||||
* - E2E tests must collect coverage using page.coverage API
|
||||
*/
|
||||
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
// V8 coverage entry format
|
||||
interface V8CoverageEntry {
|
||||
url: string;
|
||||
scriptId: string;
|
||||
source?: string;
|
||||
functions: Array<{
|
||||
functionName: string;
|
||||
ranges: Array<{
|
||||
startOffset: number;
|
||||
endOffset: number;
|
||||
count: number;
|
||||
}>;
|
||||
isBlockCoverage: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
// Istanbul coverage format
|
||||
interface IstanbulCoverage {
|
||||
[filePath: string]: {
|
||||
path: string;
|
||||
statementMap: Record<string, any>;
|
||||
fnMap: Record<string, any>;
|
||||
branchMap: Record<string, any>;
|
||||
s: Record<string, number>;
|
||||
f: Record<string, number>;
|
||||
b: Record<string, number[]>;
|
||||
};
|
||||
}
|
||||
|
||||
async function convertV8ToIstanbul() {
|
||||
console.log('\n🔄 Converting V8 Coverage to Istanbul Format...\n');
|
||||
|
||||
const rawDir = path.join(process.cwd(), 'coverage-e2e/raw');
|
||||
const outputDir = path.join(process.cwd(), 'coverage-e2e/.nyc_output');
|
||||
|
||||
// Check if raw directory exists
|
||||
try {
|
||||
await fs.access(rawDir);
|
||||
} catch {
|
||||
console.log('❌ No V8 coverage found at:', rawDir);
|
||||
console.log('\nℹ️ To generate V8 coverage:');
|
||||
console.log(' 1. Add coverage helpers to E2E tests (see E2E_COVERAGE_GUIDE.md)');
|
||||
console.log(' 2. Run: E2E_COVERAGE=true npm run test:e2e');
|
||||
console.log('\nℹ️ Alternatively, use Istanbul instrumentation (see guide)');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create output directory
|
||||
await fs.mkdir(outputDir, { recursive: true });
|
||||
|
||||
// Check for v8-to-istanbul dependency
|
||||
let v8toIstanbul: any;
|
||||
try {
|
||||
// Dynamic import to handle both scenarios (installed vs not installed)
|
||||
const module = await import('v8-to-istanbul');
|
||||
v8toIstanbul = module.default || module;
|
||||
} catch (error) {
|
||||
console.log('❌ v8-to-istanbul not installed\n');
|
||||
console.log('📦 Install it with:');
|
||||
console.log(' npm install -D v8-to-istanbul\n');
|
||||
console.log('⚠️ Note: V8 coverage approach requires this dependency.');
|
||||
console.log(' Alternatively, use Istanbul instrumentation (no extra deps needed).\n');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Read all V8 coverage files
|
||||
const files = await fs.readdir(rawDir);
|
||||
const jsonFiles = files.filter(f => f.endsWith('.json'));
|
||||
|
||||
if (jsonFiles.length === 0) {
|
||||
console.log('⚠️ No coverage files found in:', rawDir);
|
||||
console.log('\nRun E2E tests with coverage enabled:');
|
||||
console.log(' E2E_COVERAGE=true npm run test:e2e\n');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`📁 Found ${jsonFiles.length} V8 coverage file(s)\n`);
|
||||
|
||||
const istanbulCoverage: IstanbulCoverage = {};
|
||||
const projectRoot = process.cwd();
|
||||
let totalConverted = 0;
|
||||
let totalSkipped = 0;
|
||||
|
||||
// Process each V8 coverage file
|
||||
for (const file of jsonFiles) {
|
||||
const filePath = path.join(rawDir, file);
|
||||
console.log(`📄 Processing: ${file}`);
|
||||
|
||||
try {
|
||||
const content = await fs.readFile(filePath, 'utf-8');
|
||||
const v8Coverage: V8CoverageEntry[] = JSON.parse(content);
|
||||
|
||||
for (const entry of v8Coverage) {
|
||||
try {
|
||||
// Skip non-source files
|
||||
if (
|
||||
!entry.url.startsWith('http://localhost') &&
|
||||
!entry.url.startsWith('file://')
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Skip node_modules, .next, and other irrelevant files
|
||||
if (
|
||||
entry.url.includes('node_modules') ||
|
||||
entry.url.includes('/.next/') ||
|
||||
entry.url.includes('/_next/') ||
|
||||
entry.url.includes('/webpack/')
|
||||
) {
|
||||
totalSkipped++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Convert URL to file path
|
||||
let sourcePath: string;
|
||||
if (entry.url.startsWith('file://')) {
|
||||
sourcePath = fileURLToPath(entry.url);
|
||||
} else {
|
||||
// HTTP URL - extract path
|
||||
const url = new URL(entry.url);
|
||||
// Try to map to source file
|
||||
sourcePath = path.join(projectRoot, 'src', url.pathname);
|
||||
}
|
||||
|
||||
// Skip if not in src/
|
||||
if (!sourcePath.includes('/src/')) {
|
||||
totalSkipped++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Verify file exists
|
||||
try {
|
||||
await fs.access(sourcePath);
|
||||
} catch {
|
||||
totalSkipped++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Convert using v8-to-istanbul
|
||||
const converter = v8toIstanbul(sourcePath);
|
||||
await converter.load();
|
||||
converter.applyCoverage(entry.functions);
|
||||
const converted = converter.toIstanbul();
|
||||
|
||||
// Merge into combined coverage
|
||||
Object.assign(istanbulCoverage, converted);
|
||||
totalConverted++;
|
||||
|
||||
} catch (error: any) {
|
||||
console.log(` ⚠️ Skipped ${entry.url}: ${error.message}`);
|
||||
totalSkipped++;
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.log(` ❌ Failed to process ${file}: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Write Istanbul coverage
|
||||
const outputPath = path.join(outputDir, 'e2e-coverage.json');
|
||||
await fs.writeFile(outputPath, JSON.stringify(istanbulCoverage, null, 2));
|
||||
|
||||
console.log('\n' + '='.repeat(70));
|
||||
console.log('✅ Conversion Complete');
|
||||
console.log('='.repeat(70));
|
||||
console.log(`\n Files converted: ${totalConverted}`);
|
||||
console.log(` Files skipped: ${totalSkipped}`);
|
||||
console.log(` Output location: ${outputPath}\n`);
|
||||
|
||||
if (totalConverted === 0) {
|
||||
console.log('⚠️ No files were converted. Possible reasons:');
|
||||
console.log(' • V8 coverage doesn\'t contain source files from src/');
|
||||
console.log(' • Coverage was collected for build artifacts instead of source');
|
||||
console.log(' • Source maps are not correctly configured\n');
|
||||
console.log('💡 Consider using Istanbul instrumentation instead (see guide)\n');
|
||||
} else {
|
||||
console.log('✅ Ready to merge with Jest coverage:');
|
||||
console.log(' npm run coverage:merge\n');
|
||||
}
|
||||
}
|
||||
|
||||
// Run the conversion
|
||||
convertV8ToIstanbul().catch((error) => {
|
||||
console.error('\n❌ Error converting coverage:', error);
|
||||
process.exit(1);
|
||||
});
|
||||
209
frontend/scripts/merge-coverage.ts
Normal file
209
frontend/scripts/merge-coverage.ts
Normal file
@@ -0,0 +1,209 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Merge Coverage Script
|
||||
*
|
||||
* Combines Jest unit test coverage with Playwright E2E test coverage
|
||||
* to generate a comprehensive combined coverage report.
|
||||
*
|
||||
* Usage:
|
||||
* npm run coverage:merge
|
||||
* # or directly:
|
||||
* tsx scripts/merge-coverage.ts
|
||||
*
|
||||
* Prerequisites:
|
||||
* - Jest coverage must exist at: ./coverage/coverage-final.json
|
||||
* - E2E coverage must exist at: ./coverage-e2e/.nyc_output/*.json
|
||||
*
|
||||
* Output:
|
||||
* - Combined coverage report in: ./coverage-combined/
|
||||
* - Formats: HTML, text, JSON, LCOV
|
||||
*/
|
||||
|
||||
import { createCoverageMap } from 'istanbul-lib-coverage';
|
||||
import { createContext } from 'istanbul-lib-report';
|
||||
import reports from 'istanbul-reports';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
interface CoverageData {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface MergeStats {
|
||||
jestFiles: number;
|
||||
e2eFiles: number;
|
||||
combinedFiles: number;
|
||||
jestOnlyFiles: string[];
|
||||
e2eOnlyFiles: string[];
|
||||
sharedFiles: string[];
|
||||
}
|
||||
|
||||
async function mergeCoverage() {
|
||||
console.log('\n🔄 Merging Coverage Data...\n');
|
||||
|
||||
const map = createCoverageMap();
|
||||
const stats: MergeStats = {
|
||||
jestFiles: 0,
|
||||
e2eFiles: 0,
|
||||
combinedFiles: 0,
|
||||
jestOnlyFiles: [],
|
||||
e2eOnlyFiles: [],
|
||||
sharedFiles: [],
|
||||
};
|
||||
|
||||
const jestFiles = new Set<string>();
|
||||
const e2eFiles = new Set<string>();
|
||||
|
||||
// Step 1: Load Jest coverage
|
||||
console.log('📊 Loading Jest unit test coverage...');
|
||||
const jestCoveragePath = path.join(process.cwd(), 'coverage/coverage-final.json');
|
||||
|
||||
if (fs.existsSync(jestCoveragePath)) {
|
||||
const jestCoverage: CoverageData = JSON.parse(
|
||||
fs.readFileSync(jestCoveragePath, 'utf-8')
|
||||
);
|
||||
|
||||
Object.keys(jestCoverage).forEach(file => jestFiles.add(file));
|
||||
stats.jestFiles = jestFiles.size;
|
||||
|
||||
console.log(` ✅ Loaded ${stats.jestFiles} files from Jest coverage`);
|
||||
map.merge(jestCoverage);
|
||||
} else {
|
||||
console.log(' ⚠️ No Jest coverage found at:', jestCoveragePath);
|
||||
console.log(' Run: npm run test:coverage');
|
||||
}
|
||||
|
||||
// Step 2: Load E2E coverage
|
||||
console.log('\n🎭 Loading Playwright E2E test coverage...');
|
||||
const e2eDir = path.join(process.cwd(), 'coverage-e2e/.nyc_output');
|
||||
|
||||
if (fs.existsSync(e2eDir)) {
|
||||
const files = fs.readdirSync(e2eDir).filter(f => f.endsWith('.json'));
|
||||
|
||||
if (files.length === 0) {
|
||||
console.log(' ⚠️ No E2E coverage files found in:', e2eDir);
|
||||
console.log(' Run: E2E_COVERAGE=true npm run test:e2e');
|
||||
} else {
|
||||
for (const file of files) {
|
||||
const coverage: CoverageData = JSON.parse(
|
||||
fs.readFileSync(path.join(e2eDir, file), 'utf-8')
|
||||
);
|
||||
|
||||
Object.keys(coverage).forEach(f => e2eFiles.add(f));
|
||||
map.merge(coverage);
|
||||
console.log(` ✅ Loaded E2E coverage from: ${file}`);
|
||||
}
|
||||
stats.e2eFiles = e2eFiles.size;
|
||||
console.log(` 📁 Total unique files in E2E coverage: ${stats.e2eFiles}`);
|
||||
}
|
||||
} else {
|
||||
console.log(' ⚠️ No E2E coverage directory found at:', e2eDir);
|
||||
console.log(' Run: E2E_COVERAGE=true npm run test:e2e');
|
||||
}
|
||||
|
||||
// Step 3: Calculate statistics
|
||||
stats.combinedFiles = map.files().length;
|
||||
|
||||
map.files().forEach(file => {
|
||||
const inJest = jestFiles.has(file);
|
||||
const inE2E = e2eFiles.has(file);
|
||||
|
||||
if (inJest && inE2E) {
|
||||
stats.sharedFiles.push(file);
|
||||
} else if (inJest) {
|
||||
stats.jestOnlyFiles.push(file);
|
||||
} else if (inE2E) {
|
||||
stats.e2eOnlyFiles.push(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Step 4: Generate reports
|
||||
console.log('\n📝 Generating combined coverage reports...');
|
||||
|
||||
const reportDir = path.join(process.cwd(), 'coverage-combined');
|
||||
fs.mkdirSync(reportDir, { recursive: true });
|
||||
|
||||
const context = createContext({
|
||||
dir: reportDir,
|
||||
coverageMap: map,
|
||||
});
|
||||
|
||||
const reportTypes = ['text', 'text-summary', 'html', 'json', 'lcov'];
|
||||
|
||||
reportTypes.forEach((reportType) => {
|
||||
try {
|
||||
const report = reports.create(reportType as any, {});
|
||||
report.execute(context);
|
||||
console.log(` ✅ Generated ${reportType} report`);
|
||||
} catch (error) {
|
||||
console.error(` ❌ Failed to generate ${reportType} report:`, error);
|
||||
}
|
||||
});
|
||||
|
||||
// Step 5: Print summary
|
||||
const summary = map.getCoverageSummary();
|
||||
|
||||
console.log('\n' + '='.repeat(70));
|
||||
console.log('📊 COMBINED COVERAGE SUMMARY');
|
||||
console.log('='.repeat(70));
|
||||
console.log(`\n Statements: ${summary.statements.pct.toFixed(2)}% (${summary.statements.covered}/${summary.statements.total})`);
|
||||
console.log(` Branches: ${summary.branches.pct.toFixed(2)}% (${summary.branches.covered}/${summary.branches.total})`);
|
||||
console.log(` Functions: ${summary.functions.pct.toFixed(2)}% (${summary.functions.covered}/${summary.functions.total})`);
|
||||
console.log(` Lines: ${summary.lines.pct.toFixed(2)}% (${summary.lines.covered}/${summary.lines.total})`);
|
||||
|
||||
console.log('\n' + '-'.repeat(70));
|
||||
console.log('📁 FILE COVERAGE BREAKDOWN');
|
||||
console.log('-'.repeat(70));
|
||||
console.log(`\n Total files: ${stats.combinedFiles}`);
|
||||
console.log(` Jest only: ${stats.jestOnlyFiles.length}`);
|
||||
console.log(` E2E only: ${stats.e2eOnlyFiles.length}`);
|
||||
console.log(` Covered by both: ${stats.sharedFiles.length}`);
|
||||
|
||||
// Show E2E-only files (these were excluded from Jest)
|
||||
if (stats.e2eOnlyFiles.length > 0) {
|
||||
console.log('\n 📋 Files covered ONLY by E2E tests (excluded from unit tests):');
|
||||
stats.e2eOnlyFiles.slice(0, 10).forEach(file => {
|
||||
const fileCoverage = map.fileCoverageFor(file);
|
||||
const fileSummary = fileCoverage.toSummary();
|
||||
console.log(` • ${path.relative(process.cwd(), file)} (${fileSummary.statements.pct.toFixed(1)}%)`);
|
||||
});
|
||||
if (stats.e2eOnlyFiles.length > 10) {
|
||||
console.log(` ... and ${stats.e2eOnlyFiles.length - 10} more`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('\n' + '='.repeat(70));
|
||||
console.log(`\n✅ Combined coverage report available at:\n ${reportDir}/index.html\n`);
|
||||
|
||||
// Step 6: Check thresholds (from .nycrc.json)
|
||||
const thresholds = {
|
||||
statements: 90,
|
||||
branches: 85,
|
||||
functions: 85,
|
||||
lines: 90,
|
||||
};
|
||||
|
||||
let thresholdsFailed = false;
|
||||
console.log('🎯 Checking Coverage Thresholds:\n');
|
||||
|
||||
Object.entries(thresholds).forEach(([metric, threshold]) => {
|
||||
const actual = (summary as any)[metric].pct;
|
||||
const passed = actual >= threshold;
|
||||
const icon = passed ? '✅' : '❌';
|
||||
console.log(` ${icon} ${metric.padEnd(12)}: ${actual.toFixed(2)}% (threshold: ${threshold}%)`);
|
||||
if (!passed) thresholdsFailed = true;
|
||||
});
|
||||
|
||||
if (thresholdsFailed) {
|
||||
console.log('\n❌ Coverage thresholds not met!\n');
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('\n✅ All coverage thresholds met!\n');
|
||||
}
|
||||
}
|
||||
|
||||
// Run the merge
|
||||
mergeCoverage().catch((error) => {
|
||||
console.error('\n❌ Error merging coverage:', error);
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in New Issue
Block a user