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
cypress-io · Nov 7, 2023 · 79e2dfe · 79e2dfe
1 parent 1995d04
commit 79e2dfe
Show file tree

Hide file tree

Showing 16 changed files with 3,819 additions and 3,258 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -1,12 +1,20 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 13.5.0
+## 13.6.0
 
-_Released 11/7/2023 (PENDING)_
+_Released 11/21/2023 (PENDING)_
 
 **Features:**
 
 - When artifacts are uploaded to the Cypress cloud, the duration of each upload will now be displayed in the console. Addresses [#28237](https://github.com/cypress-io/cypress/issues/28237).
 
+## 13.5.0
+
+_Released 11/7/2023_
+
+**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).

diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/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'),
+            ),
           )
         })
 

diff --git a/packages/launchpad/cypress/e2e/config-warning.cy.ts b/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)

diff --git a/packages/scaffold-config/src/dependencies.ts b/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 = {

diff --git a/system-tests/project-fixtures/angular/cypress.config.ts b/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'),
           },
         },

diff --git a/...rc/app/components/signals.component.cy.ts → ...rc/app/components/signals.component.cy.ts b/...rc/app/components/signals.component.cy.ts → ...rc/app/components/signals.component.cy.ts
diff --git a/...1/src/app/components/signals.component.ts → ...r/src/app/components/signals.component.ts b/...1/src/app/components/signals.component.ts → ...r/src/app/components/signals.component.ts
diff --git a/system-tests/projects/angular-16.1/package.json b/system-tests/projects/angular-16.1/package.json
diff --git a/system-tests/projects/angular-16/package.json b/system-tests/projects/angular-16/package.json
@@ -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",

diff --git a/system-tests/projects/angular-16/src/app/components/signals.component.cy.ts b/system-tests/projects/angular-16/src/app/components/signals.component.cy.ts
diff --git a/system-tests/projects/angular-16/src/app/components/signals.component.ts b/system-tests/projects/angular-16/src/app/components/signals.component.ts