ci: add frontend test execution, reporting, and coverage in workflow (#8815)

* chore: add jest-junit dependency for improved test reporting

- Updated package.json and package-lock.json to include jest-junit version 16.0.0, enhancing test reporting capabilities in the project.

* chore: enhance Jest configuration for improved test coverage and CI reporting

- Added coverage collection settings, including coverage thresholds and report formats.
- Configured CI-specific options for Jest, including the use of jest-junit for test reporting and adjusted worker settings for better performance in CI environments.

* chore: update frontend test command for CI mode to ensure proper environment variable usage

- Modified the test command in the Makefile to set CI=true for accurate test execution in CI environments.

* chore: enhance frontend CI workflow with test reporting and coverage uploads

- Replaced the frontend dependency installation step with a command to run unit tests in CI mode.
- Added steps to publish test results using junit report and to comment on pull requests with coverage summaries.
- Implemented artifact upload for coverage reports to improve visibility and tracking of test coverage over time.

* chore: add frontend dependency installation step to CI workflow

- Introduced a step to install frontend dependencies using npm ci in the GitHub Actions workflow.
- This enhancement ensures that all necessary packages are available before running frontend unit tests, improving the reliability of the CI process.

* chore: update junit report action version in CI workflow

- Upgraded the junit report action from v5 to v5.5.1 in the GitHub Actions workflow to leverage the latest features and improvements for test result reporting.

* chore: add Jest unit test workflow for frontend

- Introduced a new GitHub Actions workflow to run Jest unit tests for the frontend.
- The workflow includes steps for checking out the repository, setting up the Node.js environment, running tests, publishing test results, adding coverage comments on pull requests, and uploading coverage reports.
- This enhancement improves the CI process by ensuring comprehensive testing and reporting for frontend components.

* chore: integrate Jest unit tests into CI workflow

- Added a new job to the CI workflow to run frontend unit tests using Jest.
- Updated the changes filter to include Jest test files, ensuring they are recognized during the CI process.
- This enhancement improves the testing coverage and reliability of the frontend components.

src/frontend/jest.config.js

@@ -17,4 +17,39 @@ module.exports = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
   // Ignore node_modules except for packages that need transformation
   transformIgnorePatterns: ["node_modules/(?!(.*\\.mjs$|@testing-library))"],
+
+  // Coverage configuration
+  collectCoverage: process.env.CI === "true",
+  coverageDirectory: "coverage",
+  coverageReporters: ["text", "lcov", "html", "json-summary"],
+  coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
+  coverageThreshold: {
+    global: {
+      branches: 50,
+      functions: 50,
+      lines: 50,
+      statements: 50,
+    },
+  },
+
+  // CI-specific configuration
+  ...(process.env.CI === "true" && {
+    reporters: [
+      "default",
+      [
+        "jest-junit",
+        {
+          outputDirectory: "test-results",
+          outputName: "junit.xml",
+          ancestorSeparator: " › ",
+          uniqueOutputName: "false",
+          suiteNameTemplate: "{filepath}",
+          classNameTemplate: "{classname}",
+          titleTemplate: "{title}",
+        },
+      ],
+    ],
+    maxWorkers: "50%",
+    verbose: true,
+  }),
 };

src/frontend/package-lock.json

@@ -115,6 +115,7 @@
         "eslint": "^9.5.0",
         "jest": "^30.0.3",
         "jest-environment-jsdom": "^30.0.2",
+        "jest-junit": "^16.0.0",
         "postcss": "^8.4.38",
         "prettier": "^3.3.2",
         "prettier-plugin-organize-imports": "^3.2.4",
@@ -13252,6 +13253,45 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
+    "node_modules/jest-junit": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-16.0.0.tgz",
+      "integrity": "sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mkdirp": "^1.0.4",
+        "strip-ansi": "^6.0.1",
+        "uuid": "^8.3.2",
+        "xml": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/jest-junit/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-junit/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/jest-leak-detector": {
       "version": "30.0.2",
       "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-30.0.2.tgz",
@@ -16684,9 +16724,8 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -22140,6 +22179,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

src/frontend/package.json

@@ -140,6 +140,7 @@
     "eslint": "^9.5.0",
     "jest": "^30.0.3",
     "jest-environment-jsdom": "^30.0.2",
+    "jest-junit": "^16.0.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
     "prettier-plugin-organize-imports": "^3.2.4",