test: 🧑‍💻 add code coverage to e2e automated tests

.github/workflows/main-ci.yml

@@ -72,8 +72,13 @@ jobs:
     name: Run E2E tests
     needs: [build-backend, build-frontend]
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - name: Start stack using docker compose
         run: IMAGE_TAG=${{ needs.build-backend.outputs.image_tag }} docker compose -f docker-compose.yml -f docker-compose.ci.yml up -d
       - name: Cypress run
@@ -90,3 +95,7 @@ jobs:
           name: cypress-screenshots
           path: |
             ./frontend/cypress/screenshots/
+      - name: Report NYC coverage
+        uses: sidx1024/[email protected]
+        with:
+          coverage_file: "./frontend/coverage/coverage-summary.json"

.gitignore

@@ -18,4 +18,6 @@ version.txt
 .ruff_cache
 .coverage
 coverage.xml
+coverage
+.nyc_output
 frontend/cypress/screenshots/*

frontend/README.md

@@ -7,16 +7,20 @@ npm install
 npm run start
 ```
 
-## Test project
+## How to run automated tests ?
 
-Run end-to-end tests with cypress. You need first to have installed dependancies with `npm ci`.
-
-First run website with Docker then
+1. Make sure the bakend stack is running by running `docker compose up -d` in the backend folder.
+2. Make sure all the dependencies are installed by running `npm install` in the frontend folder.
+3. Make sure the frontend is running : `npm run start`
 
 ```bash
-# run in headless mode (only in terminal)
-npm --prefix frontend run test:e2e-run
-
-# run with graphical interface
-npm --prefix frontend run test:e2e-open
+npm run test:e2e-ci
 ```
+
+## How to check code coverage ?
+
+Open ./frontend/coverage/lcov-report/index.html or run `npx nyc report`
+
+## Where to find all availables commands ?
+
+`./frontend/package.json`

frontend/cypress.config.cjs → frontend/cypress.config.ts

@@ -1,9 +1,10 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from "cypress";
+import coverageTask from "@cypress/code-coverage/task";
 
 const frontendHost = "localhost";
 const frontendPort = "5173";
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,ts}",
     baseUrl: `http://${frontendHost}:${frontendPort}`,
@@ -12,5 +13,9 @@ module.exports = defineConfig({
     viewportWidth: 414,
     viewportHeight: 896,
     video: false,
+    setupNodeEvents(on, config) {
+      coverageTask(on, config);
+      return config;
+    },
   },
 });

frontend/cypress/support/e2e.js

@@ -13,8 +13,5 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import "@cypress/code-coverage/support";