feat: add collect coverage

Author: kevinccbsg

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
 
       - name: Start Vite dev server
         run: |
-          nohup npm run dev > vite.log 2>&1 &
+          nohup npm run dev:ci > vite.log 2>&1 &
           npx wait-on http://localhost:5173
         env:
           CI: true
@@ -32,4 +32,7 @@ jobs:
         run: npm run test:ci
         env:
           CI: true
-
+      
+      - name: Display coverage
+        run: |
+          npm run collect:coverage:text

package-lock.json

@@ -5,13 +5,17 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:ci": "CI=true VITE_COVERAGE=true vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "test": "vitest",
     "preview": "vite preview",
     "serve": "json-server --watch data/data.json --routes data/routes.json --port 3001",
     "serve:dev": "npm-run-all --parallel serve dev",
-    "test:ci": "node scripts/run-tests-ci.js"
+    "test:ci": "node scripts/run-tests-ci.js",
+    "collect:coverage:html": "npx nyc report --reporter=html --report-dir=coverage",
+    "collect:coverage:lcov": "npx nyc report --reporter=lcov --report-dir=coverage",
+    "collect:coverage:text": "npx nyc report --reporter=text --report-dir=coverage"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.4",
@@ -52,6 +56,7 @@
     "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "npm-run-all": "^4.1.5",
+    "nyc": "^17.1.0",
     "puppeteer": "^24.29.1",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.26.1",

package.json

@@ -1,6 +1,10 @@
+import fs from 'fs';
+import path from 'path';
 import puppeteer from "puppeteer";
 import { reportResults } from 'twd-js/runner-ci';
 
+let __dirname = path.resolve();
+
 const browser = await puppeteer.launch({
   headless: true,
   args: ['--no-sandbox', '--disable-setuid-sandbox'],
@@ -39,6 +43,24 @@ try {
   // Display results in console
   reportResults(handlers, testStatus);
 
+  const coverage = await page.evaluate(() => window.__coverage__);
+  if (coverage) {
+    console.log('Collecting code coverage data...');
+    const coverageDir = path.resolve(__dirname, './coverage');
+    const nycDir = path.resolve(__dirname, './.nyc_output');
+    if (!fs.existsSync(nycDir)) {
+      fs.mkdirSync(nycDir);
+    }
+    if (!fs.existsSync(coverageDir)) {
+      fs.mkdirSync(coverageDir);
+    }
+    const coveragePath = path.join(nycDir, 'out.json');
+    fs.writeFileSync(coveragePath, JSON.stringify(coverage));
+    console.log(`Code coverage data written to ${coveragePath}`);
+  } else {
+    console.log('No code coverage data found.');
+  }
+
   // Exit with appropriate code
   const hasFailures = testStatus.some(test => test.status === 'fail');
   console.timeEnd('Total Test Time');

scripts/run-tests-ci.js

@@ -3,12 +3,21 @@ import path from "path"
 import tailwindcss from "@tailwindcss/vite"
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+// add plugin for code coverage
+import istanbul from 'vite-plugin-istanbul';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
+    // configure istanbul plugin
+    istanbul({
+      include: 'src/**/*',
+      exclude: ['node_modules', 'tests/'],
+      extension: ['.ts', '.tsx'],
+      requireEnv: process.env.CI ? true : false,
+    }),
   ],
   resolve: {
     alias: {
@@ -20,4 +29,4 @@ export default defineConfig({
       ignored: ["**/data/data.json", "**data/routes.json"],
     },
   },
-})
+})