fix: angular 14.2 mount compilation error (#23593)

Author: ZachJW34

npm/angular/package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@angular/common": "^14.0.6",
-    "@angular/core": "^14.0.6",
-    "@angular/platform-browser-dynamic": "^14.0.6",
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
     "@cypress/mount-utils": "0.0.0-development",
     "typescript": "^4.7.4",
     "zone.js": "~0.11.4"

npm/angular/src/mount.ts

@@ -12,8 +12,8 @@ import { Component, EventEmitter, Type } from '@angular/core'
 import {
   ComponentFixture,
   getTestBed,
-  TestBed,
   TestModuleMetadata,
+  TestBed,
 } from '@angular/core/testing'
 import {
   BrowserDynamicTestingModule,
@@ -144,12 +144,12 @@ function initTestBed<T> (
 
   const componentFixture = createComponentFixture(component) as Type<T>
 
-  TestBed.configureTestingModule({
+  getTestBed().configureTestingModule({
     ...bootstrapModule(componentFixture, configRest),
   })
 
   if (providers != null) {
-    TestBed.overrideComponent(componentFixture, {
+    getTestBed().overrideComponent(componentFixture, {
       add: {
         providers,
       },
@@ -172,6 +172,8 @@ function createComponentFixture<T> (
   component: Type<T> | string,
 ): Type<T | WrapperComponent> {
   if (typeof component === 'string') {
+    // getTestBed().overrideTemplate is available in v14+
+    // The static TestBed.overrideTemplate is available across versions
     TestBed.overrideTemplate(WrapperComponent, component)
 
     return WrapperComponent
@@ -192,7 +194,7 @@ function setupFixture<T> (
   component: Type<T>,
   config: MountConfig<T>,
 ): ComponentFixture<T> {
-  const fixture = TestBed.createComponent(component)
+  const fixture = getTestBed().createComponent(component)
 
   fixture.whenStable().then(() => {
     fixture.autoDetectChanges(config.autoDetectChanges ?? true)
@@ -309,6 +311,6 @@ getTestBed().initTestEnvironment(
 
 setupHooks(() => {
   // Not public, we need to call this to remove the last component from the DOM
-  TestBed['tearDownTestingModule']()
-  TestBed.resetTestingModule()
+  getTestBed()['tearDownTestingModule']()
+  getTestBed().resetTestingModule()
 })

npm/cypress-schematic/package.json

@@ -9,16 +9,16 @@
     "test": "mocha -r @packages/ts/register --reporter mocha-multi-reporters --reporter-options configFile=../../mocha-reporter-config.json src/**/*.spec.ts"
   },
   "dependencies": {
-    "@angular-devkit/architect": "^0.1401.0",
-    "@angular-devkit/core": "^14.1.0",
-    "@angular-devkit/schematics": "^14.1.0",
-    "@schematics/angular": "^14.1.0",
+    "@angular-devkit/architect": "^0.1402.1",
+    "@angular-devkit/core": "^14.2.1",
+    "@angular-devkit/schematics": "^14.2.1",
+    "@schematics/angular": "^14.2.1",
     "jsonc-parser": "^3.0.0",
     "rxjs": "~6.6.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics-cli": "^14.1.0",
-    "@angular/cli": "^14.1.0",
+    "@angular-devkit/schematics-cli": "^14.2.1",
+    "@angular/cli": "^14.2.1",
     "@types/chai-enzyme": "0.6.7",
     "@types/mocha": "8.0.3",
     "@types/node": "^18.0.6",

npm/cypress-schematic/src/ct.spec.ts

@@ -22,6 +22,17 @@ const runCommandInProject = (command: string, projectPath: string) => {
   return execa(ex, args, { cwd: projectPath, stdio: 'inherit' })
 }
 
+// Since the schematic downloads a new version of cypress, the latest changes of
+// @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 cypressSchematicPackagePath = path.join(__dirname, '..')
 
 const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-13', 'angular-14']
@@ -35,6 +46,7 @@ describe('ng add @cypress/schematic / e2e and ct', function () {
 
       await runCommandInProject(`yarn add @cypress/schematic@file:${cypressSchematicPackagePath}`, projectPath)
       await runCommandInProject('yarn ng add @cypress/schematic --e2e --component', projectPath)
+      await copyAngularMount(projectPath)
       await runCommandInProject('yarn ng run angular:ct --watch false --spec src/app/app.component.cy.ts', projectPath)
     })
   }

system-tests/projects/angular-14/package.json

@@ -9,22 +9,22 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "^14.0.0",
-    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
-    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/router": "^14.0.0",
+    "@angular/animations": "^14.2.0",
+    "@angular/common": "^14.2.0",
+    "@angular/compiler": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/forms": "^14.2.0",
+    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/router": "^14.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
-    "@angular/cli": "~14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
+    "@angular-devkit/build-angular": "^14.2.0",
+    "@angular/cli": "~14.2.0",
+    "@angular/compiler-cli": "^14.2.0",
     "typescript": "~4.7.2"
   },
   "projectFixtureDirectory": "angular"