Resolve TMSS-2588

.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

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

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

SAS/TMSS/frontend/tmss_webapp/sonar-project.properties

+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