perform detectChanges internally upon spectator.query call

[DmitryEfimenko]

I often write components using OnPush ChangeDetection (pretty much exclusively). In addition, often I write code based on rxjs streams. With that in mind, I often stub observables in my unit tests. So recently I wondered, why I have to manually call detectChanges in my tests in these situations.

I was wrongly under impression that async pipe would call detectChanges for me. However, that's not the case. Under the hood, it calls markForCheck.

So what if we added a call to detectChanges inside the spectator.query(...) call? I would think that if I'm quering for an element, I want my DOM to be in sync with the state at that time. Spectator already does something similar with setInnput call.

[NetanelBasal]

It doesn't make sense to call detectChanges when you call query().

[DmitryEfimenko]

It makes sense to me to call it right before the query. Why does it not makes sense to you?

[NetanelBasal]

Because that's not how Angular works

[NetanelBasal]

Changing the component inputs will check the component

[DmitryEfimenko]

I think it's common in the test to mock observables (such as HTTP requests) with Subjects. In contrast to the actual HTTP request, zones will not pick up the emission from the subject, so detectChanges won't be called. That's why the developer has to do it manually in the test, which is annoying. This seems like an excellent opportunity to automate.

In addition, Angular states that "there is no harm in calling detectChanges() more often than is strictly necessary."

[DmitryEfimenko]

following your logic when you said: "Changing the component inputs will check the component"...
Making an HTTP call will also check the component. However, that's not the case when you mock that HTTP call. So in order to bridge this difference, calling detectChanges under the hood, right before retrieving a reference to whatever you want to test makes perfect sense to me.

[DmitryEfimenko]

although I can see how this won't work if you get a reference to the element you're trying to test before flushing the observable response