Migrate to Cypress 10.11.0

[MikeMcC399]

This PR implements the enhancement request #3100 "Update Cypress to latest version (10)" to update Cypress to version 10.11.0, which is currently the latest available version.

A side effect of this update is to allow Cypress to support the the Apple M1 ARM architecture natively without requiring Rosetta to run.

See Cypress Changelog.

The PR replaces the closed PR #3137 for Cypress 10.10.0 which was withdrawn due to builds not working on M1. If the build did not work, then Cypress could not test. In the meantime there have been npm package updates and it has been confirmed that M1 builds are working.

Impact

Cypress 10 introduces breaking changes due to the new functionality of component testing which is added alongside the existing end-to-end testing (e2e). For instance, new folders are introduced, so that the existing cypress/integration folder is migrated to cypress/e2e. Also test specs are renamed: app_to_web.js becomes app_to_web.cy.js. See the Cypress Migration Guide for more detail.

In Cypress 10 the "Run all specs" is no longer available in the UI. Only individual tests can be run from the UI. To run all tests the CLI needs to be used. See Discussion: 'Run all specs' removal in Cypress 10.

Migration steps

The following steps have been carried out by this PR:

Install Cypress 10

1. npm install -D cypress@latest (installs cypress@10.11.0 - see Changelog)
2. npx cypress open
3. Click "Continue to Cypress 10"

Migration tool

In the migration tool which automatically starts in the Cypress UI:

1. Click "Rename these specs for me"
2. Click "Rename the support file for me"
3. Click "Migrate the configuration for me"

• "E2E Testing" is now marked as "Configured"
• "Component Testing" is left as "Not Configured"

4. Close Cypress test runner window

Post installation

1. Edit .github/workflows/cypress-test-prod.yml
   • Change cypress spec folder from integration to e2e i.e. spec: cypress/e2e/*.js
   • Update the call to cypress-io/github-action to v4 and change to headed syntax
2. Modify the cypress:open script in package.json to use e2e and browser Chrome i.e. "cypress:open": "cypress open --e2e --browser chrome"
3. Update README.md regarding change of folder and removal of "all tests" option in open command.
4. Add cypress/downloads/ to .gitignore

Verification

After fetching the branch MikeMcC399:cypress-10 execute
npm ci to install Cypress 10.11.0.

Execute the following and check that all tests pass:

npm run test:chrome
npm run test:firefox
npm run test
npx cypress run -s 'cypress/e2e/*.js' -c baseUrl=https://coronawarn.app --headless --browser chrome

Execute
npm run test:open
and check that the list of e2e test specs is shown immediately and the default browser is Chrome.
Select and run one of the tests listed, such as mime.cy.js.

Test on:

• Windows 11
• Ubuntu 20.04
• macOS

Note that there is currently an issue with a warning message "Couldn't find tsconfig.json. tsconfig-paths will be skipped". See issue 22273 in cypress-io/cypress#22273. This warning can be ignored.

Test the workflow .github/workflows/cypress-test-prod.yml and ensure that it passes.

---

Internal Tracking ID: EXPOSUREAPP-14080

[dsarkar]

https://github.com/corona-warn-app/cwa-website/actions/runs/3361384998

[MikeMcC399]

@dsarkar

• The action https://github.com/corona-warn-app/cwa-website/actions/runs/3361384998 succeeds 🙂. You may notice that it has a new nicely formatted summary at the bottom.

• The remaining warning is not new and is covered by Action cypress-test-prod.yml triggers set-output deprecation warning #3149.