Angular test with asyncScheduler and flush - why it fails with flush()?

Question

There is this Angular 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 the test is 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
  }));

flush() should flush all macrotasks, but it does not. Why? If I use tick(), then the test is passing.

(Screenshots above provided by Jest and Wallaby plugin.)

Why is not passing with flush() but is passing with tick()?

flush:

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.

Repo is here: https://stackblitz.com/github/felikf/angular-testing-examples

Trulatrull

Can you setup a stackblitz reproducing the problem? Based on the documentation, the tick() without arguments is a flush() command. angular.io/guide/testing#component-with-async-service – Lickerish

I am working on it: stackblitz.com/github/felikf/angular-testing-examples, it kind of works. It is possible to clone from github also. – Trulatrull

Reported as bug: github.com/angular/angular/issues/34742 – Trulatrull

Answer 1

asyncScheduler is a setInterval which is a periodic macroTask, and currently the flush() API only flush non-periodic macroTasks such as setTimeout()

For now you should use tick() to make it work.

You can read more about it here

Anility

See here and here - the referenced issue is mine, I have just forgotten to update answer, thank you for it. – Trulatrull