Component with async onInit not properly waiting for changes

[celluj34]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Support request
[ ] Other... Please describe:

Current behavior

A component with ngOnInit that returns a promise functions as if it is not being awaited when spectator.detectChanges() is called with detectChanges: false.

Expected behavior

Any component with an async ngOnInit is successfully handled by the spectator.detectChanges() method.

Minimal reproduction of the problem with instructions

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem via
https://stackblitz.com or similar (you can use this template as a starting point: https://bit.ly/2zme3bj).
Steps:

• Create component that implements OnInit
• Create ngOnInit method which returns a promise
  • set some data in the method (like this.loading = false)
• Create test to check the above field
• Test will fail because "true" does not equal "false"

The issue can be worked around either by calling spectator.component.ngOnInit or awaiting a promise with a short timeout (e.g. 200ms).

What is the motivation / use case for changing the behavior?

Angular supports async ngOnInit, so tests should too.

Environment

Angular version: 12.1.4


Browser:
- [X] Chrome (desktop) version 92
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.3.0 
- Platform: Win 10 x64  

Others:

[benelliott]

This is the first time I've heard that you can return a Promise from a lifecycle hook and I can't find documentation of it online, would you mind pointing to some Angular docs where it's described?

In the interface definition here it seems that it only supports void.

[celluj34]

I've not found any official documentation, but a few stackoverflow and github pages saying it's not explicitly disallowed:

angular/angular#17420 (comment)
https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit
related article about async oninit issues in testing: https://winterlimelight.com/2020/02/28/angular-jest-and-async-ngoninit/

[benelliott]

I think support for this pattern is out of scope for Spectator since it's not really a problem specific to the library, and is more to do with Angular's change detection.

[celluj34]

Yeah, that makes sense. I will try using await spectator.fixture.whenStable(); to see if that helps.

[celluj34]

Update

The following code does work. Could it be added to the docs?

    spectator.detectChanges();
    await spectator.fixture.whenStable(); //wait for async lifecycle hooks