feat: add Angular Signals CT Harness for Angular 17.2 and up for user…

…s to be able to use Angular Signals within their component tests (#29621)

* direct copy paste of angular npm package to angular18 (no changes)

* 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]

bust nx cache [run ci]

bust cache on linux [run ci]

try busting the cache... again [run ci]

usually helps when you have the correct build output... [run ci]

fix issue where component internal props were getting blown away when user would not set prop in componentProperties [run ci]

* update test harness description

* add built-in control flow tests with signals

* make sure to clean up rxjs observables in order to prevent a memory leak

* address comments from code review

* yarn lock

---------

Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-06-04-24
+06-07-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

@@ -1,12 +1,16 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 13.12.1
+## 13.13.0
 
 _Released 7/02/2024 (PENDING)_
 
 **Performance:**
 
 - Improved performance of `experimentalSourceRewriting` option. Fixed in [#29540](https://github.com/cypress-io/cypress/pull/29540).
 
+**Features:**
+
+- Adds Signal support for Angular Component Testing versions 17.2 and up. Addresses [#29264](https://github.com/cypress-io/cypress/issues/29264).
+
 **Bugfixes:**
 
 - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663).

cli/package.json

@@ -67,6 +67,7 @@
     "@babel/cli": "7.24.5",
     "@babel/preset-env": "7.24.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/angular-signals/.eslintignore

@@ -0,0 +1,5 @@
+**/dist
+**/*.d.ts
+**/package-lock.json
+**/tsconfig.json
+**/cypress/fixtures

npm/angular-signals/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "cypress"
+  ],
+  "extends": [
+    "plugin:@cypress/dev/tests"
+  ]
+}

npm/angular-signals/.npmignore

@@ -0,0 +1,3 @@
+examples
+src
+cypress

npm/angular-signals/.releaserc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('../../.releaserc'),
+}

npm/angular-signals/README.md

@@ -0,0 +1,11 @@
+# @cypress/angular-signals
+
+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.
+
+## Development
+
+Run `yarn build` to compile and sync packages to the `cypress` cli package.
+
+## [Changelog](./CHANGELOG.md)

npm/angular-signals/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@cypress/angular-signals",
+  "version": "0.0.0-development",
+  "description": "Test Angular Components using Signals with Cypress",
+  "main": "dist/index.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "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": "^17.2.0",
+    "@angular/core": "^17.2.0",
+    "@angular/platform-browser-dynamic": "^17.2.0",
+    "@cypress/mount-utils": "0.0.0-development",
+    "typescript": "~5.4.5",
+    "zone.js": "~0.14.6"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.2",
+    "@angular/core": ">=17.2",
+    "@angular/platform-browser-dynamic": ">=17.2",
+    "rxjs": ">=7.5.0",
+    "zone.js": ">=0.13.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cypress-io/cypress.git"
+  },
+  "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",
+    "cypress",
+    "cypress-io",
+    "test",
+    "testing"
+  ],
+  "contributors": [
+    {
+      "name": "Bill Glesias",
+      "social": "@atofstryker"
+    }
+  ],
+  "module": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{workspaceRoot}/cli/angular-signals"
+        ]
+      }
+    }
+  },
+  "standard": {
+    "globals": [
+      "Cypress",
+      "cy",
+      "expect"
+    ]
+  }
+}

npm/angular-signals/rollup.config.mjs

@@ -0,0 +1,14 @@
+import { createEntries } from '@cypress/mount-utils/create-rollup-entry.mjs'
+
+const config = {
+  external: [
+    '@angular/core',
+    '@angular/core/testing',
+    '@angular/common',
+    '@angular/platform-browser-dynamic/testing',
+    'zone.js',
+    'zone.js/testing',
+  ],
+}
+
+export default createEntries({ formats: ['es'], input: 'src/index.ts', config })

npm/angular-signals/src/index.ts

@@ -0,0 +1 @@
+export * from './mount'