End-to-End Tests

End-to-end tests

As discussed earlier, we are going to use Cypress for testing. The Sapper template we used to create the services/web service already has Cypress set up. However, it makes an assumption that the Cypress CLI is installed globally. Let’s first install Cypress as an NPM dev dependency. Click Run and run the following commands in the terminal:

Note: Don’t forget to create a new branch.

git switch -c add-tests

cd services/web

npm install --save-dev cypress
// OR
npm i -D cypress // installing cypress as dev-dependency

npm install

Now let’s add two scripts in services/web/package.json to open Cypress Test Runner and to run tests in the headless mode using the NPM run command:

nano package.json

It will open the editor in the terminal. Now add the following script:

"cy:open": "cypress open",
"cy:run": "cypress run"

• cypress open: This is used to open the Cypress GUI to run the tests manually.
• cypress run: This is used to run all the tests in the terminal without any GUI.

Come back to the terminal and execute the following command to open Cypress Test Runner:

npm run cy:open

Click on the app link and it will open the Cypress Test Runner. You will notice the “Integration Tests” section, but right now there is only an example folder in it with some tests for demo. Click on any test and see how it runs the tests in the browser.

Close the Cypress Test Runner by using Ctrl+c in the terminal, delete the examples directory, and create a file spec.js in the integration directory:

rm -rf cypress/integration/examples

touch cypress/integration/spec.js