feat(testing): support cypress v13

docs/generated/packages/cypress/executors/cypress.json

@@ -145,6 +145,10 @@
         "type": "boolean",
         "description": "If passed, Cypress output will not be printed to stdout. Only output from the configured Mocha reporter will print.",
         "default": false
+      },
+      "runnerUi": {
+        "type": "boolean",
+        "description": "Displays the Cypress Runner UI. Useful for when Test Replay is enabled and you would still like the Cypress Runner UI to be displayed for screenshots and video."
       }
     },
     "additionalProperties": true,

packages/cypress/migrations.json

@@ -59,6 +59,12 @@
       "version": "16.4.0-beta.10",
       "description": "Remove tsconfig.e2e.json and add settings to project tsconfig.json. tsConfigs executor option is now deprecated. The project level tsconfig.json file should be used instead.",
       "implementation": "./src/migrations/update-16-4-0/tsconfig-sourcemaps"
+    },
+    "update-16-8-0-cypress-13": {
+      "cli": "nx",
+      "version": "16.8.0-beta.4",
+      "description": "Update to Cypress v13. Most noteable change is video recording is off by default. This migration will only update if the workspace is already on Cypress v12. https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-130",
+      "implementation": "./src/migrations/update-16-8-0/cypress-13"
     }
   },
   "packageJsonUpdates": {

packages/cypress/package.json

@@ -43,7 +43,7 @@
     "@nx/linter": "file:../linter"
   },
   "peerDependencies": {
-    "cypress": ">= 3 < 13"
+    "cypress": ">= 3 < 14"
   },
   "peerDependenciesMeta": {
     "cypress": {

packages/cypress/plugins/cypress-preset.ts

@@ -7,7 +7,6 @@ import vitePreprocessor from '../src/plugins/preprocessor-vite';
 interface BaseCypressPreset {
   videosFolder: string;
   screenshotsFolder: string;
-  video: boolean;
   chromeWebSecurity: boolean;
 }
 
@@ -47,7 +46,6 @@ export function nxBaseCypressPreset(
   return {
     videosFolder,
     screenshotsFolder,
-    video: true,
     chromeWebSecurity: false,
   };
 }

packages/cypress/src/executors/cypress/cypress.impl.ts

@@ -51,6 +51,7 @@ export interface CypressExecutorOptions extends Json {
   tag?: string;
   port?: number | 'cypress-auto';
   quiet?: boolean;
+  runnerUi?: boolean;
 }
 
 interface NormalizedCypressExecutorOptions extends CypressExecutorOptions {
@@ -258,6 +259,7 @@ async function runCypress(
   options.tag = opts.tag;
   options.exit = opts.exit;
   options.headed = opts.headed;
+  options.runnerUi = opts.runnerUi;
 
   if (opts.headless) {
     options.headless = opts.headless;

packages/cypress/src/executors/cypress/schema.json

@@ -164,6 +164,10 @@
       "type": "boolean",
       "description": "If passed, Cypress output will not be printed to stdout. Only output from the configured Mocha reporter will print.",
       "default": false
+    },
+    "runnerUi": {
+      "type": "boolean",
+      "description": "Displays the Cypress Runner UI. Useful for when Test Replay is enabled and you would still like the Cypress Runner UI to be displayed for screenshots and video."
     }
   },
   "additionalProperties": true,

packages/cypress/src/migrations/update-16-8-0/cypress-13.spec.ts

@@ -0,0 +1,243 @@
+import { Tree, addProjectConfiguration, readJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports';
+import { updateToCypress13 } from './cypress-13';
+
+describe('Cypress 13', () => {
+  let tree: Tree;
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+  });
+
+  it('should update deps to cypress v13', async () => {
+    setup(tree, { name: 'my-app' });
+
+    await updateToCypress13(tree);
+    expect(readJson(tree, 'package.json').devDependencies.cypress).toEqual(
+      '^13.0.0'
+    );
+  });
+
+  it('should update videoUploadOnPasses from config w/setupNodeEvents', async () => {
+    setup(tree, { name: 'my-app-video-upload-on-passes' });
+    await updateToCypress13(tree);
+    expect(
+      tree.read('apps/my-app-video-upload-on-passes/cypress.config.ts', 'utf-8')
+    ).toMatchInlineSnapshot(`
+      "import fs from 'fs';
+
+      import { defineConfig } from 'cypress';
+      import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+      import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
+
+      export default defineConfig({
+        something: 'blah',
+        // nodeVersion: 'system',
+        // videoUploadOnPasses: false ,
+        e2e: {
+          ...nxE2EPreset(__filename),
+          setupNodeEvents(on, config) {
+            const a = '';
+            removePassedSpecs(on);
+          },
+        },
+        component: {
+          ...nxComponentTestingPreset(__filename),
+          setupNodeEvents: (on, config) => {
+            const b = '';
+            removePassedSpecs(on);
+          },
+        },
+      });
+
+      /**
+       * Delete videos for specs that do not contain failing or retried tests.
+       * This function is to be used in the 'setupNodeEvents' configuration option as a replacement to
+       * 'videoUploadOnPasses' which has been removed.
+       *
+       * https://docs.cypress.io/guides/guides/screenshots-and-videos#Delete-videos-for-specs-without-failing-or-retried-tests
+       **/
+      function removePassedSpecs(on) {
+        on('after:spec', (spec, results) => {
+          if (results && results.vide) {
+            const hasFailures = results.tests.some((t) =>
+              t.attempts.some((a) => a.state === 'failed')
+            );
+
+            if (!hasFailures) {
+              fs.unlinkSync(results.video);
+            }
+          }
+        });
+      }
+      "
+    `);
+  });
+  it('should remove nodeVersion from config', async () => {
+    setup(tree, { name: 'my-app-node-version' });
+    await updateToCypress13(tree);
+    expect(tree.read('apps/my-app-node-version/cypress.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import fs from 'fs';
+
+      import { defineConfig } from 'cypress';
+      import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+      import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
+
+      export default defineConfig({
+        something: 'blah',
+        // nodeVersion: 'system',
+        // videoUploadOnPasses: false ,
+        e2e: {
+          ...nxE2EPreset(__filename),
+          setupNodeEvents(on, config) {
+            const a = '';
+            removePassedSpecs(on);
+          },
+        },
+        component: {
+          ...nxComponentTestingPreset(__filename),
+          setupNodeEvents: (on, config) => {
+            const b = '';
+            removePassedSpecs(on);
+          },
+        },
+      });
+
+      /**
+       * Delete videos for specs that do not contain failing or retried tests.
+       * This function is to be used in the 'setupNodeEvents' configuration option as a replacement to
+       * 'videoUploadOnPasses' which has been removed.
+       *
+       * https://docs.cypress.io/guides/guides/screenshots-and-videos#Delete-videos-for-specs-without-failing-or-retried-tests
+       **/
+      function removePassedSpecs(on) {
+        on('after:spec', (spec, results) => {
+          if (results && results.vide) {
+            const hasFailures = results.tests.some((t) =>
+              t.attempts.some((a) => a.state === 'failed')
+            );
+
+            if (!hasFailures) {
+              fs.unlinkSync(results.video);
+            }
+          }
+        });
+      }
+      "
+    `);
+  });
+
+  it('should comment about overriding readFile command', async () => {
+    setup(tree, { name: 'my-app-read-file' });
+    const testContent = `describe('something', () => {
+  it('should do the thing', () => {
+    cy.readFile('my-data.json').its('name').should('eq', 'Nx');
+  });
+});
+`;
+    tree.write('apps/my-app-read-file/src/something.cy.ts', testContent);
+
+    tree.write(
+      'apps/my-app-read-file/cypress/support/commands.ts',
+      `declare namespace Cypress {
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+Cypress.Commands.overwrite('readFile', () => {});
+
+`
+    );
+    await updateToCypress13(tree);
+
+    expect(
+      tree.read('apps/my-app-read-file/src/something.cy.ts', 'utf-8')
+    ).toEqual(testContent);
+    expect(
+      tree.read('apps/my-app-read-file/cypress/support/commands.ts', 'utf-8')
+    ).toMatchInlineSnapshot(`
+      "declare namespace Cypress {
+        interface Chainable<Subject> {
+          login(email: string, password: string): void;
+        }
+      }
+      //
+      // -- This is a parent command --
+      Cypress.Commands.add('login', (email, password) => {
+        console.log('Custom command example: Login', email, password);
+      });
+      /**
+       * TODO(@nx/cypress): This command can no longer be overridden
+       * Consider using a different name like 'custom_readFile'
+       * More info: https://docs.cypress.io/guides/references/migration-guide#readFile-can-no-longer-be-overwritten-with-CypressCommandsoverwrite
+       **/
+      Cypress.Commands.overwrite('readFile', () => {});
+      "
+    `);
+  });
+});
+
+function setup(tree: Tree, options: { name: string }) {
+  tree.write(
+    `apps/${options.name}/cypress.config.ts`,
+    `
+import { defineConfig} from 'cypress';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
+
+export default defineConfig({
+  something: 'blah',
+  nodeVersion: 'system',
+  videoUploadOnPasses: false,
+  e2e: {
+    ...nxE2EPreset(__filename),
+    videoUploadOnPasses: false,
+    nodeVersion: 'bundled',
+    setupNodeEvents(on, config) {
+      const a = '';
+    },
+  },
+  component: {
+    ...nxComponentTestingPreset(__filename),
+    videoUploadOnPasses: false,
+    nodeVersion: 'something',
+    setupNodeEvents: (on, config) => {
+      const b = '';
+    }
+  },
+})
+`
+  );
+  tree.write(
+    'package.json',
+    JSON.stringify({ devDependencies: { cypress: '^12.16.0' } })
+  );
+  addProjectConfiguration(tree, options.name, {
+    root: `apps/${options.name}`,
+    sourceRoot: `apps/${options.name}/src`,
+    targets: {
+      e2e: {
+        executor: '@nx/cypress:cypress',
+        options: {
+          testingType: 'e2e',
+          cypressConfig: `apps/${options.name}/cypress.config.ts`,
+          devServerTarget: 'app:serve',
+        },
+      },
+      'component-test': {
+        executor: '@nx/cypress:cypress',
+        options: {
+          testingType: 'component',
+          cypressConfig: `apps/${options.name}/ct-cypress.config.ts`,
+          skipServe: true,
+          devServerTarget: 'app:build',
+        },
+      },
+    },
+  });
+}