feat: support angular 19 and update tests [run ci]

cypress-io · Nov 25, 2024 · e8781d0 · e8781d0
1 parent f4aec3e
commit e8781d0
Show file tree

Hide file tree

Showing 43 changed files with 11,852 additions and 4,630 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -41,6 +41,7 @@ in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addr
 
 - Cypress Component Testing now supports `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).
 - Cypress Component Testing now supports `Next.js` version 15. Addresses [#30445](https://github.com/cypress-io/cypress/issues/30445).
+- Cypress Component Testing now supports `Angular` version 19. Addresses [#30175](https://github.com/cypress-io/cypress/issues/30175).
 
 **Bugfixes:**
 

diff --git a/npm/angular/src/mount.ts b/npm/angular/src/mount.ts
@@ -219,7 +219,9 @@ function initTestBed<T> (
   return componentFixture
 }
 
-@Component({ selector: 'cy-wrapper-component', template: '' })
+// if using the Wrapper Component (template strings), the component itself cannot be
+// a standalone component
+@Component({ selector: 'cy-wrapper-component', template: '', standalone: false })
 class WrapperComponent { }
 
 /**
@@ -260,6 +262,11 @@ function setupFixture<T> (
 
   fixture.whenStable().then(() => {
     fixture.autoDetectChanges(config.autoDetectChanges ?? true)
+  }).catch((e) => {
+    // If this promise does not settle in Angular 19 it is rejected
+    // https://github.com/angular/angular/blob/main/CHANGELOG.md#1900-2024-11-19
+    // eslint-disable-next-line no-console
+    console.error(e)
   })
 
   return fixture

diff --git a/npm/cypress-schematic/src/ct.spec.ts b/npm/cypress-schematic/src/ct.spec.ts
@@ -36,7 +36,7 @@ const copyAngularMount = async (projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-18', 'angular-19']
 
 describe('ng add @cypress/schematic / e2e and ct', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {

diff --git a/npm/cypress-schematic/src/e2e.spec.ts b/npm/cypress-schematic/src/e2e.spec.ts
@@ -25,7 +25,7 @@ const runCommandInProject = (command: string, projectPath: string) => {
 
 const cypressSchematicPackagePath = path.join(__dirname, '..')
 
-const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-17', 'angular-18']
+const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-18', 'angular-19']
 
 describe('ng add @cypress/schematic / only e2e', { timeout: 1000 * 60 * 5 }, function () {
   for (const project of ANGULAR_PROJECTS) {

diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -5,6 +5,7 @@ import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
   'angular-17',
   'angular-18',
+  'angular-19',
 ]
 
 // Add to this list to focus on a particular permutation

diff --git a/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts b/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts
@@ -46,8 +46,8 @@ describe('angularHandler', function () {
     expectLoadsAngularBuildOptions(buildOptions)
   })
 
-  it('sources the config from angular-18', async () => {
-    const projectRoot = await scaffoldMigrationProject('angular-18')
+  it('sources the config from angular-19', async () => {
+    const projectRoot = await scaffoldMigrationProject('angular-19')
 
     process.chdir(projectRoot)
     const devServerConfig = {

diff --git a/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts b/packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts
@@ -3,7 +3,7 @@ import type { fixtureDirs } from '@tooling/system-tests'
 type ProjectDirs = typeof fixtureDirs
 
 const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
-  { projectName: 'angular-18', test: 'app.component' },
+  { projectName: 'angular-19', test: 'app.component' },
   { projectName: 'react-vite-ts-configured', test: 'App.cy' },
   { projectName: 'react18', test: 'App.cy' },
   { projectName: 'next-14', test: 'index.cy' },

diff --git a/packages/scaffold-config/src/dependencies.ts b/packages/scaffold-config/src/dependencies.ts
@@ -67,7 +67,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
   package: '@angular/cli',
   installer: '@angular/cli',
   description: 'CLI tool that you use to initialize, develop, scaffold, and maintain Angular applications.',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -76,7 +76,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
   package: '@angular-devkit/build-angular',
   installer: '@angular-devkit/build-angular',
   description: 'Angular Webpack build facade',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -85,7 +85,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
   package: '@angular/core',
   installer: '@angular/core',
   description: 'The core of the Angular framework',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
   package: '@angular/common',
   installer: '@angular/common',
   description: 'Commonly needed Angular directives and services',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -103,7 +103,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
   package: '@angular/platform-browser-dynamic',
   installer: '@angular/platform-browser-dynamic',
   description: 'Library for using Angular in a web browser with JIT compilation',
-  minVersion: '^17.2.0 || ^18.0.0',
+  minVersion: '^17.2.0 || ^18.0.0 || ^19.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

diff --git a/...em-tests/project-fixtures/angular/src/app/components/another-child-providers.component.ts b/...em-tests/project-fixtures/angular/src/app/components/another-child-providers.component.ts
@@ -4,6 +4,7 @@ import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-another-child',
+  standalone: false,
   template: `<button (click)="handleClick()">{{ message }}</button>`,
   providers: [ChildProvidersService],
 })

diff --git a/system-tests/project-fixtures/angular/src/app/components/button-output.component.ts b/system-tests/project-fixtures/angular/src/app/components/button-output.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, Output } from '@angular/core'
 
 @Component({
   selector: 'app-button-output',
+  standalone: false,
   template: `<button (click)="clicked.emit(true)">Click Me</button>`,
 })
 export class ButtonOutputComponent {

diff --git a/system-tests/project-fixtures/angular/src/app/components/child-providers.component.ts b/system-tests/project-fixtures/angular/src/app/components/child-providers.component.ts
@@ -4,6 +4,7 @@ import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-child-providers',
+  standalone: false,
   template: `<button (click)="handleClick()">{{ message }}</button>`,
 })
 export class ChildProvidersComponent {

diff --git a/system-tests/project-fixtures/angular/src/app/components/child.component.ts b/system-tests/project-fixtures/angular/src/app/components/child.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'child-component',
+  standalone: false,
   template: '<h1>{{msg}}</h1>',
 })
 export class ChildComponent {

diff --git a/system-tests/project-fixtures/angular/src/app/components/counter.component.ts b/system-tests/project-fixtures/angular/src/app/components/counter.component.ts
@@ -3,6 +3,7 @@ import { CounterService } from './counter.service'
 
 @Component({
   selector: 'counter-component',
+  standalone: false,
   template: `<button (click)="increment()">
     Increment: {{ count$ | async }}
   </button>`,

diff --git a/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts b/system-tests/project-fixtures/angular/src/app/components/lifecycle.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 
 @Component({
   selector: 'app-lifecycle',
+  standalone: false,
   template: `<p>Hi {{ name }}. ngOnInit fired: {{ ngOnInitFired }} and ngOnChanges fired: {{ ngOnChangesFired }} and conditionalName: {{ conditionalName }}</p>`,
 })
 export class LifecycleComponent implements OnInit, OnChanges {

diff --git a/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts b/system-tests/project-fixtures/angular/src/app/components/parent-providers.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
+  standalone: false,
   template: `
     <app-child-providers></app-child-providers>
     <app-another-child></app-another-child>`,

diff --git a/system-tests/project-fixtures/angular/src/app/components/parent.component.ts b/system-tests/project-fixtures/angular/src/app/components/parent.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'parent-component',
+  standalone: false,
   template: '<child-component [msg]="msg"></child-component>',
 })
 export class ParentComponent {

diff --git a/system-tests/project-fixtures/angular/src/app/components/projection.component.ts b/system-tests/project-fixtures/angular/src/app/components/projection.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'app-projection',
+  standalone: false,
   template: `<h3><ng-content></ng-content></h3>`,
 })
 export class ProjectionComponent {}
diff --git a/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts b/system-tests/project-fixtures/angular/src/app/components/with-directives.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'with-directives-component',
+  standalone: false,
   template: ` <button (click)="show = !show">Toggle Message</button>
     <ul *ngIf="show">
       <li *ngFor="let item of items">{{ item }}</li>

