fix: angular 14.2 mount compilation error (#23593)

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"