mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-15 19:47:57 +01:00
eaf1b3d910
Adding cypress integration into the webapp * Merge branch 'master' into feat/cypress * moving the config files to ts * updating from master * adding pipeline config * updating the cypress base image to use the same node version * moving node to 14.15.4 * unifying all the tasks into one step * using cypress base image for the whole pipeline for now * removing cypress examples * adding readme for tests Approved-by: Ezequiel Bergamaschi
26 lines
1.8 KiB
Markdown
26 lines
1.8 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!!! |