Testing with Cypress

Getting Started

For end-to-end testing, Neon uses the testing framework Cypress. It offers a nice GUI and many debugging tools for UI-related issues. Cypress has extensive documentation and examples for all its functionality. Check them out!

Before Running Tests

• Make sure you have Cypress installed, with yarn install.
• Build your changes before testing, with yarn build.
• Run the server in the background with yarn start.

Running Cypress

The Cypress tests can be run with two commands:

Open Cypress's testing GUI:

yarn test

After running the command, a Cypress window should open, and there should be two options. Click on "E2E Testing".

Run tests on the terminal:

yarn cypress run --browser chrome

Cypress GitHub Action

Cypress tests run automatically when you push to any branch of Neon (excluding the gh-pages branch). The first thing you will see when you see your commit on GitHub is a checkmark or an x mark, depending on whether the Cypress tests failed or not.

You can click on the checkmark / x mark for more details:

Example: https://github.com/DDMAL/Neon/runs/7566557221?check_suite_focus=true

More detailed output of tests can be viewed by clicking the job "E2E on Chrome" on the left sidebar.

The Cypress GitHub action currently resides in .github/workflows/cypress.yml. Click here for documentation.

Cypress Folder

All of Cypress's tests reside in the folder cypress/e2e. You may notice there is a tsconfig.json file in cypress/: this is so that we can use the global variable cy in our E2E tests. Click here for more info.