467/add cypress testing #515
Conversation
…ress test playground
…rplate into 467/add-cypress-testing
…add-cypress-testing
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/jsdom@20.0.0, npm/lodash.camelcase@4.3.0, npm/lodash.get@4.4.2, npm/lodash.snakecase@4.1.1 |
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is an install script?Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts. Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
🤺 Summary
This PR covers the implementation of Cypress E2E testing for the Boilerplate React UI:
Installed Cypress
Created Cypress test coverage for page-level features & CRUD operations:
Categories
Funding Orgs
Boilerplates
Grants, including:
Copy Grant
Grant Sections
Grant Overview (Drag&Drop and Preview features)
Paste Boilerplate
There is also an associated API branch that covers the creation of seed data for the tests:
feature/cypress/474-add-cypress-db-seeds-v2
Steps to Test:
Make sure that you are checked out to the API branch
Run rails db:reset to set/reset the test data
Install Cypress:
npm install cypress
Run Cypress:
npm run cypress:open
(Make sure both rails and react servers are running :))
Run all test files in the e2e directory
npx cypress run -s cypress/e2e/boilerplate-e2e
To run specific files, append the file name
npx cypress run -s cypress/e2e/boilerplate-e2e/
Cypress runs in a separate browser. It should open automatically, and you should see a browser interface. The landing page offers you a choice between E2E and Component Testing.
Once you choose E2E testing, it will ask you to select a browser (we're assuming Chrome).
Once you click through to Chrome, you should see an index menu that looks a little bit like the menu for Storybook.js. You will see an index of all of the test files; this index is automatically generated and reflects the Cypress test directories in the codebase. You'll also see directories that contain out of the box examples and test recipes, as well as some scratchpads for DnD; we're keeping those for now:
You can run tests by clicking on the individual test files.
Once you start running tests, the UI will show a 'speedrun' of the test operations, as in the app:
The Cypress browser interface also includes a console on the lefthand side that shows a line by line readout of the test run.
You can step back through each line; the screen should show what is happening during that step, with any selected elements highlighted, etc. You can also open up the line-by-line items in the console to see additional info, like data, selectors, etc.
Test steps that pass will show up in the console as green; if the test hits an error, it will halt and you will see a red console printout.
On the righthand side of the screen, there is also a more conventional devtools console; you can use this to run console.logs, etc.