Skip to content

Conversation

@AtofStryker
Copy link
Contributor

@AtofStryker AtofStryker commented Nov 26, 2025

Additional details

Adds a zoneless component testing harness for Angular 20 (experimental) and Angular 21. Angular 21 ships with zoneless and Cypress will scaffold cypress/angular-zoneless for Angular 21+ projects.

Because this is likely going to be the next target for cypress/angular and the recommended pattern for data-binding is now signals, this testing harness will be remove autoDetectChanges as this happens naturally and autoSpyOutputs as @Output decorators are legacy and can be created manually via createSpyOutputs.

NOTE: when we merge the changes upstream in #33007 we need to call this out as BREAKING CHANGES

Additionally, with the addition of the zoneless mount handler, the angular-21 system test project needs it's own set of fixtures, which will eventually be moved into the main fixture directory (as a replacement) once Angular 18 and 19 support are officially dropped from Cypress.

After this releases, we need to update @cypress/schematic to support Angular 21 as the scaffolded files via the schematic CLI are not correct. I have a WIP of this on #33027 and it must be done AFTER this feature is released

Steps to test

How has the user experience changed?

PR Tasks


Note

Adds cypress/angular-zoneless for Angular 20/21 and integrates it across CLI, scaffolding, CI, and system tests (including new Angular 21 project).

  • Packages:
    • New: @cypress/angular-zoneless package providing zone.js-free Angular component mounting (mount, createOutputSpy, zoneless TestBed setup).
    • Angular (zoned): ensure signal output spy subscriptions are cleaned up by tracking subscriptions.
  • CLI/Exports:
    • Include angular-zoneless in CLI build, exports, files, post-build copy, eslint ignores, and devDependencies.
  • Scaffolding:
    • Auto-select cypress/angular-zoneless for projects with Angular >=21 (fallback to cypress/angular otherwise).
    • Support file generation tests accept both cypress/angular and cypress/angular-zoneless.
  • CI:
    • Add npm-angular-zoneless build job; include in PR and main workflows and ready-to-release deps.
    • Update workflow branch filters and artifact persistence branch name.
  • System Tests:
    • Add full Angular 21 project using cypress/angular-zoneless (configs, support, components, specs, assets).
    • Execute Angular 21 CT separately; adjust existing Angular tests/configs (e.g., styles file, rxjs-interop alias, provider key fix).
    • Update schematic tests matrix (Angular 19/20).
  • Docs/Meta:
    • Link new changelog; list package in CONTRIBUTING; CLI changelog notes zoneless support.

Written by Cursor Bugbot for commit 2d84ab6. This will update automatically on new commits. Configure here.

@cypress
Copy link

cypress bot commented Nov 26, 2025

cypress    Run #67744

Run Properties:  status check failed Failed #67744  •  git commit 2d84ab60c6: make active fixture sync and update angular-21 examples to signals where applica...
Project cypress
Branch Review feat/add_zoneless_angular_harness
Run status status check failed Failed #67744
Run duration 20m 38s
Commit git commit 2d84ab60c6: make active fixture sync and update angular-21 examples to signals where applica...
Committer Bill Glesias
View all properties for this run ↗︎

Test results
Tests that failed  Failures 1
Tests that were flaky  Flaky 2
Tests that did not run due to a developer annotating a test with .skip  Pending 27
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 797
View all changes introduced in this branch ↗︎
UI Coverage  62.34%
  Untested elements 27  
  Tested elements 48  
Accessibility  98.98%
  Failed rules  0 critical   3 serious   1 moderate   0 minor
  Failed elements 19  

Tests for review

Failed  cypress\e2e\runner\retries.experimentalRetries.mochaEvents.cy.ts • 1 failed test • app-e2e

View Output

Test Artifacts
... > does not try to serialize error with err.actual as DOM node Test Replay Screenshots
Flakiness  cypress\e2e\cypress-origin-communicator.cy.ts • 1 flaky test • app-e2e

View Output

Test Artifacts
Cypress In Cypress Origin Communicator > primary origin memory leak prevention > cleans up the primaryOriginCommunicator events when navigating away from the /specs to /runs Test Replay Screenshots
Flakiness  cypress\e2e\runs.cy.ts • 1 flaky test • app-e2e

View Output

Test Artifacts
... > displays each run with correct information Test Replay Screenshots

@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch 2 times, most recently from a1b2377 to 15f446b Compare November 26, 2025 20:40
const cypressSchematicPackagePath = path.join(__dirname, '..')

const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-20', 'angular-21']
const ANGULAR_PROJECTS: ProjectFixtureDir[] = ['angular-19', 'angular-20']
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have to downgrade the test because the zoneless handler isn't supported within the binary yet (see the PR description)

@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 10e9b77 to 70ce43b Compare November 26, 2025 22:35
@AtofStryker AtofStryker linked an issue Dec 1, 2025 that may be closed by this pull request
@AtofStryker AtofStryker self-assigned this Dec 1, 2025
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 47d9a59 to 1e24ba1 Compare December 2, 2025 02:33
@AtofStryker AtofStryker force-pushed the feat/support_angular_21 branch from 5d5b79a to cc8305a Compare December 2, 2025 22:59
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 1e24ba1 to d64f6cf Compare December 2, 2025 23:02
Base automatically changed from feat/support_angular_21 to develop December 3, 2025 18:03
@AtofStryker AtofStryker marked this pull request as draft December 3, 2025 18:21
@AtofStryker AtofStryker marked this pull request as ready for review December 3, 2025 18:24
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from d64f6cf to 2749db0 Compare December 3, 2025 18:24
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 2749db0 to 1973227 Compare December 3, 2025 18:40
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch 2 times, most recently from 87fbe7a to 9033b2e Compare December 3, 2025 19:32
@AtofStryker AtofStryker force-pushed the feat/add_zoneless_angular_harness branch from 9033b2e to 2d84ab6 Compare December 3, 2025 20:22
@AtofStryker AtofStryker merged commit 0f215f3 into develop Dec 4, 2025
129 of 134 checks passed
@AtofStryker AtofStryker deleted the feat/add_zoneless_angular_harness branch December 4, 2025 20:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(angular): Add support for zoneless change detection in Angular 20 Cypress component tests not working without zone.js

3 participants