-
Notifications
You must be signed in to change notification settings - Fork 46
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
base: main
Are you sure you want to change the base?
Changes from 6 commits
bd1287d
ccaa79b
7488842
5d864c3
cbd1181
c3dd4c8
888746b
627c528
cdf0ca7
ebd8a90
41b803c
9332db0
66b72de
0ca3cb8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -54,3 +54,6 @@ fingerprints.json | |
# Pen test related | ||
pen-test/temp.json | ||
pen-test/cookies | ||
|
||
.nyc_output | ||
instrumented |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
{ | ||
"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" | ||
] | ||
} | ||
|
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,13 +12,17 @@ module.exports = defineConfig({ | |
e2e: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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', | ||
}, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -31,6 +31,7 @@ import "./canvas/utils-cmds"; | |
import "./canvas/verification-cmds"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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({ | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,8 +5,10 @@ | |
"license": "Apache-2.0", | ||
"scripts": { | ||
"start": "NODE_ENV=development node index.js", | ||
"cypress:run": "cypress open", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why did we add this? We already run a similar cmd under There was a problem hiding this comment. Choose a reason for hiding this commentThe 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", | ||
"test": "npx cypress open && npx cypress run", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why was this changed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I initially added the script to see if Cypress would open and run in the terminal simultaneously, but unfortunately, it didn't work as expected. I intended to revert the changes but it seems I have forgot to. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was not able to comment on your question above, but I did some more research and the .nycrc file configures NYC (Istanbul's CLI) for code coverage, specifying which files to include, exclude, and the reporting format. Webpack is used with Babel to instrument the code via babel-plugin-istanbul before bundling it. Here was the documentation for NYC https://github.com/istanbuljs/nyc, it can also be found on the cypress docs. |
||
"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" | ||
|
@@ -34,14 +36,19 @@ | |
"@babel/polyfill": "7.12.1", | ||
"@babel/preset-env": "7.24.3", | ||
"@babel/preset-react": "7.24.1", | ||
"@babel/register": "7.24.6", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this needed? |
||
"@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-core": "6.26.3", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this needed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Did some research on both babel-core and @babel/register and found that they primarily ensure the code runs correctly in environments that don't natively support the latest JavaScript features. Since I was still able to generate code coverage without them, I went ahead and removed these dependencies from the project. |
||
"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", | ||
|
@@ -62,7 +69,10 @@ | |
"grunt-yamllint": "0.3.0", | ||
"html-webpack-plugin": "5.6.0", | ||
"ibm-design-icons": "2.1.4", | ||
"istanbul": "0.4.5", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is that actually used? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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", | ||
|
@@ -90,4 +100,4 @@ | |
"webpack-hot-middleware": "2.26.1", | ||
"webpack-manifest-plugin": "5.0.0" | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -141,4 +141,4 @@ module.exports = { | |
rules: rules | ||
}, | ||
plugins: plugins | ||
}; | ||
}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why are these files changed? Looks like an addition line? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These are still showing up as changed though. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -131,4 +131,4 @@ module.exports = { | |
rules: rules | ||
}, | ||
plugins: plugins | ||
}; | ||
}; |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.