wisemapping-frontend/packages/webapp/cypress
Matias Arriola b804403c42 Merged in feature/tests-and-docs (pull request #9)
Improve testing flow and docs

* update snapshots

* update snapshots

* update snapshots

* Add docker run instructions

* Hide image snapshot execution behind an env flag

* Simplify package.json scripts and improve docs

* Merge 'origin/develop' into feature/tests-and-docs

* Update snapshots

* Add wait to container test

* Update snapshot


Approved-by: Paulo Veiga
2021-12-17 02:13:54 +00:00
..
integration Merged in feature/tests-and-docs (pull request #9) 2021-12-17 02:13:54 +00:00
pageObject Merged in feat/prettier (pull request #3) 2021-02-23 07:02:15 +00:00
plugins Merged in web2d-coreJS-solutions (pull request #5) 2021-12-02 00:41:56 +00:00
snapshots/maps.test.ts Merged in feature/tests-and-docs (pull request #9) 2021-12-17 02:13:54 +00:00
support Merged in feature/tests-and-docs (pull request #9) 2021-12-17 02:13:54 +00:00
README.md Merged in feature/tests-and-docs (pull request #9) 2021-12-17 02:13:54 +00:00

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!!!