Merge pull request #2717 from pnaik1/RHOAIENG-2500

added Cypress test coverage

frontend/.gitignore

@@ -1,6 +1,5 @@
 # testing
 /coverage
-/cypress-coverage
 /jest-coverage
 /test-results/
 /public-cypress

frontend/config/webpack.common.js

@@ -14,13 +14,18 @@ const DIST_DIR = process.env._ODH_DIST_DIR;
 const OUTPUT_ONLY = process.env._ODH_OUTPUT_ONLY;
 const ODH_FAVICON = process.env.ODH_FAVICON;
 const ODH_PRODUCT_NAME = process.env.ODH_PRODUCT_NAME;
+const COVERAGE = process.env.COVERAGE;
 
 if (OUTPUT_ONLY !== true) {
   console.info(
     `\nPrepping files...\n  SRC DIR: ${SRC_DIR}\n  OUTPUT DIR: ${DIST_DIR}\n  PUBLIC PATH: ${PUBLIC_PATH}\n`,
   );
 }
 
+if (COVERAGE === 'true') {
+  console.info('\nAdding code coverage instrumentation.\n');
+}
+
 module.exports = (env) => {
   return {
     entry: {
@@ -32,6 +37,7 @@ module.exports = (env) => {
           test: /\.(tsx|ts|jsx|js)?$/,
           include: [SRC_DIR, COMMON_DIR],
           use: [
+            COVERAGE === 'true' && '@jsdevtools/coverage-istanbul-loader',
             {
               loader: 'ts-loader',
               options: {

frontend/package.json

@@ -34,14 +34,16 @@
     "test:jest:coverage": "jest --coverage",
     "test:unit": "npm run test:jest",
     "test:cypress-ci": "npx concurrently -P -k -s first \"npm run cypress:server:build && npm run cypress:server\" \"npx wait-on tcp:127.0.0.1:9001 && npm run cypress:run:mock -- {@}\" -- ",
-    "coverage:merge": "istanbul-merge --out coverage/coverage-final.json jest-coverage/coverage-final.json cypress-coverage/coverage-final.json && nyc report --reporter html --reporter text -t coverage --report-dir coverage/report",
+    "coverage:merge": "istanbul-merge --out coverage/coverage-final.json jest-coverage/coverage-final.json src/__tests__/cypress/coverage/coverage-final.json && nyc report --reporter html --reporter text -t coverage --report-dir coverage/report",
     "cypress:open": "cypress open --project src/__tests__/cypress",
     "cypress:run": "cypress run -b chrome --project src/__tests__/cypress",
     "cypress:open:mock": "MOCK=1 WS_PORT=9002 npm run cypress:open -- ",
     "cypress:run:mock": "MOCK=1 WS_PORT=9002 npm run cypress:run -- ",
+    "cypress:run:mock:coverage": "rimraf src/__tests__/cypress/coverage src/__tests__/cypress/.nyc_output && COVERAGE=true npm run cypress:run:mock",
     "cypress:open:record": "RECORD=1 npm run cypress:open",
     "cypress:run:record": "RECORD=1 npm run cypress:run && npm run cypress:format",
     "cypress:server:build": "ODH_DIST_DIR=./public-cypress POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 WS_HOSTNAME=localhost:9002 npm run build",
+    "cypress:server:build:coverage": "COVERAGE=true npm run cypress:server:build",
     "cypress:server": "serve ./public-cypress -p 9001 -s -L",
     "cypress:server:dev": "POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 ODH_PORT=9001 WS_HOSTNAME=localhost:9002 npm run start:dev",
     "cypress:format": "prettier --write src/__tests__/**/*.snap.json"
@@ -87,6 +89,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@cypress/code-coverage": "^3.12.34",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.3.0",

frontend/src/__tests__/cypress/.gitignore

@@ -1,2 +1,4 @@
 cypress/downloads
 cypress/screenshots
+coverage
+.nyc_output

frontend/src/__tests__/cypress/cypress.config.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import fs from 'fs';
 import { defineConfig } from 'cypress';
 import dotenv from 'dotenv';
+import coverage from '@cypress/code-coverage/task';
 import { interceptSnapshotFile } from '~/__tests__/cypress/cypress/utils/snapshotUtils';
 import { setup as setupWebsockets } from '~/__tests__/cypress/cypress/support/websockets';
 
@@ -23,6 +24,10 @@ export default defineConfig({
     PASSWORD: process.env.PASSWORD,
     RECORD: !!process.env.RECORD,
     WS_PORT: process.env.WS_PORT,
+    coverage: !!process.env.COVERAGE,
+    codeCoverage: {
+      exclude: [path.resolve(__dirname, '../../third_party/**')],
+    },
   },
   defaultCommandTimeout: 10000,
   e2e: {
@@ -34,6 +39,7 @@ export default defineConfig({
       : `cypress/e2e/**/*.(s)?cy.ts`,
     experimentalInteractiveRunEvents: true,
     setupNodeEvents(on, config) {
+      coverage(on, config);
       setupWebsockets(on, config);
       on('task', {
         readJSON(filePath: string) {
@@ -75,6 +81,7 @@ export default defineConfig({
           }
         });
       }
+      return config;
     },
   },
 });

frontend/src/__tests__/cypress/cypress/support/e2e.ts

@@ -18,6 +18,7 @@ import { mockDashboardConfig, mockStatus } from '~/__mocks__';
 import { ODHDashboardConfigModel } from '~/__tests__/cypress/cypress/utils/models';
 import './commands';
 import { addCommands as webSocketsAddCommands } from './websockets';
+import '@cypress/code-coverage/support';
 
 chai.use(chaiSubset);