-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cypress (and FE in general) documentation improvement
- Loading branch information
Showing
1 changed file
with
90 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,116 @@ | ||
| # Prerequisites | ||
|
|
||
| ## NodeJS and NPM | ||
|
|
||
| Make sure you have relatively new nodejs/npm version (see `.nvmrc` for details) | ||
|
|
||
| ## Package dependencies | ||
|
|
||
| Fetch locked package dependencies using: | ||
| ``` | ||
| npm ci | ||
| ``` | ||
|
|
||
| # Run | ||
|
|
||
| You have a few options to provide backend for frontend needs. After each "run" command, frontend will be available at http://localhost:3000. | ||
| Below there are described possible options. | ||
|
|
||
| ## Using backend started with docker | ||
|
|
||
| This option requires docker and connection to docker hub registry. It will use `touk/nussknacker` image in `staging-latest` version. | ||
| ``` | ||
| npm ci && npm start | ||
| open http://localhost:3000 | ||
| npm run start:backend-staging | ||
| ``` | ||
|
|
||
| ## Using locally started backend | ||
|
|
||
| This option uses backend started at http://localhost:8080 . For more information how to start it, take a look at [Backend instruction](../README.md) | ||
| ``` | ||
| npm start | ||
| ``` | ||
|
|
||
| ## Using external environment | ||
|
|
||
| You can also run frontend connected to external environment like https://demo.nussknacker.io . To do that just invoke: | ||
| ``` | ||
| npm run start:backend-demo | ||
| ``` | ||
| For more options take a look at (package.json)[./package.json] | ||
|
|
||
| # Tests | ||
|
|
||
| ## Unit (jest) tests | ||
|
|
||
| ```npm test``` | ||
| ``` | ||
| npm test | ||
| ``` | ||
|
|
||
| ### Run tests from IntelliJ | ||
|
|
||
| `Jest` should work out of the box, just click green arrow. | ||
| `Jest` should work out of the box, just click play button. | ||
|
|
||
| ## E2E (cypress) tests | ||
| _You should copy and fill `cypress.env.json.template` into `cypress.env.json` before start._ | ||
|
|
||
| ##### Image snapshots are **OS** and even resolution dependent! | ||
| Background: Cypress is a framework for end-to-end frontend tests. It verifies correctness of results using captured snapshots. | ||
| It ran tests in browser connected to our frontend application at http://localhost:3000. It uses some variables available | ||
| in `cypress.env.json` like credentials. | ||
|
|
||
| Compare, update (when needed) and commit **image snapshots** made with `BACKEND_DOMAIN` set to url of backend started with `npm run start-backend:docker` | ||
| > WARNING: Image snapshots are **OS** and even **resolution** dependent! Please add snapshots captured on unified environment. | ||
| #### Start server and test (CI) with already running BE | ||
| ### Run cypress tests | ||
|
|
||
| ```npm test:e2e:ci``` | ||
| There are a few options to run cypress tests. | ||
|
|
||
| #### Start BE, start FE server and test inside linux image (snapshots for **CI**) | ||
| #### Using cypress devServer | ||
|
|
||
| ```npm test:e2e:docker``` | ||
| Before this option you should run backend and frontend - take a look at "Run" chapter. | ||
|
|
||
| After execution of: | ||
| ``` | ||
| npm run test:e2e:dev | ||
| ``` | ||
| you will see cypress devServer. It is useful to see what is done in each test, but it has some drawbacks: | ||
| - "Run all specs" option doesn't work correctly | ||
| - Produced snapshots are OS dependent, so you shouldn't use it for purpose of changing captured snapshots! | ||
|
|
||
| #### Using devServer in CLI | ||
|
|
||
| This option is similar to option above, but run all tests in CLI and the same - you shouldn't use it for purpose of changing captured snapshots! | ||
| ``` | ||
| npm run test:e2e | ||
| ``` | ||
|
|
||
| #### Using Intellij Idea | ||
|
|
||
| Thanks to [Cypress Plugin](https://plugins.jetbrains.com/plugin/13819-cypress-support) you can run tests by just clicking play button. | ||
|
|
||
| Just like in options above, you should run backend and frontend before - take a look at "Run" chapter, and the same - you shouldn't use it for purpose of changing captured snapshots! | ||
|
|
||
| #### Using unified linux environment | ||
|
|
||
| This is the correct option if you want to add/modify snapshots and make sure that it was done in deterministic way. | ||
| It ran backend, frontend in docker container and after that it ran cypress tests also in docker container. | ||
| ``` | ||
| npm run test:e2e:docker | ||
| ``` | ||
|
|
||
| #### Using unified linux environment on already started backend | ||
|
|
||
| This option is similar to above, but it speeds up test loop. You should run once: | ||
| ``` | ||
| npm run start:backend-docker | ||
| ``` | ||
|
|
||
| and after that you can run multiple times: | ||
| ``` | ||
| npm run test:e2e:linux | ||
| ``` | ||
|
|
||
| #### CLI test with running devServer | ||
| ```npm test:e2e``` | ||
| ### Fixing cypress tests | ||
|
|
||
| #### GUI test with running devServer | ||
| ```npm test:e2e:dev``` | ||
| After some changes in frontend it might be needed to rewrite captured snapshots. The easiest way is to: | ||
| 1. Remove [image_snapshots](./cypress/integration/__image_snapshots__) | ||
| 2. Run cypress tests using "Run cypress tests Using unified linux environment" chapter | ||
| 3. Review changes in files e.g. using Intellij Idea changes diff | ||
| 4. Commit changes or do fixes in scenarios. |