feat: add support for angular 17 (#28152)

* feat(webpack-dev-server): add support for angular 17

* update changelog

* fix broken spec pattern

* update to rc 2 for cli

* remove = from dependency minVersion lists

* update angular 17 rc version and update dep test

* add projectDirFolder to fixtures for angular-17

* resolve broken system tests

* update ct project dir angular version

Author: jordanpowell88

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 11/7/2023 (PENDING)_
 
+**Features:**
+
+ - Adds Component Testing support for Angular version 17. Addresses [#28153](https://github.com/cypress-io/cypress/issues/28153).
+
 **Bugfixes:**
 
 - Fixed an issue where clicking a link to download a file could cause a page load timeout when the download attribute was missing. Note: download behaviors in experimental Webkit are still an issue. Fixes [#14857](https://github.com/cypress-io/cypress/issues/14857).

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -2,7 +2,13 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_ANGULAR: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15', 'angular-16', 'angular-16.1']
+const WEBPACK_ANGULAR: ProjectFixtureDir[] = [
+  'angular-13',
+  'angular-14',
+  'angular-15',
+  'angular-16',
+  'angular-17',
+]
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []
@@ -46,7 +52,9 @@ for (const project of WEBPACK_ANGULAR) {
         cy.contains('app.component.cy.ts').click()
         cy.waitForSpecToFinish({ passCount: 1 }, 60000)
 
-        cy.get('li.command').first().within(() => {
+        cy.get('li.command')
+        .first()
+        .within(() => {
           cy.get('.command-method').should('contain', 'mount')
           cy.get('.command-message').should('contain', 'AppComponent')
         })
@@ -60,7 +68,11 @@ for (const project of WEBPACK_ANGULAR) {
         cy.withCtx(async (ctx) => {
           await ctx.actions.file.writeFileInProject(
             ctx.path.join('src', 'app', 'app.component.html'),
-            (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello World', 'Hello Cypress'),
+            (
+              await ctx.file.readFileInProject(
+                ctx.path.join('src', 'app', 'app.component.html'),
+              )
+            ).replace('Hello World', 'Hello Cypress'),
           )
         })
 
@@ -69,7 +81,11 @@ for (const project of WEBPACK_ANGULAR) {
         cy.withCtx(async (ctx) => {
           await ctx.actions.file.writeFileInProject(
             ctx.path.join('src', 'app', 'app.component.html'),
-            (await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.html'))).replace('Hello Cypress', 'Hello World'),
+            (
+              await ctx.file.readFileInProject(
+                ctx.path.join('src', 'app', 'app.component.html'),
+              )
+            ).replace('Hello Cypress', 'Hello World'),
           )
         })
 
@@ -84,17 +100,26 @@ for (const project of WEBPACK_ANGULAR) {
 
         // Create compilation error
         cy.withCtx(async (ctx) => {
-          const componentFilePath = ctx.path.join('src', 'app', 'app.component.ts')
+          const componentFilePath = ctx.path.join(
+            'src',
+            'app',
+            'app.component.ts',
+          )
 
           await ctx.actions.file.writeFileInProject(
             componentFilePath,
-            (await ctx.file.readFileInProject(componentFilePath)).replace('class', 'classaaaaa'),
+            (
+              await ctx.file.readFileInProject(componentFilePath)
+            ).replace('class', 'classaaaaa'),
           )
         })
 
         // The test should fail and the stack trace should appear in the command log
         cy.waitForSpecToFinish({ failCount: 1 }, 60000)
-        cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
+        cy.contains(
+          'The following error originated from your test code, not from Cypress.',
+        ).should('exist')
+
         cy.get('.test-err-code-frame').should('be.visible')
       })
 
@@ -105,7 +130,9 @@ for (const project of WEBPACK_ANGULAR) {
         cy.withCtx(async (ctx) => {
           await ctx.actions.file.writeFileInProject(
             ctx.path.join('src', 'app', 'new.component.cy.ts'),
-            await ctx.file.readFileInProject(ctx.path.join('src', 'app', 'app.component.cy.ts')),
+            await ctx.file.readFileInProject(
+              ctx.path.join('src', 'app', 'app.component.cy.ts'),
+            ),
           )
         })
 

packages/launchpad/cypress/e2e/config-warning.cy.ts

@@ -216,9 +216,9 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy-testingtype="component"]').click()
     cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
-    .should('contain.text', 'vite. Expected ^=2.0.0 || ^=3.0.0 || ^=4.0.0, found 2.0.0-beta.70')
-    .should('contain.text', 'react. Expected ^=16.0.0 || ^=17.0.0 || ^=18.0.0, found 15.6.2.')
-    .should('contain.text', 'react-dom. Expected ^=16.0.0 || ^=17.0.0 || ^=18.0.0 but dependency was not found.')
+    .should('contain.text', 'vite. Expected ^2.0.0 || ^3.0.0 || ^4.0.0, found 2.0.0-beta.70')
+    .should('contain.text', 'react. Expected ^16.0.0 || ^17.0.0 || ^18.0.0, found 15.6.2.')
+    .should('contain.text', 'react-dom. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.')
 
     cy.get('.warning-markdown').find('li').should('have.length', 3)
   })
@@ -235,7 +235,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy-testingtype="component"]', { timeout: 12000 }).click()
     cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
-    .should('contain.text', '@vue/cli-service. Expected ^=4.0.0 || ^=5.0.0, found 3.12.1.')
+    .should('contain.text', '@vue/cli-service. Expected ^4.0.0 || ^5.0.0, found 3.12.1.')
     .should('contain.text', 'vue. Expected ^3.0.0, found 2.7.8.')
 
     cy.get('.warning-markdown').find('li').should('have.length', 2)

packages/scaffold-config/src/dependencies.ts

@@ -4,7 +4,7 @@ export const WIZARD_DEPENDENCY_WEBPACK = {
   package: 'webpack',
   installer: 'webpack',
   description: 'Webpack is a module bundler',
-  minVersion: '^=4.0.0 || ^=5.0.0',
+  minVersion: '^4.0.0 || ^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_VUE_2 = {
@@ -31,7 +31,7 @@ export const WIZARD_DEPENDENCY_REACT = {
   package: 'react',
   installer: 'react',
   description: 'A JavaScript library for building user interfaces',
-  minVersion: '^=16.0.0 || ^=17.0.0 || ^=18.0.0',
+  minVersion: '^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_REACT_DOM = {
@@ -40,7 +40,7 @@ export const WIZARD_DEPENDENCY_REACT_DOM = {
   package: 'react-dom',
   installer: 'react-dom',
   description: 'This package serves as the entry point to the DOM and server renderers for React',
-  minVersion: '^=16.0.0 || ^=17.0.0 || ^=18.0.0',
+  minVersion: '^16.0.0 || ^17.0.0 || ^18.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_TYPESCRIPT = {
@@ -49,7 +49,7 @@ export const WIZARD_DEPENDENCY_TYPESCRIPT = {
   package: 'typescript',
   installer: 'typescript',
   description: 'TypeScript is a language for application-scale JavaScript',
-  minVersion: '^=3.4.0 || ^=4.0.0 || ^=5.0.0',
+  minVersion: '^3.4.0 || ^4.0.0 || ^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_REACT_SCRIPTS = {
@@ -58,7 +58,7 @@ export const WIZARD_DEPENDENCY_REACT_SCRIPTS = {
   package: 'react-scripts',
   installer: 'react-scripts',
   description: 'Create React apps with no build configuration',
-  minVersion: '^=4.0.0 || ^=5.0.0',
+  minVersion: '^4.0.0 || ^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_VUE_CLI_SERVICE = {
@@ -67,7 +67,7 @@ export const WIZARD_DEPENDENCY_VUE_CLI_SERVICE = {
   package: '@vue/cli-service',
   installer: '@vue/cli-service',
   description: 'Standard Tooling for Vue.js Development',
-  minVersion: '^=4.0.0 || ^=5.0.0',
+  minVersion: '^4.0.0 || ^5.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_VITE = {
@@ -76,7 +76,7 @@ export const WIZARD_DEPENDENCY_VITE = {
   package: 'vite',
   installer: 'vite',
   description: 'Vite is dev server that serves your source files over native ES modules',
-  minVersion: '^=2.0.0 || ^=3.0.0 || ^=4.0.0',
+  minVersion: '^2.0.0 || ^3.0.0 || ^4.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_NUXT = {
@@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_NEXT = {
   package: 'next',
   installer: 'next',
   description: 'The React Framework for Production',
-  minVersion: '^=10.0.0 || ^=11.0.0 || ^=12.0.0 || ^=13.0.0',
+  minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CLI = {
@@ -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',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.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',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.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',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.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',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.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',
+  minVersion: '^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {

system-tests/project-fixtures/angular/cypress.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
             '@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/testing': require.resolve('zone.js/dist/zone-testing'),
+            'zone.js/testing': require.resolve('zone.js/testing'),
             'zone.js': require.resolve('zone.js'),
           },
         },

system-tests/projects/angular-16.1/src/app/components/signals.component.cy.ts renamed to system-tests/project-fixtures/angular/src/app/components/signals.component.cy.ts

@@ -1,5 +1,5 @@
 {
-  "name": "angular-16",
+  "name": "angular-16.1",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -10,22 +10,22 @@
     "test": "ng test"
   },
   "dependencies": {
-    "@angular/animations": "^16.0.0-next.5",
-    "@angular/common": "^16.0.0-next.5",
-    "@angular/compiler": "^16.0.0-next.5",
-    "@angular/core": "^16.0.0-next.5",
-    "@angular/forms": "^16.0.0-next.5",
-    "@angular/platform-browser": "^16.0.0-next.5",
-    "@angular/platform-browser-dynamic": "^16.0.0-next.5",
-    "@angular/router": "^16.0.0-next.5",
+    "@angular/animations": "^16.1.0",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0-next.6",
-    "@angular/cli": "~16.0.0-next.6",
-    "@angular/compiler-cli": "^16.0.0-next.5",
+    "@angular-devkit/build-angular": "^16.1.0",
+    "@angular/cli": "~16.1.0",
+    "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",