From 8a63d38f42c3ad34581e416ead822cdf37ce6b0a Mon Sep 17 00:00:00 2001 From: Caleb Ukle Date: Tue, 27 Jun 2023 13:50:21 -0500 Subject: [PATCH] feat(testing): bump cypress to latest for angular CT (#17788) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Leosvel Pérez Espinosa --- .../src/cypress-component-tests.test.ts | 3 +- e2e/cypress/src/cypress.test.ts | 3 +- packages/cypress/migrations.json | 18 +- .../warn-incompatible-angular-cypress.spec.ts | 242 ------------------ .../warn-incompatible-angular-cypress.ts | 70 ----- packages/cypress/src/utils/versions.ts | 2 +- 6 files changed, 15 insertions(+), 323 deletions(-) delete mode 100644 packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.spec.ts delete mode 100644 packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.ts diff --git a/e2e/angular-extensions/src/cypress-component-tests.test.ts b/e2e/angular-extensions/src/cypress-component-tests.test.ts index 70e9070327bb7..c5a19786bdef0 100644 --- a/e2e/angular-extensions/src/cypress-component-tests.test.ts +++ b/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.skip('Angular Cypress Component Tests', () => { +describe('Angular Cypress Component Tests', () => { let projectName: string; const appName = uniq('cy-angular-app'); const usedInAppLibName = uniq('cy-angular-lib'); diff --git a/e2e/cypress/src/cypress.test.ts b/e2e/cypress/src/cypress.test.ts index f7d518a75379e..f596d3c2def6e 100644 --- a/e2e/cypress/src/cypress.test.ts +++ b/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 diff --git a/packages/cypress/migrations.json b/packages/cypress/migrations.json index 6d88ef45a4c55..5fb80493cecf3 100644 --- a/packages/cypress/migrations.json +++ b/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 + } + } } } } diff --git a/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.spec.ts b/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.spec.ts deleted file mode 100644 index bd5e348a77691..0000000000000 --- a/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.spec.ts +++ /dev/null @@ -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 - > = 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); -} diff --git a/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.ts b/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.ts deleted file mode 100644 index 813d285c03ab3..0000000000000 --- a/packages/cypress/src/migrations/update-16-4-0/warn-incompatible-angular-cypress.ts +++ /dev/null @@ -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, 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 { - 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; - } -} diff --git a/packages/cypress/src/utils/versions.ts b/packages/cypress/src/utils/versions.ts index d0bf2e5f12581..8e8160c8a17f2 100644 --- a/packages/cypress/src/utils/versions.ts +++ b/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';