Feat/ Integrate cypress test and coverage to GHA (#541)

* feat: testing cypress behaviour on GHA

* fix: set forceBuildInstrument to true

* fix: promote vite-plugin-istanbul

* fix: set video output to true

* fix: make vite ignore coverage folder

* fix: ignore cypress folder

* test: test with dev server

* test: remove instrument on build

* test: use nyc

* fix: update coverage path

* feat: test sonar cloud

* test: include test folder for sonar

* fix: test coverage for new lines

* fix: delete testing folder

* fix: fix indentation for pr_open

* fix: use PR backend url

* fix: use cypress coverage name

.github/workflows/pr-open.yml

@@ -95,7 +95,8 @@ jobs:
         include:
           - name: database
             file: database/openshift.deploy.yml
-            parameters: -p DB_PVC_SIZE=128Mi
+            parameters:
+              -p DB_PVC_SIZE=128Mi
             overwrite: false
             triggers: ('common/' 'database/' 'backend/' 'frontend/')
           - name: backend
@@ -148,43 +149,50 @@ jobs:
           triggers: ${{ matrix.triggers }}
           verification_path: ${{ matrix.verification_path}}
 
-  tests-javascript:
-    name: JavaScript CI
+  cypress-test-coverage:
+    name: Cypress Test and Coverage
     needs: [deploys]
     runs-on: ubuntu-22.04
     env:
-      CYPRESS_baseUrl: https://${{ github.event.repository.name }}-${{ github.event.number }}-frontend.apps.silver.devops.gov.bc.ca
       CYPRESS_PASSWORD: ${{ secrets.CYPRESS_PASSWORD }}
       CYPRESS_USERNAME: ${{ secrets.CYPRESS_USERNAME }}
-      LOG_LEVEL: debug
-      VITE_NRSPARWEBAPP_VERSION: dev
-      VITE_SERVER_URL: https://${{ github.event.repository.name }}-test-backend.apps.silver.devops.gov.bc.ca
+      VITE_SERVER_URL: https://${{ github.event.repository.name }}-${{ github.event.number }}-backend.apps.silver.devops.gov.bc.ca
       VITE_ORACLE_SERVER_URL: https://${{ github.event.repository.name }}-test-oracle-api.apps.silver.devops.gov.bc.ca
       VITE_KC_CLIENT_ID: seed-planning-test-4296
       VITE_KC_REALM: standard
       VITE_KC_URL: https://test.loginproxy.gov.bc.ca/auth
+      VITE_NRSPARWEBAPP_VERSION: dev
     steps:
       - uses: actions/checkout@v4
-      - uses: cypress-io/github-action@v6
-        name: Cypress run
+      - name: Run Cypress CI
+        uses: bcgov-nr/action-test-and-analyse@v1.0.0
         with:
-          config: chromeWebSecurity=false,pageLoadTimeout=10000
-          working-directory: ./frontend
-          browser: chrome
-
-      - name: Upload screenshots on failure
-        uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots-chrome
-          path: /home/runner/work/nr-spar/nr-spar/frontend/cypress/screenshots
-
+          node_version: "18.16.0"
+          commands: |
+            npm i
+            npm run cy:ci
+          dir: frontend
+          sonar_args: >
+            -Dsonar.organization=bcgov-sonarcloud
+            -Dsonar.javascript.lcov.reportPaths=cypress-coverage/lcov.info
+            -Dsonar.projectKey=nr-spar_frontend
+            -Dsonar.sources=src/
+            -Dsonar.exclusions=src/**/__test__/**/*
+            -Dsonar.exclusions=src/mock-server/**/*
+            -Dsonar.test.inclusions=cypress/e2e/smoke-test/**/*
+          sonar_token: ${{ secrets.SONAR_FRONTEND }}
       - name: Upload videos
         uses: actions/upload-artifact@v3
         if: always()
         with:
           name: cypress-videos-chrome
           path: /home/runner/work/nr-spar/nr-spar/frontend/cypress/videos/
+      - name: Upload coverage
+        uses: actions/upload-artifact@v3
+        if: success()
+        with:
+          name: cypress-coverage
+          path: /home/runner/work/nr-spar/nr-spar/frontend/cypress-coverage
 
   # tests-api:
   #   name: API Tests

.gitignore

@@ -110,6 +110,7 @@ snyk.sarif
 frontend/cypress/videos
 frontend/cypress/screenshots
 frontend/cypress/downloads
+frontend/cypress-coverage
 *.cer
 jssecacerts
 InstallCert.class

frontend/cypress.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from 'cypress';
 import { TEN_SECONDS } from './cypress/constants';
 
+declare const require: any;
+
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000/',
@@ -21,8 +23,10 @@ export default defineConfig({
       runMode: 4
     },
     defaultCommandTimeout: TEN_SECONDS,
+    video: true,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config);
       // implement node event listeners here
       on('task', {
         log(args) {
@@ -31,6 +35,10 @@ export default defineConfig({
           return null;
         }
       });
+
+      // It's IMPORTANT to return the config object
+      // with any changed environment variables
+      return config;
     }
   }
 });

frontend/cypress/e2e/smoke-test/dashboard-page.cy.ts

@@ -13,7 +13,7 @@ describe('Dashboard page test', () => {
       dashboardPageData = fData;
     });
     cy.login();
-    cy.visit('/');
+    cy.visit('/dashboard');
     cy.url().should('contains', '/dashboard');
   });
 

frontend/cypress/support/commands.ts

@@ -1,6 +1,7 @@
 // @ts-check
 /// <reference path="../global.d.ts" />
 
+import '@cypress/code-coverage/support';
 import {
   HALF_SECOND, THREE_SECONDS, TYPE_DELAY
 } from '../constants';