Pending microtasks are not detected in fakeAsync()

[hecht-software]

I posted this question on SO, because I thought I'm doing something wrong:
https://stackoverflow.com/questions/52255528/how-to-detect-missing-tick-in-fakeasync

A user in the comments suggested submitting an issue here.

I have a problem with one of my unit tests. It tests a "delete" component method, which should show a confirmation dialog allowing the user to confirm or abort the delete action. The test expects the delete() service method not to have been called, if the user declines the delete action:

it('should request confirmation before deleting & abort action if user declined', fakeAsync(() => {
    spyOn(appService, 'confirm').and.returnValue(of(false));
    spyOn(personService, 'delete').and.callThrough();
    component.deleteEntry(testPerson);
    //tick(); // Missing tick()!
    expect(personService.delete).not.toHaveBeenCalled();
}));

confirm() returns an Observable that emitts true/false depending on the user's decision. A spy on confirm() will simulate the user declining the action (of(false)). As you can see in the code above tick() is commented out - let's assume the test dev simply forgot it.

Of course our expectation will now always be fulfilled. The Observable provided by confirm() won't emit anything, since the microtask is pending at the time expect() is called.

However, I expected fakeAsync() to throw an exception as the docs say:

If there are any pending timers at the end of the function, an exception will be thrown.

Here is the code for the component function I'm testing:

deleteEntry(person: Person) {
  this.appService.confirm().toPromise().then(
    (value) => {
      // Bug here: "!" operator is missing before "value":
      if (value) {
        return;
      }
      return this.personService.delete(person).toPromise();
    }
  ).catch((e) => {
    console.error(e);
  });
}

This test is crucial. It would be a big problem, if entities are deleted, just because the developer forgot a "!". Actually, this is why we write tests.

Also see my reproducing project on stackblitz. Notice that you have to click the 'refresh'-button of the inner browser view (next to the editor) if you want to re-run the test or after you changed something. The auto-reload feature will not work and throw errors.

[JiaLiPassion]

@hecht-software, thank you for posting the issue, I just checked the code, and currently fakeAsync will report error if there is pending timers, such as setTimeout, but microTasks will be executed automatically after the test func finished.

And I understand your point, I will try to figure out whether this is a feature.

[hecht-software]

Is there a way to detect pending microtasks? I looked into fake-async-test.ts and couldn't find a method. _microtasks is not meant to be accessed directly from outside. So maybe a first step would be to provide a getMicrotaskCount() method. This would allow to write an own fakeAsync() function that fits one's needs. It would even allow to add another expect() for pending microtasks in the unit test, so the test developer would have the choice how to handle pending microtasks.

[JiaLiPassion]

I know what you mean, basically current fakeAsync is designed (auto flush microtasks) to handle the behaviour like this.
https://stackblitz.com/edit/angular-bv8ekh?file=src/app/person/person.component.spec.ts

[hecht-software]

So purpose of auto flush microtasks is to ensure all code inside promise or event handlers is called. I.e. auto flush in your example ensures that the expect inside the then handler is called at all. Did I understand you correctly?

In your example it could happen that expect is never called, because deleteEntry is not resolved yet. The test dev could avoid this by adding a tick() at the end of the test. So in my understanding the auto flush feature is not crucial but rather serves for convenience/comfort. Therefore, to my opinon, an exception for pending micro tasks makes more sense, because in my case it is indeed crucial.

However, such behavior would break backward compatibility. On the other hand, a new second optional parameter which allows to disable auto flushing would be forgettable like the tick() in my case. So I think a new separate function without auto flush would be a good idea.

As mentioned earlier, a function for detecting pending micro tasks would be even better imho. I'd implement my own custom fakeAsync without auto flush like this:

function fakeAsyncWithoutAutoFlush(callback) {
  fakeAsync(() => {
    callback();
    if (getNumberOfPendingMicroTasks() > 0) {
      throw new Error('Pending microtasks in your test');
    }
  });
}

[JiaLiPassion]

I will try to figure out the use case, the case you said, if deleteEntry not resolved, there will not be microtask pending, so even you call tick, nothing will happened.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.