Test fails with flush() but works with tick()

🐞 bug report

Affected Package

The issue is caused by package @angular/core/testing

Is this a regression?

I dont know.

Description

I have a simple component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { asyncScheduler, Observable, of, queueScheduler, scheduled } from 'rxjs';

@Component({
  selector: 'test-component',
  templateUrl: './test-component.component.html'
})
export class TestComponentComponent implements OnInit {
  value: string;

  constructor() { }

  ngOnInit(): void {
    const data$ = this.fetchDataScheduler();

    data$
      .subscribe(value => {
        this.value = value;
      });
  }

  private fetchDataScheduler(): Observable<string> {
    return scheduled(of('foo'), asyncScheduler);
  }

}

and two simple tests:

Passing:

it('async - test setTimeout', fakeAsync(() => {
    expect(component.value).toBeFalsy();
    fixture.detectChanges(); // ngOnInit
    expect(component.value).toBeFalsy();
    tick();
    expect(component.value).toBe('foo');
  }));

Failing:

it('async - test setTimeout', fakeAsync(() => {
    expect(component.value).toBeFalsy();
    fixture.detectChanges(); // ngOnInit
    expect(component.value).toBeFalsy();
    flush();
    expect(component.value).toBe('foo');  // <- fails here
  }));

I think that the test with flush() should pass too, according to documentation:

Simulates the asynchronous passage of time for the timers in the fakeAsync zone by draining the macrotask queue until it is empty. The returned value is the milliseconds of time that would have been elapsed.

🔬 Minimal Reproduction

Stackblitz or GitHub

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.20
Node: 12.11.1
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.802.2
@angular-devkit/build-angular      0.802.2
@angular-devkit/build-optimizer    0.802.2
@angular-devkit/build-webpack      0.802.2
@angular-devkit/core               8.2.2
@angular-devkit/schematics         8.3.20
@angular/cdk                       8.2.3
@angular/cli                       8.3.20
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.2.2
@schematics/angular                8.3.20
@schematics/update                 0.803.20
rxjs                               6.5.4
typescript                         3.5.3
webpack                            4.38.0

Anything else relevant? Discussed on SO

and here, where Netanel suggests that it is caused by periodic tasks not being flushed with flush().

[JiaLiPassion]

@felikf , this is not a bug because in your code you use asyncScheduler which is in fact a setInterval which is a periodic macroTask, and currently the flush() API only flush non-periodic macroTasks such as setTimeout(), so for now, please use tick() to make it work, and I am currently working on adding new APIs to make this work easily. Thanks.

[thw0rted]

@JiaLiPassion is there any status update on the “new APIs” you mentioned in your comment above? rxjs AsyncTask is the default scheduler for a lot of observables, and because it uses setInterval under the hood – even for observables that run once – it’s currently impossible to flush them.