feat: support Angular 16.1 (#27106)

* feat: support Angular 16.1

* feat: support Angular 16.1

* chore: update changelog

* chore: update naming

---------

Co-authored-by: Leosvel Pérez Espinosa <[email protected]>
Co-authored-by: jordanpowell88 <[email protected]>

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 12.15.1
+
+_Released 07/05/2023 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed an issue where some internal file locations consumed by the Cypress Angular Handler moved as a result of [this commit](https://github.com/angular/angular-cli/commit/466d86dc8d3398695055f9eced7402804848a381) from Angular. Addressed in [#27030](https://github.com/cypress-io/cypress/pull/27030).
+
 ## 12.15.0
 
 _Released 06/20/2023_

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

@@ -2,7 +2,7 @@
 /// <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']
+const WEBPACK_ANGULAR: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15', 'angular-16', 'angular-16.1']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

npm/webpack-dev-server/package.json

@@ -23,6 +23,7 @@
     "html-webpack-plugin-4": "npm:html-webpack-plugin@^4",
     "html-webpack-plugin-5": "npm:html-webpack-plugin@^5",
     "local-pkg": "0.4.1",
+    "semver": "^7.3.2",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
     "webpack-dev-server": "^4.7.4",

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -1,6 +1,7 @@
 import * as fs from 'fs-extra'
 import { tmpdir } from 'os'
 import * as path from 'path'
+import { gte } from 'semver'
 import type { Configuration, RuleSetRule } from 'webpack'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
@@ -165,10 +166,22 @@ export async function getTempDir (): Promise<string> {
 }
 
 export async function getAngularCliModules (projectRoot: string) {
+  let angularVersion: string
+
+  try {
+    angularVersion = await getInstalledPackageVersion('@angular-devkit/core', projectRoot)
+  } catch {
+    throw new Error(`Could not resolve "@angular-devkit/core". Do you have it installed?`)
+  }
+
   const angularCLiModules = [
     '@angular-devkit/build-angular/src/utils/webpack-browser-config.js',
-    '@angular-devkit/build-angular/src/webpack/configs/common.js',
-    '@angular-devkit/build-angular/src/webpack/configs/styles.js',
+    // in Angular 16.1 the locations of these files below were changed
+    ...(
+      gte(angularVersion, '16.1.0')
+        ? ['@angular-devkit/build-angular/src/tools/webpack/configs/common.js', '@angular-devkit/build-angular/src/tools/webpack/configs/styles.js']
+        : ['@angular-devkit/build-angular/src/webpack/configs/common.js', '@angular-devkit/build-angular/src/webpack/configs/styles.js']
+    ),
     '@angular-devkit/core/src/index.js',
   ] as const
 
@@ -195,6 +208,15 @@ export async function getAngularCliModules (projectRoot: string) {
   }
 }
 
+async function getInstalledPackageVersion (pkgName: string, projectRoot: string): Promise<string> {
+  const packageJsonPath = require.resolve(`${pkgName}/package.json`, { paths: [projectRoot] })
+  const { version } = JSON.parse(
+    await fs.readFile(packageJsonPath, { encoding: 'utf-8' }),
+  )
+
+  return version
+}
+
 export async function getAngularJson (projectRoot: string): Promise<AngularJson> {
   const { findUp } = await dynamicImport<typeof import('find-up')>('find-up')
 

system-tests/projects/angular-16.1/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "angular-16.1",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@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.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",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.9.4"
+  },
+  "projectFixtureDirectory": "angular"
+}

system-tests/projects/angular-16.1/src/app/components/signals.component.cy.ts

@@ -0,0 +1,14 @@
+import { SignalsComponent } from './signals.component'
+
+describe('SignalsComponent', () => {
+  it('can mount a signals component', () => {
+    cy.mount(SignalsComponent)
+  })
+
+  it('can increment the count using a signal', () => {
+    cy.mount(SignalsComponent)
+    cy.get('span').contains(0)
+    cy.get('button').click()
+    cy.get('span').contains(1)
+  })
+})

system-tests/projects/angular-16.1/src/app/components/signals.component.ts

@@ -0,0 +1,14 @@
+import { Component, signal } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'app-signals',
+  template: `<span>{{ count() }}</span> <button (click)="increment()">+</button>`,
+})
+export class SignalsComponent {
+  count = signal(0)
+
+  increment (): void {
+    this.count.update((_count: number) => _count + 1)
+  }
+}