feat(testing): bump cypress to latest for angular CT (#17788)

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>

e2e/angular-extensions/src/cypress-component-tests.test.ts

@@ -14,8 +14,7 @@ import {
 import { names } from '@nx/devkit';
 import { join } from 'path';
 
-// TODO(leo): enable when https://github.com/cypress-io/cypress/pull/27030 is merged and released
+describe('Angular Cypress Component Tests', () => {
-describe.skip('Angular Cypress Component Tests', () => {
   let projectName: string;
   const appName = uniq('cy-angular-app');
   const usedInAppLibName = uniq('cy-angular-lib');

e2e/cypress/src/cypress.test.ts

@@ -178,8 +178,7 @@ describe('env vars', () => {
     'should allow CT and e2e in the same project',
     async () => {
       await testCtAndE2eInProject('next');
-      // TODO(leo): uncomment when https://github.com/cypress-io/cypress/pull/27030 is merged and released
+      await testCtAndE2eInProject('angular');
-      // await testCtAndE2eInProject('angular');
       await testCtAndE2eInProject('react');
     },
     TEN_MINS_MS

packages/cypress/migrations.json

@@ -59,12 +59,6 @@
       "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-4-0-warn-incompatible-angular-cypress": {
-      "cli": "nx",
-      "version": "16.4.0-beta.11",
-      "description": "Cypress Component Testing is broken with Angular 16.1.0. Warn about it if the workspace has Angular >= 16.1.0 and Angular projects using Component Testing.",
-      "implementation": "./src/migrations/update-16-4-0/warn-incompatible-angular-cypress"
     }
   },
   "packageJsonUpdates": {
@@ -79,6 +73,18 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "16.5.0": {
+      "version": "16.5.0-beta.0",
+      "requires": {
+        "cypress": ">=12.0.0 <12.16.0"
+      },
+      "packages": {
+        "cypress": {
+          "version": "^12.16.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.spec.ts

@@ -1,242 +0,0 @@
-import type { ProjectConfiguration, ProjectGraph, Tree } from '@nx/devkit';
-import { addProjectConfiguration, logger } from '@nx/devkit';
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { readModulePackageJson } from 'nx/src/utils/package-json';
-import migration from './warn-incompatible-angular-cypress';
-
-jest.mock('nx/src/utils/package-json');
-let projectGraph: ProjectGraph;
-jest.mock('@nx/devkit', () => ({
-  ...jest.requireActual('@nx/devkit'),
-  createProjectGraphAsync: () => Promise.resolve(projectGraph),
-}));
-
-describe('warn-incompatible-angular-cypress migration', () => {
-  let tree: Tree;
-  let mockReadModulePackageJson: jest.Mock<
-    ReturnType<typeof readModulePackageJson>
-  > = readModulePackageJson as never;
-
-  beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-    jest.resetAllMocks();
-  });
-
-  it('should not warn when Angular is not installed', async () => {
-    mockReadModulePackageJson.mockReturnValue(null);
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:react']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).not.toHaveBeenCalled();
-  });
-
-  it('should not warn when Angular version is lower than 16.1.0', async () => {
-    mockReadModulePackageJson.mockReturnValue({
-      packageJson: { name: '@angular/core', version: '16.0.0' },
-      path: '',
-    });
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:@angular/core']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).not.toHaveBeenCalled();
-  });
-
-  it('should not warn when there are no Angular projects', async () => {
-    mockReadModulePackageJson.mockReturnValue({
-      packageJson: { name: '@angular/core', version: '16.1.0' },
-      path: '',
-    });
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:react']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).not.toHaveBeenCalled();
-  });
-
-  it('should not warn when the Angular projects are not using Cypress Component Testing', async () => {
-    mockReadModulePackageJson.mockReturnValue({
-      packageJson: { name: '@angular/core', version: '16.1.0' },
-      path: '',
-    });
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:react']
-    );
-    addProject(
-      tree,
-      'app2',
-      {
-        root: 'apps/app2',
-        targets: {
-          e2e: {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'e2e',
-            },
-          },
-        },
-      },
-      ['npm:@angular/core']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).not.toHaveBeenCalled();
-  });
-
-  it('should warn when there is an Angular project using Cypress Component Testing', async () => {
-    mockReadModulePackageJson.mockReturnValue({
-      packageJson: { name: '@angular/core', version: '16.1.0' },
-      path: '',
-    });
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:@angular/core']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).toHaveBeenCalled();
-  });
-
-  it('should warn only once when there are multiple Angular projects using Cypress Component Testing', async () => {
-    mockReadModulePackageJson.mockReturnValue({
-      packageJson: { name: '@angular/core', version: '16.1.0' },
-      path: '',
-    });
-    addProject(
-      tree,
-      'app1',
-      {
-        root: 'apps/app1',
-        targets: {
-          'component-test': {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:@angular/core']
-    );
-    addProject(
-      tree,
-      'app2',
-      {
-        root: 'apps/app2',
-        targets: {
-          e2e: {
-            executor: '@nx/cypress:cypress',
-            options: {
-              testingType: 'component',
-            },
-          },
-        },
-      },
-      ['npm:@angular/core']
-    );
-    const loggerSpy = jest.spyOn(logger, 'warn');
-
-    await migration(tree);
-
-    expect(loggerSpy).toHaveBeenCalledTimes(1);
-  });
-});
-
-function addProject(
-  tree: Tree,
-  projectName: string,
-  config: ProjectConfiguration,
-  dependencies: string[]
-): void {
-  projectGraph = {
-    dependencies: {
-      [projectName]: dependencies.map((d) => ({
-        source: projectName,
-        target: d,
-        type: 'static',
-      })),
-    },
-    nodes: {
-      [projectName]: { data: config, name: projectName, type: 'app' },
-    },
-  };
-  addProjectConfiguration(tree, projectName, config);
-}

packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.ts

@@ -1,70 +0,0 @@
-import type { Tree } from '@nx/devkit';
-import { createProjectGraphAsync, logger, stripIndents } from '@nx/devkit';
-import { forEachExecutorOptions } from '@nx/devkit/src/generators/executor-options-utils';
-import { readModulePackageJson } from 'nx/src/utils/package-json';
-import { lt } from 'semver';
-import type { CypressExecutorOptions } from '../../executors/cypress/cypress.impl';
-
-export default async function (tree: Tree) {
-  const angularVersion = getInstalledAngularVersion();
-  if (!angularVersion || lt(angularVersion, '16.1.0')) {
-    return;
-  }
-
-  const angularProjects = await getAngularProjects();
-  if (!angularProjects.length) {
-    return;
-  }
-
-  let skipChecking = false;
-  forEachExecutorOptions(
-    tree,
-    '@nx/cypress:cypress',
-    (options: Partial<CypressExecutorOptions>, projectName) => {
-      if (skipChecking || !angularProjects.includes(projectName)) {
-        return;
-      }
-
-      if (options.testingType === 'component') {
-        skipChecking = true;
-        logger.warn(
-          stripIndents`Some of your Angular projects are setup for Cypress Component testing.
-          The current version of Cypress does not support component testing for Angular 16.1 so your tests may fail.
-          If your component tests fail, here are some recommended next steps:
-          
-          - Revert these changes and update Nx without updating Angular ("nx migrate latest --interactive"). You can update Angular once the issue has been resolved
-          - Keep these changes but temporarily disable the component tests until this issue is resolved
-          
-          Check https://github.com/nrwl/nx/issues/17720 for more details.
-
-          `
-        );
-      }
-    }
-  );
-}
-
-async function getAngularProjects(): Promise<string[]> {
-  const projectGraph = await createProjectGraphAsync();
-
-  return Object.entries(projectGraph.dependencies)
-    .filter(([node, dep]) =>
-      dep.some(
-        ({ target }) =>
-          !projectGraph.externalNodes?.[node] && target === 'npm:@angular/core'
-      )
-    )
-    .map(([projectName]) => projectName);
-}
-
-function getInstalledAngularVersion(): string {
-  try {
-    const {
-      packageJson: { version },
-    } = readModulePackageJson('@angular/core');
-
-    return version;
-  } catch {
-    return null;
-  }
-}

packages/cypress/src/utils/versions.ts

@@ -2,7 +2,7 @@ export const nxVersion = require('../../package.json').version;
 export const eslintPluginCypressVersion = '^2.10.3';
 export const typesNodeVersion = '16.11.7';
 export const cypressViteDevServerVersion = '^2.2.1';
-export const cypressVersion = '^12.11.0';
+export const cypressVersion = '^12.16.0';
 export const cypressWebpackVersion = '^2.0.0';
 export const webpackHttpPluginVersion = '^5.5.0';
 export const viteVersion = '^4.3.4';