WIP: support angular 21 inside cypress schematic

AtofStryker · AtofStryker · commit b3e5b6a19481 · 2025-11-26T15:33:28.000-05:00
diff --git a/npm/cypress-schematic/package.json b/npm/cypress-schematic/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "jsonc-parser": "^3.3.1",
-    "rxjs": "~7.8.2"
+    "rxjs": "~7.8.2",
+    "semver": "^7.7.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.2001.6",
diff --git a/npm/cypress-schematic/src/ct.spec.ts b/npm/cypress-schematic/src/ct.spec.ts
@@ -15,11 +15,18 @@ const runCommandInProject = (command: string, projectPath: string) => {
 // @cypress/angular won't exist in the tmp project. To fix this, we replace the
 // contents of the <project-path>/node_modules/cypress/angular with the latest
 // contents of cli/angular
-const copyAngularMount = async (projectPath: string) => {
-  await fs.copy(
-    path.join(__dirname, '..', '..', '..', 'cli', 'angular'),
-    path.join(projectPath, 'node_modules', 'cypress', 'angular'),
-  )
+const copyAngularMount = async (projectPath: string, copyZonelessMount: boolean = false) => {
+  if (copyZonelessMount) {
+    await fs.copy(
+      path.join(__dirname, '..', '..', '..', 'cli', 'angular-zoneless'),
+      path.join(projectPath, 'node_modules', 'cypress', 'angular-zoneless'),
+    )
+  } else {
+    await fs.copy(
+      path.join(__dirname, '..', '..', '..', 'cli', 'angular'),
+      path.join(projectPath, 'node_modules', 'cypress', 'angular'),
+    )
+  }
 }
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
@@ -54,8 +61,16 @@ describe('ng add @cypress/schematic / e2e and ct', function () {
 
       it('should generate component alongside component spec', async () => {
         await runCommandInProject('yarn ng add @cypress/schematic --e2e --component', projectPath)
-        await copyAngularMount(projectPath)
-        await runCommandInProject('yarn ng generate c foo', projectPath)
+        // make sure to copy the zoneless mount function for angular 21+
+        await copyAngularMount(projectPath, true)
+        if (project === 'angular-21') {
+          // our angular 21 project is a pure standalone project, so we need to pass in the --standalone flag to ignore module generation.
+          // this may be no longer true if we update the schematic dependencies
+          await runCommandInProject('yarn ng generate c foo --standalone', projectPath)
+        } else {
+          await runCommandInProject('yarn ng generate c foo ', projectPath)
+        }
+
         await runCommandInProject('yarn ng run angular:ct --watch false --spec src/app/foo/foo.component.cy.ts', projectPath)
       }, timeout)
     })
diff --git a/npm/cypress-schematic/src/schematics/ng-add/files-ct-zoneless/component-index.html.template b/npm/cypress-schematic/src/schematics/ng-add/files-ct-zoneless/component-index.html.template
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/npm/cypress-schematic/src/schematics/ng-add/files-ct-zoneless/component.ts.template b/npm/cypress-schematic/src/schematics/ng-add/files-ct-zoneless/component.ts.template
@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/angular-zoneless'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)
diff --git a/npm/cypress-schematic/src/schematics/ng-add/index.ts b/npm/cypress-schematic/src/schematics/ng-add/index.ts
@@ -14,11 +14,12 @@ import {
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks'
 import { of } from 'rxjs'
 import { concatMap, map } from 'rxjs/operators'
+import { gte as isSemverGte } from 'semver'
 
 import { addPackageJsonDependency, NodeDependencyType } from '../utils/dependencies'
 import {
   getAngularJsonValue,
-  getAngularVersion,
+  getAngularSemverVersion,
   getLatestNodeVersion,
   NodePackage,
   getDirectoriesAndCreateSpecs,
@@ -36,7 +37,7 @@ type HandleFilesType = {
 
 export default function (_options: any): Rule {
   return (tree: Tree, _context: SchematicContext) => {
-    _options = { ..._options, __version__: getAngularVersion(tree) }
+    _options = { ..._options, __version__: getAngularSemverVersion(tree) }
 
     return chain([
       updateDependencies(),
@@ -141,10 +142,13 @@ function addCypressComponentTestingFiles (options: any): Rule {
       const angularJsonValue = getAngularJsonValue(tree)
       const { projects } = angularJsonValue
 
+      // if using Angular 21 or greater, we need to use the cypress/angular-zoneless mount function
+      const applyPath = isSemverGte('21.0.0', options.__version__) ? './files-ct-zoneless' : './files-ct'
+
       return handleFiles(tree, context, {
         projects,
         options,
-        applyPath: './files-ct',
+        applyPath,
         movePath: '/cypress/support',
         relativeToWorkspacePath: `/cypress`,
       })
diff --git a/npm/cypress-schematic/src/schematics/utils/index.ts b/npm/cypress-schematic/src/schematics/utils/index.ts
@@ -4,6 +4,8 @@ import { getSystemPath, normalize, strings } from '@angular-devkit/core'
 import { Tree, apply, url, applyTemplates, move, Rule } from '@angular-devkit/schematics'
 import { get } from 'https'
 import { Schema } from '../ng-generate/cypress-test/schema'
+import { minVersion as semverMinVersion } from 'semver'
+import type { SemVer } from 'semver'
 
 import { getPackageJsonDependency } from './dependencies'
 import { JSONFile } from './jsonFile'
@@ -13,12 +15,21 @@ export interface NodePackage {
   version: string
 }
 
-export function getAngularVersion (tree: Tree): number {
+export function getAngularSemverVersion (tree: Tree): SemVer | null {
   const packageNode = getPackageJsonDependency(tree, '@angular/core')
 
-  const version = packageNode && packageNode.version.split('').find((char) => !!parseInt(char, 10))
+  try {
+    if (packageNode !== null) {
+      const version: SemVer | null = packageNode && packageNode.version ?
+        semverMinVersion(packageNode.version) : null
 
-  return version ? +version : 0
+      return version
+    }
+
+    return null
+  } catch (e) {
+    return null
+  }
 }
 
 /**
diff --git a/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts b/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts
@@ -84,7 +84,7 @@ describe('angularHandler', { timeout: 60000 }, function () {
         browser: 'src/main.ts',
         tsConfig: 'tsconfig.app.json',
         assets: ['src/favicon.ico', 'src/assets'],
-        styles: ['src/styles.scss'],
+        styles: ['src/styles.css'],
         optimization: false,
         extractLicenses: false,
         sourceMap: true,
diff --git a/system-tests/projects/angular-21/angular.json b/system-tests/projects/angular-21/angular.json
@@ -15,7 +15,6 @@
           "options": {
             "tsConfig": "tsconfig.app.json",
             "browser": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets"
diff --git a/system-tests/projects/angular-21/package.json b/system-tests/projects/angular-21/package.json
@@ -28,6 +28,5 @@
     "jsdom": "^27.1.0",
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
-  },
-  "projectFixtureDirectory": "angular"
+  }
 }
diff --git a/system-tests/projects/angular-21/tsconfig.app.json b/system-tests/projects/angular-21/tsconfig.app.json
@@ -6,5 +6,9 @@
   },
   "include": [
     "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/app/**/*.cy.ts",
+    "src/app/components/**/*.ts"
   ]
 }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,5 @@`
`28`	`28`	`"jsdom": "^27.1.0",`
`29`	`29`	`"typescript": "~5.9.2",`
`30`	`30`	`"vitest": "^4.0.8"`
`31`		`- },`
`32`		`- "projectFixtureDirectory": "angular"`
	`31`	`+ }`
`33`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,9 @@`
`6`	`6`	`},`
`7`	`7`	`"include": [`
`8`	`8`	`"src/*/.ts"`
	`9`	`+ ],`
	`10`	`+ "exclude": [`
	`11`	`+ "src/app/*/.cy.ts",`
	`12`	`+ "src/app/components/*/.ts"`
`9`	`13`	`]`
`10`	`14`	`}`