feat(test): add scripts for test coverage report and include it in CI… (

#396)

* feat(test): add scripts for test coverage report and include it in CI pipeline

* feat(test): update cache key to react to changes to 'client/package-lock.json'

* fix(ci): try running 'npm ci' before every job and change initial 'npm install' to 'npm ci'

* fix(ci): add missing 'shell' property in 'prepare-npm-job' action

* fix(ci): move 'shell' to 'prepare-npm-job' action step

.github/actions/prepare-npm-job/action.yml

@@ -6,6 +6,10 @@ runs:
           uses: actions/cache@v4
           with:
               path: ${{ env.CACHE_PATHS }}
-              key: ${{ runner.os }}-node_modules-${{ hashFiles('package-lock.json') }}
+              key: ${{ runner.os }}-node_modules-${{ hashFiles('package-lock.json') }}-${{ hashFiles('client/package-lock.json') }}
               restore-keys: |
                   ${{ runner.os }}-node_modules-
+
+        - name: Install dependencies
+          shell: 'bash'
+          run: npm ci

.github/workflows/ci.yml

@@ -27,14 +27,14 @@ jobs:
                   node-version: 20.x
 
             - name: Install dependencies
-              run: npm install
+              run: npm ci
 
             - name: Cache node modules
               id: cache
               uses: actions/cache@v4
               with:
                   path: ${{ env.CACHE_PATHS }}
-                  key: ${{ runner.os }}-node_modules-${{ hashFiles('package-lock.json') }}
+                  key: ${{ runner.os }}-node_modules-${{ hashFiles('package-lock.json') }}-${{ hashFiles('client/package-lock.json') }}
                   restore-keys: |
                       ${{ runner.os }}-node_modules-
               if: steps.cache.outputs.cache-hit != 'true'
@@ -108,4 +108,4 @@ jobs:
             - uses: ./.github/actions/prepare-npm-job
 
             - name: Run tests
-              run: npm run test:run
+              run: npm run test:coverage

README.md

@@ -23,6 +23,7 @@ This portfolio is structured into two semi-independent projects, located in the
 -   `npm run format` - Formats the code using Prettier.
 -   `npm run format:check` - Checks the code formatting with Prettier without modifying it.
 -   `npm run lint` - Lints the code using ESLint.
+-   `npm run test:coverage` - Runs the tests once and shows test code coverage.
 -   `npm run test:run` - Runs the tests once.
 -   `npm run test:watch` - Runs the tests and re-runs them when any test file changes.
 -   `npm run type-check` - Checks the code for type validity.

client/README.md

@@ -19,6 +19,7 @@ Front-end of the portfolio developed by Tomáš Kudláč. You can view the portf
 -   `npm run format:check` - Checks the code format using Prettier without modifying it.
 -   `npm run lint` - Lints the code using ESLint.
 -   `npm run serve` - Compiles and hot-reloads for development.
+-   `npm run test:coverage` - Runs the tests once and shows test code coverage.
 -   `npm run test:run` - Runs the tests once.
 -   `npm run test:watch` - Runs the tests and re-runs them on any test file changes.
 -   `npm run type-check` - Checks the code for type validity.

client/package.json

@@ -8,6 +8,8 @@
         "lint": "eslint",
         "lint:fix": "eslint --fix",
         "serve": "vite",
+        "test:coverage:base": "npm run test:run:base -- --coverage",
+        "test:coverage": "run-p serve test:coverage:base --race",
         "test:run:base": "vitest --run",
         "test:run": "run-p serve test:run:base --race",
         "test:watch:base": "vitest -w",
@@ -34,6 +36,7 @@
         "@typescript-eslint/eslint-plugin": "8.1.0",
         "@typescript-eslint/parser": "8.1.0",
         "@vitejs/plugin-vue": "5.1.2",
+        "@vitest/coverage-v8": "2.1.1",
         "@vue/compiler-sfc": "3.4.38",
         "@vue/language-server": "2.1.6",
         "@vue/test-utils": "2.4.6",
@@ -51,7 +54,7 @@
         "vite-plugin-eslint": "1.8.1",
         "vite-plugin-html": "3.2.2",
         "vite-plugin-pwa": "0.20.1",
-        "vitest": "2.0.5",
+        "vitest": "2.1.1",
         "vue-tsc": "2.0.29"
     }
 }

client/vitest.config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitest/config';
+import { coverageConfigDefaults, defineConfig } from 'vitest/config';
 import vue from '@vitejs/plugin-vue';
 import * as path from 'path';
 
@@ -10,6 +10,17 @@ export default defineConfig({
         },
     },
     test: {
+        coverage: {
+            exclude: [
+                ...coverageConfigDefaults.exclude,
+                '**/*.config.*',
+                '**/main.ts',
+                '**/register-service-worker.ts',
+                '**/types.ts',
+            ],
+            provider: 'v8',
+            reporter: ['text'],
+        },
         environment: 'jsdom',
         globals: true,
     },

package.json

@@ -8,6 +8,7 @@
         "lint": "cd client && npm run lint",
         "prepare": "husky",
         "postinstall": "cd client && npm i",
+        "test:coverage": "cd client && npm run test:coverage",
         "test:run": "cd client && npm run test:run",
         "test:watch": "cd client && npm run test:watch",
         "type-check": "cd client && npm run type-check"