feat: implement angular-signals test hardness to support angular signals

add changelog entry and build binary [run ci]

rename angular18 to angular-signals until we are able to merge back into core package [run ci]

fix linting job [run ci]

make sure angular-signals harness is copied to cli after build [run ci]

add project fixture directory to angular 18 and build binaries for newly named branch

run ci

update cache [run ci]

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-05-23-24
+06-06-24

.circleci/workflows.yml

@@ -32,6 +32,7 @@ mainBuildFilters: &mainBuildFilters
         - 'update-v8-snapshot-cache-on-develop'
         - 'ignore-chrom-prefs'
         - 'publish-binary'
+        - 'angular-signals-ct-harness'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -42,7 +43,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'ignore-chrom-prefs', << pipeline.git.branch >> ]
+    - equal: [ 'angular-signals-ct-harness', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -53,7 +54,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'ignore-chrom-prefs', << pipeline.git.branch >> ]
+    - equal: [ 'angular-signals-ct-harness', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -76,7 +77,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'feat/support_next_14', << pipeline.git.branch >> ]
+    - equal: [ 'angular-signals-ct-harness', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -152,7 +153,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "ignore-chrom-prefs" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "angular-signals-ct-harness" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
@@ -2053,6 +2054,15 @@ jobs:
           command: yarn lerna run build --scope @cypress/angular
       - store-npm-logs
 
+  npm-angular-signals:
+    <<: *defaults
+    steps:
+      - restore_cached_workspace
+      - run:
+          name: Build
+          command: yarn lerna run build --scope @cypress/angular-signals
+      - store-npm-logs
+
   npm-puppeteer-unit-tests:
     <<: *defaults
     steps:
@@ -2794,6 +2804,9 @@ linux-x64-workflow: &linux-x64-workflow
     - npm-angular:
         requires:
           - build
+    - npm-angular-signals:
+        requires:
+          - build
     - npm-mount-utils:
         requires:
           - build
@@ -2812,6 +2825,7 @@ linux-x64-workflow: &linux-x64-workflow
         requires:
           - check-ts
           - npm-angular
+          - npm-angular-signals
           - npm-eslint-plugin-dev
           - npm-puppeteer-unit-tests
           - npm-puppeteer-cypress-tests
@@ -3141,6 +3155,9 @@ linux-x64-contributor-workflow: &linux-x64-contributor-workflow
     - npm-angular:
         requires:
           - build
+    - npm-angular-signals:
+        requires:
+          - build
     - npm-mount-utils:
         requires:
           - build
@@ -3158,6 +3175,7 @@ linux-x64-contributor-workflow: &linux-x64-contributor-workflow
         requires:
           - check-ts
           - npm-angular
+          - npm-angular-signals
           - npm-eslint-plugin-dev
           - npm-puppeteer-unit-tests
           - npm-puppeteer-cypress-tests

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - [Cypress App](https://on.cypress.io/changelog)
 - [`@cypress/angular`](https://github.com/cypress-io/cypress/blob/develop/npm/angular/CHANGELOG.md)
+- [`@cypress/angular-signals`](https://github.com/cypress-io/cypress/blob/develop/npm/angular-signals/CHANGELOG.md)
 - [`@cypress/eslint-plugin-dev`](https://github.com/cypress-io/cypress/blob/develop/npm/eslint-plugin-dev/CHANGELOG.md)
 - [`@cypress/mount-utils`](https://github.com/cypress-io/cypress/blob/develop/npm/mount-utils/CHANGELOG.md)
 - [`@cypress/react`](https://github.com/cypress-io/cypress/blob/develop/npm/react/CHANGELOG.md)

CONTRIBUTING.md

@@ -183,6 +183,7 @@ Here is a list of the npm packages in this repository:
  | Folder Name                                            | Package Name                       | Purpose                                                                      |
  | :----------------------------------------------------- | :--------------------------------- | :--------------------------------------------------------------------------- |
  | [angular](./npm/angular)                               | `@cypress/angular`                   | Cypress component testing for Angular.     |
+  | [angular signals](./npm/angular-signals)                               | `@cypress/angular-signals`                   | Cypress component testing for Angular 17/18 including support for signals.     |
  | [eslint-plugin-dev](./npm/eslint-plugin-dev)           | `@cypress/eslint-plugin-dev`       | Eslint plugin for internal development.          |
  | [grep](./npm/grep)                                       | `@cypress/grep`                     | Filter tests using substring                        |
  | [mount-utils](./npm/mount-utils)                       | `@cypress/mount-utils`             | Common functionality for Vue/React/Angular adapters. |

cli/.eslintignore

@@ -10,6 +10,7 @@ package.json
 
 # these are all copied from dist'd builds from the individual libs
 /angular
+/angular-signals
 /react
 /react18
 /vue

cli/.gitignore

@@ -21,3 +21,4 @@ react*
 mount-utils
 angular
 svelte
+angular-signals

cli/CHANGELOG.md

@@ -6,6 +6,7 @@ _Released 6/18/2024 (PENDING)_
 **Features:**
 
 - Adds Component Testing support for Angular version 18. Addresses [#29309](https://github.com/cypress-io/cypress/issues/29309).
+- Adds Signal support for Angular Component Testing versions 17.2 and up. Addresses [#29264](https://github.com/cypress-io/cypress/issues/29264).
 
 **Bugfixes:**
 

cli/package.json

@@ -67,6 +67,7 @@
     "@babel/cli": "7.13.0",
     "@babel/preset-env": "7.13.5",
     "@cypress/angular": "0.0.0-development",
+    "@cypress/angular-signals": "0.0.0-development",
     "@cypress/grep": "0.0.0-development",
     "@cypress/mount-utils": "0.0.0-development",
     "@cypress/react": "0.0.0-development",
@@ -117,7 +118,8 @@
     "vue2",
     "react18",
     "angular",
-    "svelte"
+    "svelte",
+    "angular-signals"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -169,6 +171,11 @@
       "types": "./svelte/dist/index.d.ts",
       "import": "./svelte/dist/cypress-svelte.esm-bundler.js",
       "require": "./svelte/dist/cypress-svelte.cjs.js"
+    },
+    "./angular-signals": {
+      "types": "./angular-signals/dist/index.d.ts",
+      "import": "./angular-signals/dist/index.js",
+      "require": "./angular-signals/dist/index.js"
     }
   },
   "workspaces": {

cli/scripts/post-build.js

@@ -13,6 +13,7 @@ const npmModulesToCopy = [
   'vue',
   'vue2',
   'angular',
+  'angular-signals',
   'svelte',
 ]
 

npm/angular18/README.md → npm/angular-signals/README.md

@@ -1,8 +1,9 @@
-# @cypress/angular
+# @cypress/angular-signals
 
-Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner. This package is an extension of `@cypress/angular`, but with [signals](https://angular.dev/guide/signals) support.
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular-signals` should only be done for advanced use-cases.
 
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be done for advanced use-cases.
 ## Development
 
 Run `yarn build` to compile and sync packages to the `cypress` cli package.

npm/angular18/package.json → npm/angular-signals/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@cypress/angular",
+  "name": "@cypress/angular-signals",
   "version": "0.0.0-development",
   "description": "Test Angular Components using Cypress",
   "main": "dist/index.js",
@@ -8,22 +8,23 @@
     "build": "rollup -c rollup.config.mjs",
     "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "check-ts": "tsc --noEmit",
+    "dev": "rollup -c rollup.config.mjs -w",
     "lint": "eslint --ext .js,.ts,.json, ."
   },
   "dependencies": {},
   "devDependencies": {
-    "@angular/common": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0",
+    "@angular/platform-browser-dynamic": "^17.2.0",
     "@cypress/mount-utils": "0.0.0-development",
-    "typescript": "^4.7.4",
-    "zone.js": "~0.11.4"
+    "typescript": "~5.4.5",
+    "zone.js": "~0.14.6"
   },
   "peerDependencies": {
-    "@angular/common": ">=13",
-    "@angular/core": ">=13",
-    "@angular/platform-browser-dynamic": ">=13",
-    "zone.js": ">=0.11.0"
+    "@angular/common": ">=17.2",
+    "@angular/core": ">=17.2",
+    "@angular/platform-browser-dynamic": ">=17.2",
+    "zone.js": ">=0.13.0"
   },
   "files": [
     "dist"
@@ -34,7 +35,7 @@
     "type": "git",
     "url": "https://github.com/cypress-io/cypress.git"
   },
-  "homepage": "https://github.com/cypress-io/cypress/blob/develop/npm/angular/#readme",
+  "homepage": "https://github.com/cypress-io/cypress/blob/develop/npm/angular-signals/#readme",
   "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Fangular&template=1-bug-report.md&title=",
   "keywords": [
     "angular",
@@ -45,12 +46,8 @@
   ],
   "contributors": [
     {
-      "name": "Jordan Powell",
-      "social": "@jordanpowell88"
-    },
-    {
-      "name": "Zach Williams",
-      "social": "@ZachJW34"
+      "name": "Bill Glesias",
+      "social": "@atofstryker"
     }
   ],
   "module": "dist/index.js",