Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code coverage for cypress testing #2031

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions canvas_modules/harness/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,6 @@ fingerprints.json
# Pen test related
pen-test/temp.json
pen-test/cookies

.nyc_output
instrumented
24 changes: 24 additions & 0 deletions canvas_modules/harness/.nycrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why this is needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.nycrc file is needed to configure NYC which generates code coverage reports.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you give more details on this? For example how does webpack get used and is there any documentation on this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this file and it doesn't seem to make a different in the result.

"extends": "@istanbuljs/nyc-config-babel",
"all": true,
"reporter": [
"html",
"text-summary"
],
"include": [
"src/**/*.js",
"./cypress/e2e/**/*.js"
],
"instrument": true,
"sourceMap": true,
"require": [
"./scripts/babel/babelOptions.js"
],
"webpack": {
"config": [
"./webpack.config.dev.js",
"./webpack.config.prod.js"
]
}

}
4 changes: 4 additions & 0 deletions canvas_modules/harness/cypress.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,17 @@ module.exports = defineConfig({
e2e: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add this file to be checked in linting. It should have flagged the new code since we don't use single quotes.

setupNodeEvents(on, config) {
// `cy.log()` command's output can be seen on the screen along with test steps
require('@cypress/code-coverage/task')(on, config)
on("task", {
log(message) {
console.log(message); /* eslint no-console: "off" */
return null;
}
});
return config;
},
baseUrl: "http://localhost:3001",
specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
supportFile: 'cypress/support/e2e.js',
},
});
1 change: 1 addition & 0 deletions canvas_modules/harness/cypress/support/e2e.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import "./canvas/utils-cmds";
import "./canvas/verification-cmds";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also add the entire cypress directory. It should have flagged this well in the build.

import "./canvas/operation-cmds";
import "./canvas/palette-cmds";
import '@cypress/code-coverage/support'

// turn off screenshots when running in headless mode.
Cypress.Screenshot.defaults({
Expand Down
12 changes: 10 additions & 2 deletions canvas_modules/harness/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
"license": "Apache-2.0",
"scripts": {
"start": "NODE_ENV=development node index.js",
"cypress:run": "cypress open",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we add this? We already run a similar cmd under test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this was an extra script, so I went ahead and removed it to eliminate redundancy.

"build": "npx stylelint 'src/**/*.scss' 'assets/**/*.scss' && grunt",
"test": "npx cypress open",
"coverage": "npx nyc --reporter=html --reporter=text-summary",
"bundle-report": "NODE_ENV=production BUNDLE_REPORT=true grunt",
"start-prod": "NODE_ENV=production node index.js",
"build-prod": "npx stylelint 'src/**/*.scss' 'assets/**/*.scss' && NODE_ENV=production grunt --max-old-space-size=8192"
Expand Down Expand Up @@ -36,12 +38,15 @@
"@babel/preset-react": "7.24.1",
"@carbon/charts": "1.15.3",
"@carbon/charts-react": "1.15.3",
"@carbon/react": "^1.52.0",
"@carbon/react": "1.52.0",
"@cypress/code-coverage": "3.12.39",
"@elyra/canvas": "file:../common-canvas",
"@istanbuljs/nyc-config-babel": "3.0.0",
"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
"ajv": "8.12.0",
"autoprefixer": "10.4.19",
"babel-loader": "9.1.3",
"babel-plugin-istanbul": "6.1.1",
"babel-plugin-lodash": "3.3.4",
"css-loader": "6.10.0",
"cypress": "13.7.3",
Expand All @@ -62,7 +67,10 @@
"grunt-yamllint": "0.3.0",
"html-webpack-plugin": "5.6.0",
"ibm-design-icons": "2.1.4",
"istanbul": "0.4.5",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this module. It says it's no longer maintained and shouldn't be used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding your comment on generating a coverage report, I updated the 'coverage' script to: "coverage": "npx cypress run && npx nyc --reporter=html --reporter=text-summary". This way, when you run npm run coverage, it will execute all the tests. Once all 43 tests are finished, you can open coverage/index.html to view the report in the browser.

"istanbul-instrumenter-loader": "3.0.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that actually used?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was still able to generate a coverage report without these, so I removed them

"mini-css-extract-plugin": "2.8.1",
"nyc": "17.0.0",
"object-assign": "4.1.1",
"path": "0.12.7",
"postcss": "8.4.38",
Expand Down Expand Up @@ -90,4 +98,4 @@
"webpack-hot-middleware": "2.26.1",
"webpack-manifest-plugin": "5.0.0"
}
}
}
2 changes: 1 addition & 1 deletion canvas_modules/harness/scripts/babel/babelOptions.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
const babelOptions = {
babelrc: false, // required so webpack ignores the .babelrc file used for testing in root of project
presets: ["@babel/preset-react", "@babel/preset-env"],
plugins: ["lodash", "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"],
plugins: ["lodash", "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime", "istanbul"]
};

exports.babelOptions = babelOptions;
2 changes: 1 addition & 1 deletion canvas_modules/harness/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@ module.exports = {
rules: rules
},
plugins: plugins
};
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are these files changed? Looks like an addition line?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the webpack.config.dev.js and webpack.config.prod.js, I reverted them to their original state because I believe I added a comma in the previous commit last Thursday.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are still showing up as changed though.

2 changes: 1 addition & 1 deletion canvas_modules/harness/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,4 +131,4 @@ module.exports = {
rules: rules
},
plugins: plugins
};
};