diff --git a/system-tests/project-fixtures/angular/src/app/mount.cy.ts b/system-tests/project-fixtures/angular/src/app/mount.cy.ts
@@ -23,10 +23,16 @@ import { Cart, ProductComponent } from './components/cart.component'
 import { UrlImageComponent } from './components/url-image.component'
 
 @Component({
+  standalone: false,
   template: `<app-projection>Hello World</app-projection>`,
 })
 class WrapperComponent {}
 
+// Staring with Angular v19, standalone = true is the new default behavior.
+// This means that the ng module configurations, including test module configurations,
+// do not work by default with components. Cypress for non standalone components
+// injects the CommonModule by default and allows users to add module declarations.
+// unless standalone - false is configured for the component, this no longer works in Angular v19.
 describe('angular mount', () => {
   it('pushes CommonModule into component', () => {
     cy.mount(WithDirectivesComponent)
@@ -44,7 +50,10 @@ describe('angular mount', () => {
   })
 
   it('accepts declarations', () => {
-    cy.mount(ParentComponent, { declarations: [ChildComponent] })
+    cy.mount(ParentComponent, {
+      declarations: [ChildComponent],
+    })
+
     cy.contains('h1', 'Hello World from ParentComponent')
   })
 

diff --git a/system-tests/projects/angular-19/cypress.config.ts b/system-tests/projects/angular-19/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    experimentalSingleTabRunMode: true,
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+      webpackConfig: {
+        resolve: {
+          alias: {
+            '@angular/common/http': require.resolve('@angular/common/http'),
+            '@angular/common/testing': require.resolve('@angular/common/testing'),
+            '@angular/common': require.resolve('@angular/common'),
+            '@angular/core/testing': require.resolve('@angular/core/testing'),
+            '@angular/core/primitives/event-dispatch': require.resolve('@angular/core/primitives/event-dispatch'),
+            '@angular/core/primitives/signals': require.resolve('@angular/core/primitives/signals'),
+            '@angular/core': require.resolve('@angular/core'),
+            '@angular/platform-browser/testing': require.resolve('@angular/platform-browser/testing'),
+            '@angular/platform-browser': require.resolve('@angular/platform-browser'),
+            '@angular/platform-browser-dynamic/testing': require.resolve('@angular/platform-browser-dynamic/testing'),
+            '@angular/platform-browser-dynamic': require.resolve('@angular/platform-browser-dynamic'),
+            'zone.js/*': require.resolve('zone.js'),
+          },
+        },
+      },
+    },
+    specPattern: 'src/**/*.cy.ts',
+  },
+})
diff --git a/system-tests/projects/angular-19/package.json b/system-tests/projects/angular-19/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "angular-19",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "ng build",
+    "ng": "ng",
+    "start": "ng serve",
+    "test": "ng test",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.4.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.6.2"
+  },
+  "projectFixtureDirectory": "angular"
+}