fix: make sure legacy output spies work as intended (#32158)

Author: AtofStryker

cli/CHANGELOG.md

@@ -1,12 +1,20 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 14.5.5
+
+_Released 8/12/2025 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed an issue where Angular legacy `Output()` decorators were broken when making component instance field references safe. Fixes [#32137](https://github.com/cypress-io/cypress/issues/32137).
+- Upgraded `tmp` from `~0.2.3` to `~0.2.4`. This removes the [CVE-2025-54798](https://github.com/advisories/GHSA-52f5-9888-hmc6) vulnerability being reported in security scans. Addresses [#32176](https://github.com/cypress-io/cypress/issues/32176).
+
 ## 14.5.4
 
 _Released 8/07/2025_
 
 **Dependency Updates:**
 
 - Upgraded `tar-fs` to `2.1.3` and `3.1.0` in places we can control, to resolve [CVE-2024-12905](https://github.com/advisories/GHSA-pq67-2wwv-3xjx). `@puppeteer/browsers` still references `3.0.4`, but it is only used to download browsers which is not a feature of `puppeteer` that we utilize. Addressed in [#32160](https://github.com/cypress-io/cypress/pull/32160).
-- Upgraded `tmp` from `~0.2.3` to `~0.2.4`. This removes the [CVE-2025-54798](https://github.com/advisories/GHSA-52f5-9888-hmc6) vulnerability being reported in security scans. Addresses [#32176](https://github.com/cypress-io/cypress/issues/32176).
 
 ## 14.5.3
 

npm/angular/src/mount.ts

@@ -430,7 +430,10 @@ function setupComponent<T> (
     getComponentOutputs(fixture.componentRef.componentType).forEach((key) => {
       const property = component[key]
 
-      if (property instanceof EventEmitter) {
+      // With the introduction of https://github.com/cypress-io/cypress/pull/31993, we want to make sure that component inputs are reference safe inside cy.mount().
+      // However, the exception to this is if the user passes in a Cypress output spy as a property in order to maintain backwards compatibility.
+      // @ts-expect-error
+      if (property instanceof EventEmitter || (config?.componentProperties?.hasOwnProperty(key) && config?.componentProperties[key] instanceof EventEmitter)) {
       // only assign props if they are passed into the component
         if (config?.componentProperties?.hasOwnProperty(key)) {
         // @ts-expect-error

system-tests/projects/angular-signals/src/signals-inputs/signals.input.component.cy.ts

@@ -0,0 +1,18 @@
+import { SignalsInputComponent } from './signals.input.component'
+import { createOutputSpy, mount } from 'cypress/angular'
+
+describe('with output spies', () => {
+  // regression test for https://github.com/cypress-io/cypress/issues/32137
+  it('should emit events on button click', () => {
+    mount(SignalsInputComponent, {
+      componentProperties: {
+        newOutput: createOutputSpy('newOutput'),
+        oldOutput: createOutputSpy('oldOutput'),
+      },
+    })
+
+    cy.get('#test-button').click()
+    cy.get('@oldOutput').should('have.been.called')
+    cy.get('@newOutput').should('have.been.called')
+  })
+})

system-tests/projects/angular-signals/src/signals-inputs/signals.input.component.html

@@ -0,0 +1 @@
+<button id="test-button" (click)="onButtonClick()">Test</button>

system-tests/projects/angular-signals/src/signals-inputs/signals.input.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Output, output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'signals-input-component',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './signals.input.component.html',
+})
+export class SignalsInputComponent {
+  newOutput = output()
+  @Output() oldOutput: EventEmitter<void> = new EventEmitter()
+
+  onButtonClick () {
+    this.newOutput.emit()
+    this.oldOutput.emit()
+  }
+}