mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-09-21 11:40:07 +02:00
cb2ca74a20
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
34 lines
2.6 KiB
Markdown
34 lines
2.6 KiB
Markdown
# Running tests with cypress.
|
|
|
|
For details on why we picked Cypress, check the following [PR](https://bitbucket.org/wisemapping/wisemapping-react/pull-requests/1)
|
|
|
|
Check the [Cypress docs](https://docs.cypress.io/guides/overview/why-cypress.html) 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](https://docs.cypress.io/api/commands/fixture.html#Usage) of using those.
|
|
|
|
We use `data-testid` as a practice to define selectors in the code and we leverage the [Cypress Testing Library plugin](https://testing-library.com/docs/cypress-testing-library/intro/) 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](https://martinfowler.com/bliki/PageObject.html) 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](https://www.npmjs.com/package/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](https://github.com/jaredpalmer/cypress-image-snapshot/issues/98) where colors differ depending on the host machine running the tests. |