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.
This commit is contained in:
Gabriel Luiz Freitas Almeida 2025-07-01 17:38:10 -03:00 committed by GitHub
commit 6bf60ece71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 169 additions and 6 deletions

View file

@ -16,6 +16,7 @@ frontend-tests:
frontend:
- "src/frontend/**"
- "**/typescript_test.yml"
- "**/jest_test.yml"
docs:
- "docs/**"

View file

@ -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,

74
.github/workflows/jest_test.yml vendored Normal file
View file

@ -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

View file

@ -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

View file

@ -104,7 +104,7 @@ test_frontend_verbose: frontend_deps_check ## run frontend tests with verbose ou
# Run frontend tests in CI mode (no watch, with coverage)
test_frontend_ci: frontend_deps_check ## run frontend tests in CI mode
@echo "Running frontend tests in CI mode..."
@cd $(FRONTEND_DIR) && npx jest --ci --coverage --watchAll=false
@cd $(FRONTEND_DIR) && CI=true npx jest --ci --coverage --watchAll=false
# Clean test cache and run tests
test_frontend_clean: frontend_deps_check ## clean test cache and run tests
@ -186,7 +186,7 @@ help_frontend: ## show frontend help
@echo ""
@echo "Code Quality:"
@echo " format_frontend - Format frontend code"
@echo ""
@echo ""
@echo "Testing:"
@echo " tests_frontend - Run frontend Playwright e2e tests"
@echo " test_frontend - Run frontend Jest unit tests"
@ -203,4 +203,4 @@ help_frontend: ## show frontend help
@echo " test_frontend_file path - Run tests for specific file"
@echo " test_frontend_pattern pattern - Run tests matching pattern"
@echo " test_frontend_snapshots - Update Jest snapshots"
@echo " test_frontend_config - Show Jest configuration"
@echo " test_frontend_config - Show Jest configuration"

View file

@ -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,
}),
};

View file

@ -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",

View file

@ -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",