ci(design-system): add test coverage reporting with Istanbul

Author: aroba-dn

.github/workflows/pr.yml

@@ -124,6 +124,7 @@ jobs:
 
     permissions:
       contents: read
+      pull-requests: write
 
     steps:
       - name: Checkout source code
@@ -155,8 +156,38 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-turbo-test-
 
-      - name: Run Tests
-        run: pnpm test --affected
+      - name: Run Tests with Coverage
+        run: pnpm --filter @drivenets/design-system test:coverage
+
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@ea05b972c4286d9363af3d338d0c4c61a0dc8f96 # v4.6.2
+        if: always()
+        with:
+          name: coverage-report
+          path: packages/design-system/coverage/
+          retention-days: 30
+
+      - name: Coverage Summary
+        if: always()
+        run: |
+          if [ -f packages/design-system/coverage/coverage-summary.json ]; then
+            echo "## 📊 Coverage Summary" >> $GITHUB_STEP_SUMMARY
+            echo "" >> $GITHUB_STEP_SUMMARY
+            echo "| Metric | Coverage |" >> $GITHUB_STEP_SUMMARY
+            echo "|--------|----------|" >> $GITHUB_STEP_SUMMARY
+            echo "| Statements | $(jq -r '.total.statements.pct' packages/design-system/coverage/coverage-summary.json)% |" >> $GITHUB_STEP_SUMMARY
+            echo "| Branches | $(jq -r '.total.branches.pct' packages/design-system/coverage/coverage-summary.json)% |" >> $GITHUB_STEP_SUMMARY
+            echo "| Functions | $(jq -r '.total.functions.pct' packages/design-system/coverage/coverage-summary.json)% |" >> $GITHUB_STEP_SUMMARY
+            echo "| Lines | $(jq -r '.total.lines.pct' packages/design-system/coverage/coverage-summary.json)% |" >> $GITHUB_STEP_SUMMARY
+          fi
+
+      - name: Coverage PR Comment
+        uses: davelosert/vitest-coverage-report-action@3bb15bf7db10acbe97dbd47ceeaeb7f59b964a68 # v2.8.0
+        if: github.event_name == 'pull_request'
+        with:
+          working-directory: packages/design-system
+          json-summary-path: coverage/coverage-summary.json
+          json-final-path: coverage/coverage-final.json
 
   build:
     name: Build

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+coverage
 
 *.log
 

packages/design-system/package.json

@@ -41,6 +41,7 @@
 		"generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
 		"storybook": "storybook dev -p 6006",
 		"test": "vitest",
+		"test:coverage": "vitest --coverage --run",
 		"build": "tsdown",
 		"build:storybook": "storybook build",
 		"build:lint": "publint && attw --pack"
@@ -90,6 +91,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@vitest/browser": "^4.0.16",
 		"@vitest/browser-playwright": "^4.0.15",
+		"@vitest/coverage-istanbul": "^4.0.17",
 		"babel-plugin-react-compiler": "^1.0.0",
 		"eslint": "^9.39.2",
 		"eslint-plugin-jsx-a11y": "^6.10.2",

packages/design-system/vite.config.ts

@@ -9,6 +9,27 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file
 
 export default defineConfig({
 	test: {
+		coverage: {
+			provider: 'istanbul',
+			reporter: ['text', 'html', 'lcov', 'json-summary'],
+			reportsDirectory: './coverage',
+			include: ['src/components/**/*.{ts,tsx}'],
+			exclude: [
+				'**/*.stories.tsx',
+				'**/*.stories.ts',
+				'**/*.test.ts',
+				'**/*.test.tsx',
+				'**/stories/**',
+				'**/*.types.ts',
+				'**/index.ts',
+			],
+			thresholds: {
+				statements: 70,
+				branches: 70,
+				functions: 70,
+				lines: 70,
+			},
+		},
 		projects: [
 			{
 				extends: true,

pnpm-lock.yaml

@@ -19,6 +19,10 @@
 		"test": {
 			"dependsOn": []
 		},
+		"test:coverage": {
+			"dependsOn": [],
+			"outputs": ["coverage/**"]
+		},
 		"build": {
 			"outputs": ["dist/**"],
 			"dependsOn": ["^build"]