feat(testing): support cypress v13

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. TODO(caleb): update to changelog link on official site: https://github.com/cypress-io/cypress/blob/release/13.0.0/cli/CHANGELOG.md",
+      "implementation": "./src/migrations/update-16-8-0-cypress-13/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/migrations/update-16-8-0/cypress-13.spec.ts

@@ -0,0 +1,190 @@
+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);
+    console.log(readJson(tree, 'package.json'));
+    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);
+            }
+          }
+        });
+      }
+      "
+    `);
+  });
+});
+
+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',
+        },
+      },
+    },
+  });
+}