wisemapping-frontend/packages/webapp/cypress/README.md
Matias Arriola cb2ca74a20 Merged in web2d-coreJS-solutions (pull request #5)
Core-js, web2d and mindplot working baseline

* fix .eslintignore
remove Raphael dependency

* Fix to avoid crashes in  _plotPrediction whitout Raphael

* Fix minplot basic code inspections

* Fix last inspections errors

* Inital refactor copying files

* Clean up.

* Fix web2d cyclic dependencies
remove only-warn eslint plugin
set import/no-extraneous-dependencies to warn (incorrectly complaining about root package)

* Fix web2d Point references (no need to assign it to core)
Fix web2d imports in mindplot and update Point refs

* Merge 'feature/mindplot_tests' into web2d-coreJS-solutions

* mindplot fixes and add viewmode.html playground

setup playground config to run the map-render examples
fix mindplot components export
mootools Static was not working so refactored it
fix some references to _peer
fix messages __bundle undefined
add web2d missing export: Image
downgrade cypress to avoid SIGSEGV error


Approved-by: Paulo Veiga
2021-12-02 00:41:56 +00:00

2.6 KiB

Running tests with cypress.

For details on why we picked Cypress, check the following PR

Check the Cypress docs for more information

How to run it

  • To run the test cases headless run: yarn test
  • To debug the tests you can use cypress interactive UI by running yarn cypress open (You will need to have the UI running in a separate terminal yarn start)

How to write a new test case

Any new test cases should be added under the cypress/integration folder. Aim to group similar test cases in one file.

If any stub/mock is needed, those should be added to cypress/fixtures folder. Cypress has a built in way of using those.

We use data-testid as a practice to define selectors in the code and we leverage the Cypress Testing Library plugin to find the elements in the tests.

  • We leverage a data-testid or selecting by text (findAllByText, findByText) to make sure the test cases are decoupled from the implementation.

We leverage the Page Object Pattern to abstract away selectors and actions and simplify changes required to future refactors. Take a look to any example under the cypress/pageObject folder to see how that pattern is implemented.

Finally any common functionality such as for example login should be abstracted into a command. CY Commands can be added into the cypress/support folder. Feel free to group similar commands into files (You only need to make sure those get imported into the cypress/support/index.ts file)

Happy testing!!!

snapshot testing

We use cypress-image-snapshot for snapshot testing (yarn run test:snapshots). This is a relatively cheap way of identifying changes based on page screenshots.

When a test that contains a matchImageSnapshot call is run, it compares the snapshot to the corresponding one in the snapshots directory. If Any change is detected, the test will fail, and the diff can be found in the snapshots/*/__diff_output__ folder. If the change is intentional, we should "accept" those changes by updating the snapshot and include it in the commit. To update the snapshots run yarn run test:snapshots:update

Is is not yet included in CI because there is an existing issue where colors differ depending on the host machine running the tests.