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.

.github/workflows/ci.yml

@@ -163,6 +163,12 @@ jobs:
     with:
       python-versions: ${{ inputs.python-versions || '["3.10"]' }}
 
+  test-frontend-unit:
+    needs: [path-filter, set-ci-condition]
+    name: Run Frontend Unit Tests
+    if: ${{ needs.path-filter.outputs.frontend == 'true' && needs.set-ci-condition.outputs.should-run-tests == 'true' }}
+    uses: ./.github/workflows/jest_test.yml
+
   test-frontend:
     needs: [path-filter, set-ci-condition]
     name: Run Frontend Tests
@@ -195,6 +201,7 @@ jobs:
     needs:
       [
         test-backend,
+        test-frontend-unit,
         test-frontend,
         lint-backend,
         test-docs-build,

.github/workflows/jest_test.yml

@@ -0,0 +1,74 @@
+name: Run Frontend Jest Unit Tests
+
+on:
+  workflow_call:
+    inputs:
+      ref:
+        description: "(Optional) ref to checkout"
+        required: false
+        type: string
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: "(Optional) ref to checkout"
+        required: false
+        type: string
+
+env:
+  NODE_VERSION: "21"
+
+jobs:
+  jest-unit-tests:
+    name: Frontend Jest Unit Tests
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      checks: write
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.ref || github.ref }}
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        id: setup-node
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+          cache-dependency-path: ./src/frontend/package-lock.json
+
+      - name: Run Frontend Unit Tests
+        run: make test_frontend_ci
+
+      - name: Publish Test Results
+        uses: mikepenz/action-junit-report@v5
+        if: always()
+        with:
+          report_paths: 'src/frontend/test-results/junit.xml'
+          check_name: 'Frontend Unit Test Results'
+          fail_on_failure: true
+          require_tests: true
+
+      - name: Add Coverage PR Comment
+        uses: MishaKav/jest-coverage-comment@main
+        if: github.event_name == 'pull_request'
+        with:
+          coverage-summary-path: src/frontend/coverage/coverage-summary.json
+          title: Frontend Unit Test Coverage Report
+          summary-title: Coverage Summary
+          badge-title: Coverage
+          hide-comment: false
+          create-new-comment: false
+          hide-summary: false
+          junitxml-title: Unit Test Results
+          junitxml-path: src/frontend/test-results/junit.xml
+
+      - name: Upload Coverage Reports
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: frontend-coverage-report
+          path: src/frontend/coverage/
+          retention-days: 30

.github/workflows/typescript_test.yml

@@ -271,7 +271,6 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: "npm"
           cache-dependency-path: ./src/frontend/package-lock.json
-
       - name: Install Frontend Dependencies
         run: npm ci
         working-directory: ./src/frontend