breaking: cypress-schematic only supports angular 17.2.0 and up [run ci]

npm/cypress-schematic/README.md

@@ -31,7 +31,7 @@
 
 ## Requirements
 
-- Angular 14+
+- Angular 17.2.0+
 
 ## Usage ⏯
 

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": {

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)

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)

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

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')

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')
   })
 })

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')
   })
 })