feat: add CT support for angular 18 (#29584)

* feat: add CT support for angular 18 * chore: update system test for angular 17 to use released version [run ci] * chore: add ignore engines for system test install until Electron 29 update is finished * empty commit to run ci * fix changelog * fix changelog
cypress-io · Jun 7, 2024 · cceea03 · cceea03 · cypress-bot · Jun 7, 2024
1 parent d4e09cd
commit cceea03
Show file tree

Hide file tree

Showing 9 changed files with 9,047 additions and 1,488 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -1,4 +1,20 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.12.0
+
+_Released 6/18/2024 (PENDING)_
+
+**Features:**
+
+- Adds Component Testing support for Angular version 18. Addresses [#29309](https://github.com/cypress-io/cypress/issues/29309).
+
+**Bugfixes:**
+
+- Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203).
+
+**Dependency Updates:**
+
+- Updated typescript from `4.7.4` to `5.3.3`. Addressed in [#29568](https://github.com/cypress-io/cypress/pull/29568).
+
 ## 13.11.0
 
 _Released 6/4/2024_
@@ -16,11 +32,7 @@ _Released 6/4/2024_
 
 - Fixed a situation where the Launchpad would hang if the project config had not been loaded when the Launchpad first queries the current project. Fixes [#29486](https://github.com/cypress-io/cypress/issues/29486).
 - Pre-emptively fix behavior with Chrome for when `unload` events are forcefully deprecated by using `pagehide` as a proxy. Fixes [#29241](https://github.com/cypress-io/cypress/issues/29241).
-- Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203).
-
-**Dependency Updates:**
 
-- Updated typescript from `4.7.4` to `5.3.3`. Addressed in [#29568](https://github.com/cypress-io/cypress/pull/29568).
 
 **Misc:**
 

diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -8,6 +8,7 @@ const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
   'angular-15',
   'angular-16',
   'angular-17',
+  'angular-18',
 ]
 
 // Add to this list to focus on a particular permutation

diff --git a/packages/scaffold-config/src/dependencies.ts b/packages/scaffold-config/src/dependencies.ts
@@ -103,7 +103,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: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_DEVKIT_BUILD_ANGULAR = {
@@ -112,7 +112,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: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
@@ -121,7 +121,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_CORE = {
   package: '@angular/core',
   installer: '@angular/core',
   description: 'The core of the Angular framework',
-  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
@@ -130,7 +130,7 @@ export const WIZARD_DEPENDENCY_ANGULAR_COMMON = {
   package: '@angular/common',
   installer: '@angular/common',
   description: 'Commonly needed Angular directives and services',
-  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_PLATFORM_BROWSER_DYNAMIC = {
@@ -139,7 +139,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: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

diff --git a/system-tests/lib/dep-installer/yarn.ts b/system-tests/lib/dep-installer/yarn.ts
@@ -29,6 +29,11 @@ export function getYarnCommand (opts: {
   // @see https://github.com/yarnpkg/yarn/issues/6407
   cmd += ' --update-checksums'
 
+  // FIXME: Currently with Electron 27, we use Node 18.17.1. Angular 18 dependencies need at least Node 18.19.1
+  // which throws an install error on incompatible node version. Once we upgrade to Electron 29, the below line can be removed.
+  // Remove this flag when https://github.com/cypress-io/cypress/issues/29547 is complete.
+  cmd += ' --ignore-engines'
+
   // in CircleCI, this offline cache can be used
   if (opts.isCI) cmd += ` --cache-folder=${homedir()}/.yarn`
   else cmd += ` --cache-folder=${path.join(tempDir, 'cy-system-tests-yarn-cache', String(Date.now()))}`

diff --git a/system-tests/projects/angular-17/package.json b/system-tests/projects/angular-17/package.json
@@ -3,29 +3,29 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "build": "ng build",
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.0-rc.2",
-    "@angular/common": "^17.0.0-rc.2",
-    "@angular/compiler": "^17.0.0-rc.2",
-    "@angular/core": "^17.0.0-rc.2",
-    "@angular/forms": "^17.0.0-rc.2",
-    "@angular/platform-browser": "^17.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^17.0.0-rc.2",
-    "@angular/router": "^17.0.0-rc.2",
+    "@angular/animations": "^17.3.10",
+    "@angular/common": "^17.3.10",
+    "@angular/compiler": "^17.3.10",
+    "@angular/core": "^17.3.10",
+    "@angular/forms": "^17.3.10",
+    "@angular/platform-browser": "^17.3.10",
+    "@angular/platform-browser-dynamic": "^17.3.10",
+    "@angular/router": "^17.3.10",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0-rc.3",
-    "@angular/cli": "^17.0.0-rc.3",
-    "@angular/compiler-cli": "^17.0.0-rc.2",
+    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular/cli": "^17.3.8",
+    "@angular/compiler-cli": "^17.3.8",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",