chore: cypress 10 upgrade (#1225)

BREAKING CHANGES:
The cypress test files moved from cypress/integration folder to cypress/e2e. The cypress config file changed and also some scripts have been adapted to reflect the new config structure.

.github/workflows/integration.yml

@@ -147,7 +147,7 @@ jobs:
           wait-on: 'http://localhost:4200'
           wait-on-timeout: 180
           working-directory: e2e
-          command: node cypress-ci-e2e **/*${{ matrix.test }}*.e2e-spec.ts
+          command: npx ts-node cypress-ci-e2e **/*${{ matrix.test }}*.e2e-spec.ts
 
       - name: Upload Screenshots
         uses: actions/upload-artifact@v2

docs/concepts/testing.md

@@ -52,7 +52,7 @@ As a basic rule of thumb we only test happy path functionality or workflows that
 
 Unit and module tests are closely located next to the production source code in the _src_ folder.
 
-Integration and end-to-end tests currently reside in _cypress/integration/specs_. _PageObjects_ are located in _cypress/integration/pages_.
+Integration and end-to-end tests currently reside in _cypress/e2e/specs_. _PageObjects_ are located in _cypress/e2e/pages_.
 If the filename of a spec contains the string `mock`, it is run as an integration test with mocked server API.
 If it (additionally) contains `b2c` or `b2b` the test also should run on the PWA set up with the corresponding channel.
 

docs/guides/migrations.md

@@ -29,6 +29,10 @@ Because Angular 14 now uses `yargs` to parse CLI arguments (see [#22778](https:/
 With [#23405](https://github.com/angular/angular-cli/pull/23405), the Angular team has introduced a temporary workaround for this.
 In order to reliably maintain compatibility in the future, the `cms` schematic's `noCMSPrefixing` option has been renamed to `cmsPrefixing` with an inverted behavior.
 
+Cypress has been upgraded from version 9 to 10.
+We went through the interactive migration to move our spec files from cypress/integration folder to the cypress/e2e folder and updated the config file as well as some scripts.
+Find more information in the [Cypress Migration Guide](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0).
+
 Since the used deferred load library is no longer maintained it is removed and replaced with similar standard browser functionality [`loading="lazy"`](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes).
 All uses of the `(deferLoad)` directive in custom code need to be replaced.
 

docs/guides/testing-cypress.md

@@ -64,7 +64,7 @@ Add the following to the [CoreModule providers](../../src/app/core/core.module.t
 ```
 
 That way each network response will be delayed randomly from 500 to 2000 ms.
-To be able to run tests locally now, the `defaultCommandTimeout` in [cypress.json](../../e2e/cypress.json) probably has to be increased.
+To be able to run tests locally now, the `defaultCommandTimeout` in [cypress.config.ts](../../e2e/cypress.config.ts) probably has to be increased.
 
 # Further References
 

e2e/cypress-ci-e2e.js → e2e/cypress-ci-e2e.ts

@@ -1,15 +1,19 @@
+/* eslint-disable no-console */
 /*
  * adapted from https://gist.github.com/Bkucera/4ffd05f67034176a00518df251e19f58
  *
  * referenced by open cypress issue https://github.com/cypress-io/cypress/issues/1313
  */
 
-const _ = require('lodash');
-const fs = require('fs');
-const cypress = require('cypress');
+import * as cypress from 'cypress';
+import * as _ from 'lodash';
+
+import config from './cypress.config';
 
 const MAX_NUM_RUNS = 4;
+
 const BROWSER = process.env.BROWSER || 'chrome';
+
 const TEST_FILES = process.argv.length > 2 ? process.argv[2].split(',') : undefined;
 
 if (!process.env.PWA_BASE_URL) {
@@ -26,35 +30,42 @@ const DEFAULT_CONFIG = {
   browser: BROWSER,
   defaultCommandTimeout: 15000,
   reporter: 'junit',
-  reporterOptions: 'mochaFile=reports/e2e-remote-[hash]-report.xml,includePending=true',
+  reporterOptions: { mochaFile: 'reports/e2e-remote-[hash]-report.xml', includePending: true },
   numTestsKeptInMemory: 1,
   watchForFileChanges: false,
   config: {
-    ...JSON.parse(fs.readFileSync('cypress.json')),
-    baseUrl: process.env.PWA_BASE_URL,
+    ...config,
+    e2e: { ...config.e2e, baseUrl: process.env.PWA_BASE_URL },
     pageLoadTimeout: 180000,
     trashAssetsBeforeRuns: true,
     video: false,
   },
-  env: { ICM_BASE_URL: process.env.ICM_BASE_URL },
+  group: undefined,
+  spec: undefined,
+  env: { ICM_BASE_URL: process.env.ICM_BASE_URL, numRuns: 0 },
 };
 
-const checkMaxRunsReached = (num, noOfSpecs) => {
+const checkMaxRunsReached = (num: number, noOfSpecs: number) => {
   // retry a single flaky test more often
   if ((num >= MAX_NUM_RUNS && noOfSpecs !== 1) || num >= 2 * MAX_NUM_RUNS) {
     console.log(`Ran a total of '${num}' times but still have failures. Exiting...`);
     return process.exit(1);
   }
 };
 
-const newGroupName = num => {
+const newGroupName = (num: number) => {
   // If we're using parallelization, set a new group name
   if (DEFAULT_CONFIG.group) {
     return `${DEFAULT_CONFIG.group}: retry #${num}`;
   }
 };
 
-const run = (num, spec, retryGroup) => {
+const run = (
+  num: number,
+  spec,
+  retryGroup?: string
+): Promise<CypressCommandLine.CypressRunResult | CypressCommandLine.CypressFailedRunResult> => {
+  /* eslint-disable-next-line no-param-reassign  */
   num += 1;
   let config = _.cloneDeep(DEFAULT_CONFIG);
   config = { ...config, env: { ...config.env, numRuns: num } };
@@ -70,7 +81,7 @@ const run = (num, spec, retryGroup) => {
   return cypress
     .run(config)
     .then(results => {
-      if (results.failures) {
+      if (results.status === 'failed') {
         throw new Error(results.message);
       } else if (results.totalFailed) {
         // rerun again with only the failed tests
@@ -83,7 +94,7 @@ const run = (num, spec, retryGroup) => {
           .flatten()
           .filter('error')
           .value()
-          .map(result => ({ title: result.title.join(' > '), error: result.error }))
+          .map(result => ({ title: result.title.join(' > '), error: result.displayError }))
           .forEach(result => console.warn(result.title, '\n', result.error, '\n'));
 
         checkMaxRunsReached(num, specs.length);

e2e/cypress.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  viewportWidth: 1024,
+  viewportHeight: 1500,
+  video: false,
+  videoUploadOnPasses: false,
+  defaultCommandTimeout: 8000,
+  requestTimeout: 30000,
+  responseTimeout: 30000,
+  chromeWebSecurity: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+      /* eslint-disable-next-line @typescript-eslint/no-var-requires */
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    baseUrl: 'http://localhost:4200',
+    specPattern: 'cypress/e2e/**/*.e2e-spec.ts',
+  },
+});

e2e/cypress/.eslintrc.json

@@ -28,9 +28,9 @@
           {
             "warnUnmatched": false,
             "pathPatterns": [
-              ".*/integration/framework/.*/*\\.ts",
-              ".*/integration/pages/.*\\.(module|page|dialog)\\.ts",
-              ".*/integration/specs/\\w+/[^/]*\\.e2e-spec\\.ts"
+              ".*/e2e/framework/.*/*\\.ts",
+              ".*/e2e/pages/.*\\.(module|page|dialog)\\.ts",
+              ".*/e2e/specs/\\w+/[^/]*\\.e2e-spec\\.ts"
             ]
           }
         ],

e2e/cypress/tsconfig.json

@@ -1,11 +1,5 @@
 {
-  "include": [
-    "pages/**/*.ts",
-    "framework/*.ts",
-    "support/*.ts",
-    "integration/**/*.ts",
-    "../node_modules/cypress"
-  ],
+  "include": ["pages/**/*.ts", "framework/*.ts", "support/*.ts", "e2e/**/*.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "outDir": "../node_modules/.out-tsc",

e2e/open-cypress.js

@@ -1,4 +1,4 @@
-const cypress = require('cypress/lib/cli');
+const cypress = require('cypress');
 const fs = require('fs');
 
 let icmBaseUrl;
@@ -20,10 +20,9 @@ if (!icmBaseUrl) {
 
 console.log('using', icmBaseUrl, 'as ICM_BASE_URL');
 
-const args = process.argv.slice(0, 2);
-args.push('open', '-e', 'ICM_BASE_URL=' + icmBaseUrl);
-if (process.argv.length > 2) {
-  args.push(...process.argv.slice(2));
-}
-
-cypress.init(args);
+cypress.open({
+  env: {
+    ICM_BASE_URL: icmBaseUrl,
+  },
+  e2e: true,
+});

e2e/package.json

@@ -14,10 +14,15 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "cypress": "^9.4.1",
+    "cypress": "^10.3.1",
     "cypress-failed-log": "^2.9.2",
     "cypress-log-to-output": "^1.1.2",
     "har-validator": "^5.1.5",
+    "lodash": "^4.17.21",
     "typescript": "^4.5.5"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^18.6.1"
   }
 }

e2e/test-e2e.sh

@@ -13,7 +13,7 @@ cd "$(dirname "$(readlink -f "$0")")"
 
 while true
 do
-  timeout 10m node cypress-ci-e2e "$files"
+  timeout 10m npx ts-node cypress-ci-e2e "$files"
   ret="$?"
   if [ "$ret" -eq "124" ]
   then

e2e/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es6",
+    "types": ["node"]
+  },
+  "files": ["cypress.config.ts", "cypress-ci-e2e.ts"]
+}