Angular Defer Block Not Working in Cypress for E2E Testing

[kbuschgens]

Current behavior

The defer block in Angular does not function correctly during end-to-end (E2E) testing with Cypress. While there are solutions available for component testing, such as those described in a specific blog post (https://dev.to/angular/testing-defer-blocks-in-angular-with-cypress-21j8), these solutions are not applicable for E2E testing. This issue prevents the proper execution of asynchronous operations managed by defer blocks in Angular applications. When replacing the defer block by an if-else block everything is rendered correctly. Workaround is using a tick(), which feels weird

Desired behavior

The E2E test should correctly wait for the completion of asynchronous operations managed by the defer block.

Test code to reproduce

1. Implement a defer block in an Angular component.
2. Write an E2E test with Cypress that should trigger this defer block.
3. Run the E2E test using Cypress.

Cypress Version

13.7.3

Node version

v20.12.2

Operating System

macOS 14.5

Debug Logs

No response

Other

No response

[jordanpowell88]

@kbuschgens what is the trigger for your Defer block?

[kbuschgens]

The trigger is a signal @defer (when foo() || bar()) {} being foo and bar a signal value. The defer also has a placeholder of minimum 300ms. During debugging I can see foo or bar being set correctly but the view still not rendering.