Angular test combineLatest with Jest

Question

I'm stuck with a test with a more complicated Statement towards combineLatest. It looks like this:

component:

export class ErinnerungenErinnerungenComponent implements OnInit, OnDestroy {    

...

erinnerungen: ErinnerungModel[] = [];

ErinnerungData$ = combineLatest([
this.featureSessionStoreService.auftragIdLookupModelSubject,
this.updateGridSubject]).pipe
(
  tap(() => this.loadingGridSubject.next(true)),
  switchMap(() =>
    this.erinnerungService.getErinnerungenForAuftrag(
      this.featureSessionStoreService.auftragIdLookupModel as GetErinnerungenForAuftrag
    )
  ),
  tap((erinnerungenModel) => {
    this.erinnerungen = erinnerungenModel.erinnerungen;
  }),
  tap(() => this.loadingGridSubject.next(false)),
  takeUntil(this.componentIsDestroyed$)
  )
.subscribe();


constructor(...) {}

ngOnInit() {...}

}

test:

it('should get Erinnerungen for Auftrag from Backend', () => {
component.updateGridSubject.next(true);

expect(erinnerungService.getErinnerungenForAuftrag).toHaveBeenCalled();
expect(component.erinnerungen.length).toBeGreaterThan(0);
});

pipe() gets not triggert after observable was called. Don't understand why. In the running application this works.

Answer 1

Let's first take a look at what combineLatest does:

The CombineLatest operator behaves in a similar way to Zip, but while Zip emits items only when each of the zipped source Observables have emitted a previously unzipped item, CombineLatest emits an item whenever any of the source Observables emits an item (so long as each of the source Observables has emitted at least one item). When any of the source Observables emits an item, CombineLatest combines the most recently emitted items from each of the other source Observables, using a function you provide, and emits the return value from that function.

It means that your other Observable has to emit minimum once in order that combineLatest emits.

Also, the test will still not work. You have to use fakeAsync in combination with tick for async calls:

it('should get Erinnerungen for Auftrag from Backend', fakeAsync(() => {
  component.updateGridSubject.next(true);
  // emit other observable

  // maybe give some reasonable value here or leave empty
  tick();

  expect(erinnerungService.getErinnerungenForAuftrag).toHaveBeenCalled();
  expect(component.erinnerungen.length).toBeGreaterThan(0);
}));