cypress-io · AtofStryker · Nov 6, 2024 · Nov 4, 2024 · AtofStryker · Nov 5, 2024
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -20,6 +20,7 @@ _Released 12/3/2024 (PENDING)_
 - Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
 - Cypress Component Testing no longer supports `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
 - Cypress Component Testing no longer supports `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
+- Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
 
 **Deprecations:**
 

diff --git a/npm/angular/package.json b/npm/angular/package.json
@@ -12,17 +12,17 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@angular/common": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0",
+    "@angular/platform-browser-dynamic": "^17.2.0",
     "@cypress/mount-utils": "0.0.0-development",
     "typescript": "~5.4.5",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {
-    "@angular/common": ">=13",
-    "@angular/core": ">=13",
-    "@angular/platform-browser-dynamic": ">=13",
+    "@angular/common": ">=17.2",
+    "@angular/core": ">=17.2",
+    "@angular/platform-browser-dynamic": ">=17.2",
     "zone.js": ">=0.11.0"
   },
   "files": [

diff --git a/npm/cypress-schematic/README.md b/npm/cypress-schematic/README.md
@@ -31,7 +31,7 @@
 
 ## Requirements
 
-- Angular 14+
+- Angular 17.2.0+
 
 ## Usage ⏯
 

diff --git a/npm/cypress-schematic/package.json b/npm/cypress-schematic/package.json
@@ -7,29 +7,28 @@
     "build": "tsc -p tsconfig.json",
     "build:watch": "tsc -p tsconfig.json --watch",
     "lint": "eslint --ext .ts,.json, .",
-    "test": "mocha -r @packages/ts/register --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json src/**/*.spec.ts"
+    "test": "vitest run --no-file-parallelism"
   },
   "dependencies": {
-    "jsonc-parser": "^3.0.0",
-    "rxjs": "~6.6.0"
+    "jsonc-parser": "^3.3.1",
+    "rxjs": "~7.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1402.1",
-    "@angular-devkit/core": "^14.2.1",
-    "@angular-devkit/schematics": "^14.2.1",
-    "@angular-devkit/schematics-cli": "^14.2.1",
-    "@angular/cli": "^14.2.1",
-    "@schematics/angular": "^14.2.1",
-    "@types/chai-enzyme": "0.6.7",
+    "@angular-devkit/architect": "^0.1802.11",
+    "@angular-devkit/core": "^18.2.11",
+    "@angular-devkit/schematics": "^18.2.11",
+    "@angular-devkit/schematics-cli": "^18.2.11",
+    "@angular/cli": "^18.2.11",
+    "@schematics/angular": "^18.2.11",
+    "@types/chai-enzyme": "0.6.13",
     "@types/mocha": "8.0.3",
     "@types/node": "^20.16.0",
-    "chai": "4.2.0",
-    "mocha": "3.5.3",
-    "typescript": "~5.4.5"
+    "typescript": "~5.4.5",
+    "vitest": "2.1.4"
   },
   "peerDependencies": {
-    "@angular/cli": ">=14",
-    "@angular/core": ">=14"
+    "@angular/cli": ">=17.2",
+    "@angular/core": ">=17.2"
   },
   "license": "MIT",
   "repository": {

diff --git a/...ngular-cli-configured/src/assets/.gitkeep → ...s-schematic/projects/sandbox/src/.gitkeep b/...ngular-cli-configured/src/assets/.gitkeep → ...s-schematic/projects/sandbox/src/.gitkeep
diff --git a/...ular-cli-unconfigured/src/assets/.gitkeep → ...s/sandbox/src/fake-component.component.ts b/...ular-cli-unconfigured/src/assets/.gitkeep → ...s/sandbox/src/fake-component.component.ts
diff --git a/npm/cypress-schematic/src/ct.spec.ts b/npm/cypress-schematic/src/ct.spec.ts
@@ -1,3 +1,4 @@
+import { describe, it } from 'vitest'
 import Fixtures, { ProjectFixtureDir } from '@tooling/system-tests'
 import * as FixturesScaffold from '@tooling/system-tests/lib/dep-installer'
 import execa from 'execa'
@@ -35,11 +36,9 @@ const copyAngularMount = async (projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-14', 'angular-15']
-
-describe('ng add @cypress/schematic / e2e and ct', function () {
-  this.timeout(1000 * 60 * 5)
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18']
 
+describe('ng add @cypress/schematic / e2e and ct', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {
     it('should install ct files with option and no component specs', async () => {
       const projectPath = await scaffoldAngularProject(project)

diff --git a/npm/cypress-schematic/src/e2e.spec.ts b/npm/cypress-schematic/src/e2e.spec.ts
@@ -1,3 +1,4 @@
+import { describe, it } from 'vitest'
 import Fixtures, { ProjectFixtureDir } from '@tooling/system-tests'
 import * as FixturesScaffold from '@tooling/system-tests/lib/dep-installer'
 import execa from 'execa'
@@ -24,11 +25,9 @@ const runCommandInProject = (command: string, projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-14', 'angular-15']
-
-describe('ng add @cypress/schematic / only e2e', function () {
-  this.timeout(1000 * 60 * 5)
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18']
 
+describe('ng add @cypress/schematic / only e2e', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {
     it('should install e2e files by default', async () => {
       const projectPath = await scaffoldAngularProject(project)

diff --git a/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-add/index.spec.ts
@@ -1,8 +1,6 @@
-/// <reference path="../../../../../cli/types/mocha/index.d.ts" />
-
+import { describe, beforeEach, it, expect } from 'vitest'
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
 import { join } from 'path'
-import { expect } from 'chai'
 import { JsonObject } from '@angular-devkit/core'
 
 describe('@cypress/schematic: ng-add', () => {
@@ -33,12 +31,12 @@ describe('@cypress/schematic: ng-add', () => {
   }
 
   beforeEach(async () => {
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'workspace', workspaceOptions)
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'application', appOptions, appTree)
   })
 
   it('should create cypress files for e2e testing by default', async () => {
-    await schematicRunner.runSchematicAsync('ng-add', {}, appTree).toPromise().then((tree: UnitTestTree) => {
+    await schematicRunner.runSchematic('ng-add', {}, appTree).then((tree: UnitTestTree) => {
       const files = tree.files
 
       expect(files).to.contain('/projects/sandbox/cypress/e2e/spec.cy.ts')
@@ -51,7 +49,7 @@ describe('@cypress/schematic: ng-add', () => {
   })
 
   it('should create cypress files for component testing', async () => {
-    await schematicRunner.runSchematicAsync('ng-add', { 'component': true }, appTree).toPromise().then((tree: UnitTestTree) => {
+    await schematicRunner.runSchematic('ng-add', { 'component': true }, appTree).then((tree: UnitTestTree) => {
       const files = tree.files
 
       expect(files).to.contain('/projects/sandbox/cypress/support/component.ts')
@@ -66,7 +64,7 @@ describe('@cypress/schematic: ng-add', () => {
   })
 
   it('should add @cypress/schematic to the schemaCollections array', async () => {
-    const tree = await schematicRunner.runSchematicAsync('ng-add', { 'component': true }, appTree).toPromise()
+    const tree = await schematicRunner.runSchematic('ng-add', { 'component': true }, appTree)
     const angularJson = readAngularJson(tree)
     const cliOptions = angularJson.cli as JsonObject
 
@@ -86,7 +84,7 @@ describe('@cypress/schematic: ng-add', () => {
       },
     }))
 
-    const tree = await schematicRunner.runSchematicAsync('ng-add', { 'component': true }, appTree).toPromise()
+    const tree = await schematicRunner.runSchematic('ng-add', { 'component': true }, appTree)
 
     angularJson = readAngularJson(tree)
     const cliOptions = angularJson.cli as JsonObject

diff --git a/npm/cypress-schematic/src/schematics/ng-generate/component/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-generate/component/index.spec.ts
@@ -1,5 +1,5 @@
+import { describe, beforeEach, it, expect } from 'vitest'
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
-import { expect } from 'chai'
 import { join } from 'path'
 
 describe('ng-generate @cypress/schematic:component', () => {
@@ -12,10 +12,10 @@ describe('ng-generate @cypress/schematic:component', () => {
   const workspaceOptions = {
     name: 'workspace',
     newProjectRoot: 'projects',
-    version: '12.0.0',
+    version: '18.0.0',
   }
 
-  const appOptions: Parameters<typeof schematicRunner['runExternalSchematicAsync']>[2] = {
+  const appOptions: Parameters<typeof schematicRunner['runExternalSchematic']>[2] = {
     name: 'sandbox',
     inlineTemplate: false,
     routing: false,
@@ -24,12 +24,12 @@ describe('ng-generate @cypress/schematic:component', () => {
   }
 
   beforeEach(async () => {
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'workspace', workspaceOptions)
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'application', appOptions, appTree)
   })
 
   it('should create cypress ct alongside the generated component', async () => {
-    const tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+    const tree = await schematicRunner.runSchematic('component', { name: 'foo', project: 'sandbox', skipImport: true }, appTree)
 
     expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.ts')
     expect(tree.files).to.contain('/projects/sandbox/src/app/foo/foo.component.html')
@@ -39,9 +39,9 @@ describe('ng-generate @cypress/schematic:component', () => {
   })
 
   it('should not generate component which does exist already', async () => {
-    let tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+    let tree = await schematicRunner.runSchematic('component', { name: 'foo', project: 'sandbox', skipImport: true }, appTree)
 
-    tree = await schematicRunner.runSchematicAsync('component', { name: 'foo', project: 'sandbox' }, appTree).toPromise()
+    tree = await schematicRunner.runSchematic('component', { name: 'foo', project: 'sandbox', skipImport: true }, appTree)
 
     expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.ts').length).to.eq(1)
     expect(tree.files.filter((f) => f === '/projects/sandbox/src/app/foo/foo.component.html').length).to.eq(1)
@@ -50,7 +50,7 @@ describe('ng-generate @cypress/schematic:component', () => {
   })
 
   it('should generate component given a component containing a directory', async () => {
-    const tree = await schematicRunner.runSchematicAsync('component', { name: 'foo/bar', project: 'sandbox' }, appTree).toPromise()
+    const tree = await schematicRunner.runSchematic('component', { name: 'foo/bar', project: 'sandbox', skipImport: true }, appTree)
 
     expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.ts')
     expect(tree.files).to.contain('/projects/sandbox/src/app/foo/bar/bar.component.html')

diff --git a/npm/cypress-schematic/src/schematics/ng-generate/cypress-ct-tests/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-generate/cypress-ct-tests/index.spec.ts
@@ -1,9 +1,6 @@
-/// <reference path="../../../../../../cli/types/mocha/index.d.ts" />
-
+import { describe, it, beforeEach, expect } from 'vitest'
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
 import { join } from 'path'
-import { expect } from 'chai'
-import { take } from 'rxjs/operators'
 
 describe('ng-generate @cypress/schematic:specs-ct', () => {
   const schematicRunner = new SchematicTestRunner(
@@ -15,10 +12,10 @@ describe('ng-generate @cypress/schematic:specs-ct', () => {
   const workspaceOptions = {
     name: 'workspace',
     newProjectRoot: 'projects',
-    version: '12.0.0',
+    version: '18.0.0',
   }
 
-  const appOptions: Parameters<typeof schematicRunner['runExternalSchematicAsync']>[2] = {
+  const appOptions: Parameters<typeof schematicRunner['runExternalSchematic']>[2] = {
     name: 'sandbox',
     inlineTemplate: false,
     routing: false,
@@ -27,11 +24,13 @@ describe('ng-generate @cypress/schematic:specs-ct', () => {
   }
 
   beforeEach(async () => {
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'workspace', workspaceOptions)
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'application', appOptions, appTree)
   })
 
   it('should create cypress component tests alongside components', async () => {
-    return schematicRunner.runSchematicAsync('specs-ct', { project: 'sandbox' }, appTree).pipe(take(1)).subscribe((tree: UnitTestTree) => expect(tree.files).to.contain('/projects/sandbox/app/src/app.component.cy.ts'))
+    const tree = await schematicRunner.runSchematic('specs-ct', { project: 'sandbox' }, appTree)
+
+    expect(tree.files).to.contain('/projects/sandbox/src/fake-component.component.cy.ts')
   })
 })
diff --git a/npm/cypress-schematic/src/schematics/ng-generate/cypress-test/index.spec.ts b/npm/cypress-schematic/src/schematics/ng-generate/cypress-test/index.spec.ts
@@ -1,8 +1,6 @@
-/// <reference path="../../../../../../cli/types/mocha/index.d.ts" />
-
+import { describe, it, beforeEach, expect } from 'vitest'
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'
 import { join } from 'path'
-import { expect } from 'chai'
 
 describe('ng-generate @cypress/schematic:spec', () => {
   const schematicRunner = new SchematicTestRunner(
@@ -17,7 +15,7 @@ describe('ng-generate @cypress/schematic:spec', () => {
     version: '12.0.0',
   }
 
-  const appOptions: Parameters<typeof schematicRunner['runExternalSchematicAsync']>[2] = {
+  const appOptions: Parameters<typeof schematicRunner['runExternalSchematic']>[2] = {
     name: 'sandbox',
     inlineTemplate: false,
     routing: false,
@@ -26,15 +24,19 @@ describe('ng-generate @cypress/schematic:spec', () => {
   }
 
   beforeEach(async () => {
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions).toPromise()
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise()
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'workspace', workspaceOptions)
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'application', appOptions, appTree)
   })
 
   it('should create cypress e2e spec file by default', async () => {
-    await schematicRunner.runSchematicAsync('spec', { name: 'foo', project: 'sandbox' }, appTree).toPromise().then((tree: UnitTestTree) => expect(tree.files).to.contain('/projects/sandbox/cypress/e2e/foo.cy.ts'))
+    const tree = await schematicRunner.runSchematic('spec', { name: 'foo', project: 'sandbox' }, appTree)
+
+    expect(tree.files).to.contain('/projects/sandbox/cypress/e2e/foo.cy.ts')
   })
 
   it('should create cypress ct spec file when testingType is component', async () => {
-    await schematicRunner.runSchematicAsync('spec', { name: 'foo', project: 'sandbox', component: true }, appTree).toPromise().then((tree: UnitTestTree) => expect(tree.files).to.contain('/projects/sandbox/src/app/foo.component.cy.ts'))
+    const tree = await schematicRunner.runSchematic('spec', { name: 'foo', project: 'sandbox', component: true }, appTree)
+
+    expect(tree.files).to.contain('/projects/sandbox/src/app/foo.component.cy.ts')
   })
 })
diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -3,10 +3,6 @@
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
 const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
-  'angular-13',
-  'angular-14',
-  'angular-15',
-  'angular-16',
   'angular-17',
   'angular-18',
 ]
@@ -26,22 +22,20 @@ for (const project of WEBPACK_ANGULAR) {
     })
 
     describe('configuration handling', () => {
-      if (!['angular-13', 'angular-14'].includes(project)) {
-        it('should initialize with unsupported browserslist entries', () => {
-          // Create .browerslistrc that requests support for ES5
-          // Support was dropped in Angular CLI v15 so this should generate a warning message in that version and beyond
-          cy.withCtx(async (ctx) => {
-            await ctx.actions.file.writeFileInProject(
-              ctx.path.resolve('.browserslistrc'),
-              'IE 11',
-            )
-          })
-
-          cy.startAppServer('component')
-          cy.visitApp()
-          cy.specsPageIsVisible()
+      it('should initialize with unsupported browserslist entries', () => {
+        // Create .browerslistrc that requests support for ES5
+        // Support was dropped in Angular CLI v15 so this should generate a warning message in that version and beyond
+        cy.withCtx(async (ctx) => {
+          await ctx.actions.file.writeFileInProject(
+            ctx.path.resolve('.browserslistrc'),
+            'IE 11',
+          )
         })
-      }
+
+        cy.startAppServer('component')
+        cy.visitApp()
+        cy.specsPageIsVisible()
+      })
     })
 
     describe('test behaviors', () => {