fix: Use setInput for component properties in Angular component tests

[cg-roling]

This is an alternative fix for #23591, where ngOnChanges is not being called when mounting a component using the Class syntax.

ComponentRef.setInput was introduced in Angular 14.1.

The original fix (#23596) calls ngOnChanges manually to make up for the fact that properties are assigned directly to the component, bypassing Angular change detection.

That fix, however, causes an issue where subsequent calls to componentRef.setInput in the test will be considered the first change, and will not include previousValue.

Instead, if we use setInput to set component properties when mounting, ngOnChanges is called automatically by Angular, and future calls to setInput track changes properly.

Note: I didn't figure out how to run the tests modified in the original bug. They should still pass. It also might be worth adding a test for the ngOnChanges behavior. If someone could let me know how to run those tests, I would be happy to add it!

[CLAassistant]

All committers have signed the CLA.

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[cypress]

5 failed and 23 flaky tests on run #50895 ↗︎

5

28095

1345

0

23

Details:

Use Object.assign for non-inputs
Project: cypress	Commit: 4609f15e78
Status: Failed	Duration: 34:55 💡
Started: Sep 8, 2023 5:53 PM	Ended: Sep 8, 2023 6:28 PM

  runner/ct-framework-errors.cy.ts • 1 failed test • app-e2e

View Output Video

Test		Artifacts
Angular 13 > error conditions		Test Replay Output Screenshots

  angular.cy.ts • 4 failed tests • webpack-dev-server

View Output Video

Test		Artifacts
angular-13 > test behaviors > should mount a passing test		Test Replay Output Screenshots
angular-13 > test behaviors > should live-reload on src changes		Test Replay Output Screenshots
angular-13 > test behaviors > should show compilation errors on src changes		Test Replay Output Screenshots
angular-13 > test behaviors > should detect new spec		Test Replay Output Screenshots

  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
network stubbing > waiting and aliasing > can spy on a 304 not modified image response		Output

  e2e/origin/commands/assertions.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
cy.origin assertions > #consoleProps > .should() and .and()		Output

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-firefox

View Output Video

Test		Artifacts
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output

  runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App: Runs > no internet connection > shows correct message on connect project modal		Test Replay Output Screenshots

  cypress-in-cypress.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
Cypress in Cypress > restarts browser if there is a before:browser:launch task and there is a change on the config		Test Replay Output Screenshots

The first 5 flaky specs are shown, see all 11 specs in Cypress Cloud.

Review all test suite changes for PR #27775 ↗︎

[cg-roling]

Angular 13 failures are... unfortunate 😬. Is that something we would want to try to work around?

[cypress-app-bot]

This PR has not had any activity in 180 days. If no activity is detected in the next 14 days, this PR will be closed.

[cypress-app-bot]

This PR has been closed due to inactivity