diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6a70c15aa36c0a75f766ee40e1a336aefb23bf2f..68df83b404184c0fcbc5f7f89a15e966d6acae21 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -8,6 +8,7 @@ stages:
- dockerize
- deploy-test
- deploy-prod
+ - quality-control
include:
- template: 'Workflows/Branch-Pipelines.gitlab-ci.yml'
@@ -355,19 +356,28 @@ integration_test_TMSS_Frontend:
- PACKAGE=TMSSFrontend
- echo "Testing $PACKAGE..."
- cd build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp
- - ls
- - node -v
- echo 'copying schemas ...'
- npm run prepareTemplateSchemas
- nohup npm start &
- sleep 30
- - curl http://localhost:3000
- cd build
- - npm test a
+ - npm run test:ci
- npx kill-port 3000
- npm run cleanTemplateSchemas
needs:
- build_TMSS
+ coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
+ artifacts:
+ name: front-end-junit-report
+ when: always
+ paths:
+ - build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp/coverage/
+ reports:
+ junit:
+ - build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp/junit.xml
+ coverage_report:
+ coverage_format: cobertura
+ path: build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp/coverage/cobertura-coverage.xml
#
# DOCKERIZE
@@ -788,3 +798,58 @@ deploy-station-test-prod:
when: manual
only:
- tags
+
+#
+# Quality Control
+#
+
+.sonarcloud_check:
+ stage: quality-control
+ image:
+ name: sonarsource/sonar-scanner-cli:latest
+ entrypoint: [ "" ]
+ variables:
+ SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar" # Defines the location of the analysis task cache
+ GIT_DEPTH: "0" # Tells git to fetch all the branches of the project, required by the analysis task
+ cache:
+ key: "${CI_JOB_NAME}"
+ paths:
+ - .sonar/cache
+
+sonarcloud_check_TMSS_Frontend:
+ extends: .sonarcloud_check
+ allow_failure: true # for main branch, after all issues have been resolved, disable this
+ needs:
+ - integration_test_TMSS_Frontend
+ script:
+ #Run with the location of the sonar-project.properties for that specific project. The basic properties file is generated by sonarcloud when setting up your project
+ - sonar-scanner -Dproject.settings=SAS/TMSS/frontend/tmss_webapp/sonar-project.properties
+
+package_check_TMSS_Frontend:
+ stage: quality-control
+ image: ci_tmss:$CI_COMMIT_SHORT_SHA
+ allow_failure: true
+ script:
+ - PACKAGE=TMSSFrontend
+ - cd build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp
+ - echo 'checking npm dependencies'
+ - npx npm-check-updates | tee dependency-check.txt
+ - ! grep "Run npx npm-check-updates -u to upgrade package.json" dependency-check.txt #grep returns a boolean w.r.t. found/not found; ensuring the pipeline fails when there are packages to update
+ needs:
+ - build_TMSS
+ except:
+ - merge_requests
+
+security_check_TMSS_Frontend:
+ stage: quality-control
+ image: ci_tmss:$CI_COMMIT_SHORT_SHA
+ allow_failure: true #after all upgrades/updates, disable this again
+ script:
+ - PACKAGE=TMSSFrontend
+ - cd build/gnucxx11_opt/SAS/TMSS/frontend/tmss_webapp
+ - echo 'checking npm dependencies for security issues'
+ - npm audit
+ needs:
+ - build_TMSS
+ except:
+ - merge_requests
diff --git a/SAS/TMSS/frontend/tmss_webapp/README.md b/SAS/TMSS/frontend/tmss_webapp/README.md
index 435be10aac7991ce6bf90e3641dcc7cb23c6a9cf..fd9fd9aa339b0b649b9d25f6294442a121c0a373 100644
--- a/SAS/TMSS/frontend/tmss_webapp/README.md
+++ b/SAS/TMSS/frontend/tmss_webapp/README.md
@@ -193,3 +193,29 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/de
This section has moved
here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+
+
+## Quality checks
+
+### Test coverage report
+With junit and cobertura, coverage reports are generated within our CI/CD pipeline job **integration_test_TMSS_Frontend**.
+
+Acces the information via:
+- You can see the summary in the 'coverage' column for the [jobs](https://git.astron.nl/ro/lofar/-/jobs).
+- You can download the complete reports via the [artifacts](https://git.astron.nl/ro/lofar/-/artifacts).
+- You can generate the report locally via: `npm run test:ci`
+
+### Sonarcloud check
+To test the code for vulnerabilities, code smells, duplication etc. Sonarcube is used within our CI/CD pipeline **sonarcloud-check-tmss-frontend**.
+
+Access that information in the cloud: [sonarcloud](https://sonarcloud.io/project/configuration?id=lofar_tmss-frontend)
+
+## Updating packages
+Whenever the CI/CD pipeline fails for the package checks (audit + upgrade), an updater library can be used to easily update it.
+
+_You should always do this with care of course since there might be breaking/visual/unwanted changes that are not detected by a test_
+
+How to upgrade:
+- Quick: `npx npm-check-updates -u`
+- [**Recommended**] Test mode: `npx npm-check-updates --doctor -u`
+- Check the library for more options: `npx npm-check-updates --help`
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/package.json b/SAS/TMSS/frontend/tmss_webapp/package.json
index 7fbe88927c013ce04bec99ec539f5ec28ea853cf..49f25fafe01a76ed65edfe51d94ca47444f1a09b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/package.json
+++ b/SAS/TMSS/frontend/tmss_webapp/package.json
@@ -76,7 +76,9 @@
"typescript": "^3.9.5",
"yup": "^0.29.1",
"jest-canvas-mock": "^2.5.0",
- "jest-expect-message": "^1.1.3"
+ "jest-expect-message": "^1.1.3",
+ "jest-junit": "^16.0.0",
+ "npm-check-updates": "^16.10.16"
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
@@ -87,7 +89,8 @@
"eject": "react-scripts eject",
"prepareTemplateSchemasDev": "node prepareTemplateSchemas_dev.js",
"prepareTemplateSchemas": "node prepareTemplateSchemas.js",
- "cleanTemplateSchemas": "node cleanTemplateSchemas.js"
+ "cleanTemplateSchemas": "node cleanTemplateSchemas.js",
+ "test:ci": "react-scripts test -all --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false"
},
"proxy": "http://127.0.0.1:8008/",
"eslintConfig": {
@@ -129,10 +132,27 @@
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
- "transformIgnorePatterns": ["node_modules/(?!axios)/"]
+ "transformIgnorePatterns": [
+ "node_modules/(?!axios)/"
+ ],
+ "collectCoverageFrom": [
+ "src/**/*.js",
+ "!**/node_modules/**"
+ ],
+ "coverageReporters": [
+ "html",
+ "text",
+ "text-summary",
+ "cobertura"
+ ],
+ "testMatch": [
+ "**/*.test.js"
+ ]
},
"babel": {
- "presets": ["@babel/preset-env"]
+ "presets": [
+ "@babel/preset-env"
+ ]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
diff --git a/SAS/TMSS/frontend/tmss_webapp/sonar-project.properties b/SAS/TMSS/frontend/tmss_webapp/sonar-project.properties
new file mode 100644
index 0000000000000000000000000000000000000000..81aacbc8733a3894890a4e81371491887859bdb8
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/sonar-project.properties
@@ -0,0 +1,19 @@
+sonar.projectKey=lofar_tmss-frontend
+sonar.organization=lofar
+# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
+sonar.sources=SAS/TMSS/frontend/tmss_webapp/src
+# coverage reports are generated before the sonarcloud check. The location of that report here should be present in 'paths' in your artifacts
+# The sonar tag is different per language and coverage report:
+# - sonar.javascript.lcov.reportPaths for junit: npm run test:ci (see package.json)
+# - sonar.python.coverage.reportPaths=coverage.xml for python: 'python -m coverage run --source="." manage.py test && python -m coverage xml && python -m coverage report'
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+#pipeline fails when the quality gate does not pass the standards
+sonar.qualitygate.wait=true
+sonar.qualitygate.timeout=1000
+
+# This is the name and version displayed in the SonarCloud UI.
+#sonar.projectName=TMSS Frontend
+#sonar.projectVersion=1.0
+
+# Encoding of the source code. Default is default system encoding
+#sonar.sourceEncoding=UTF-8
\ No newline at end of file