RxJs tap doesn't trigger after debounceTime when using fakeAsync in jest/angular test

I'm trying to test this flow:

Angular component:

test$?: Observable<string>;
loading = false;

ngOnInit() {
this.test$ = new Subject<string>().pipe(
startWith('1'),
tap(() => {
this.loading = true;
}),
debounceTime(500),
// here can be request like switchMap(value => this.api.get(value))
tap(() => {
this.loading = false; // this won't get triggered in test
}),
);
}


Template:

@let test = test$ | async;

@if (!loading) {
<div data-testing-id="test">{{ test }}</div>
}


Test:

it('test', fakeAsync(() => {
fixture.detectChanges();

expect(component.loading).toBeTruthy();

tick(501);
fixture.detectChanges();

expect(component.loading).toBeFalsy(); // this is still true
expect(fixture.debugElement.query(By.css('[data-testing-id="test"]')).nativeElement.textContent).toContain('1');
}));


If I remove debounceTime everythins works, of course. Otherwise I can't reach second tap while debugging and test conditions are always falsy.

Continue reading...