Testing an Angular method that uses Observable.forkJoin with Jest

Question

I am trying to write a test for a component method that uses Observable.forkJoin. I have been all over the web and down some marbles rabbit holes, but in the end I think all I really need to do is mock the Observable forkJoin call and return fake data. Here is my component method

  public loadData(): void {
    this.someOtherMethod();
    this.someProperty = false;
    this.someOtherMethod2();

    if (this.isNew) {
      this.noData = true;
    } else if (this.key) {
      Observable.forkJoin([
        /*00*/ this.service1$.someCall(this.key),
        /*01*/ this.service2$.someCall(this.key),
        /*02*/ this.service2$.someCall1(this.key),
        /*03*/ this.service2$.someCall2(this.key),
        /*04*/ this.service2$.someCall3(this.key),
        /*05*/ this.service2$.someCall4(this.key),
        /*06*/ this.service2$.someCall5(this.key),
      ])
        .takeWhile(() => this.alive)
        .subscribe(
          response => {
            ... // join all the data together
          },
          // error => this.handleError(error)
        );
    }

    this.changeDetector$.markForCheck();
  }

Here is my test so far:

it('makes expected calls', async(() => {
  const response = [];
  const service1Stub: Service1 = fixture.debugElement.injector.get(Service1 );
  const service2Stub: Service2 = fixture.debugElement.injector.get(Service2 );

  comp.key = key;
  spyOn(comp, 'someOtherMethod').and.returnValue(of(response));
  spyOn(comp, 'someOtherMethod2').and.returnValue(of(dummyData));

  spyOn(service1Stub, 'someCall').and.returnValue(of(dummyData));
  spyOn(service2Stub, 'someCall').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall1').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall2').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall3').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall4').and.returnValue(of(response));
  spyOn(service2Stub, 'someCall5').and.returnValue(of(response));

  comp.loadData();
  expect(comp.someProperty).toBe(false);
  expect(comp.someOtherMethod).toHaveBeenCalled();
  expect(comp.someOtherMethod2).toHaveBeenCalled();
  expect(service1Stub.someCall).toHaveBeenCalledWith(key);
  expect(service2Stub.someCall1).toHaveBeenCalledWith(key);                  
  expect(service2Stub.someCall2).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall3).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall4).toHaveBeenCalledWith(key);
  expect(service1Stub.someCall5).toHaveBeenCalledWith(key);
}));

I get the following error (after I comment out the error catch above):

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Marbles seems to be concerned with testing the observable and how it reacts. I just want to see that the calls are being made and do deeper testing into what is happening inside the subscribe where all the data is joined together.

I know there are better ways to handle data but that requires a large overhaul of the application. I cannot change the method, just have to live with how it is now.

Any update on this ?,i am also facing the same issue – Sarjerao Ghadage Aug 05 '22 at 09:39 — Sarjerao Ghadage, Aug 05 '22 at 09:39

score 1 · Answer 1 · answered Sep 19 '19 at 16:16

A bit clueless here, it works for me in this reproduction:

import { ComponentFixture, TestBed, } from '@angular/core/testing';
import { Component, Injectable, OnInit } from '@angular/core';
import { of, forkJoin } from 'rxjs';

@Injectable({providedIn: 'root'})
export class Service { // service to be mocked
  response = ['hello', 'world'];
  // this is mocked anyway
  someCall() { return of(this.response); }
  someCall1() { return of(this.response); }
  someCall2() { return of(this.response); }
  someCall3() { return of(this.response); }
  someCall4() { return of(this.response); }
  someCall5() { throw new Error('oups!') }
}

@Component({
  selector: 'app-testee',
  template: `<h1>hi</h1>`
})
export class TesteeComponent implements OnInit { // main comp
  constructor(private service: Service) {}

  result: string; // aggregated property

  ngOnInit() { }

  loadData() {
    forkJoin([
      this.service.someCall(),
      this.service.someCall1(),
      this.service.someCall2(),
      this.service.someCall3(),
      this.service.someCall4(),
      this.service.someCall5(),
    ]).subscribe(
      rse => this.result = [].concat(...rse).join('-'), // aggregation
      err => this.result = `ERR ${err}`
    );
  }
}

describe('TesteeComponent', () => {
  let fixture: ComponentFixture<TesteeComponent>;
  let component: TesteeComponent;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [
        TesteeComponent
      ],
      providers: [
        Service
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TesteeComponent);
    component = fixture.componentInstance;
  });

  it('should load data', () => {
    const testee = component;
    // why not use TestBed.get(Service) here?
    const service = fixture.debugElement.injector.get(Service);
    spyOn(service, 'someCall').and.returnValue(of(['test', 'values', '0']));
    spyOn(service, 'someCall1').and.returnValue(of(['test', 'values', '1']));
    spyOn(service, 'someCall2').and.returnValue(of(['test', 'values', '2']));
    spyOn(service, 'someCall3').and.returnValue(of(['test', 'values', '3']));
    spyOn(service, 'someCall4').and.returnValue(of(['test', 'values', '4']));
    spyOn(service, 'someCall5').and.returnValue(of(['test', 'values', '5']));
    expect(testee).toBeTruthy();
    fixture.detectChanges();
    testee.loadData();

    expect(testee.result).toEqual('test-values-0-test-values-1-test-values-2-test-values-3-test-values-4-test-values-5');
    expect(service.someCall).toHaveBeenCalled();
  });
});

score 1 · Answer 2 · answered Jun 05 '20 at 09:25

It's from a bit that this question was did but i'll hope that in any case it will help.

This should works fine:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { TestComponent } from 'someLocation';
import { ServiceTest1 } from 'someLocation';
import { ServiceTest2 } from 'someLocation';

describe('TestComponent', () => {

    let fixture: ComponentFixture<TestComponent>;
    let component: TestComponent;
    let service1: ServiceTest1;
    let service2: ServiceTest2;
    let httpMock: HttpTestingController;

    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          TestComponent
        ],
        imports: [
          HttpClientTestingModule
        ],
        providers: [
          ServiceTest1,
          ServiceTest2
        ]
      }).compileComponents();

      service1 = TestBed.inject(ServiceTest1);
      service2 = TestBed.inject(ServiceTest2);
      httpMock = TestBed.inject(HttpTestingController);

      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;

      fixture.detectChanges();

    });

    it('TestComponent should be created', () => {
      expect(component).toBeTruthy();
    });

    it('should load data', done => {

      const response0 = ['test', 'values', '0'];
      const response1 = ['test', 'values', '1'];
      const response2 = ['test', 'values', '2'];
      const response3 = ['test', 'values', '3'];
      const response4 = ['test', 'values', '4'];
      const response5 = ['test', 'values', '5'];
      const response6 = ['test', 'values', '6'];

      component.loadData().subscribe({
        next: (responses) => {

          expect(responses[0]).toEqual(response0);
          expect(responses[1]).toEqual(response1);
          expect(responses[2]).toEqual(response2);
          expect(responses[3]).toEqual(response3);
          expect(responses[4]).toEqual(response4);
          expect(responses[5]).toEqual(response5);
          expect(responses[6]).toEqual(response6);

          done();

        }
      });

      httpMock.expectOne('urlSomeCall0').flush(response0);
      httpMock.expectOne('urlSomeCall1').flush(response1);
      httpMock.expectOne('urlSomeCall2').flush(response2);
      httpMock.expectOne('urlSomeCall3').flush(response3);
      httpMock.expectOne('urlSomeCall4').flush(response4);
      httpMock.expectOne('urlSomeCall5').flush(response5);
      httpMock.expectOne('urlSomeCall6').flush(response6);

      httpMock.verify();

    });
});

With the loadData() function like this:

loadData(): Observable<any> {

  return new Observable(observable => {

    this.someOtherMethod();
    this.someProperty = false;
    this.someOtherMethod2();

    if (this.isNew) {
      this.noData = true;
    } else if (this.key) {
      Observable.forkJoin([
        /*00*/ this.service1$.someCall(this.key),
        /*01*/ this.service2$.someCall(this.key),
        /*02*/ this.service2$.someCall1(this.key),
        /*03*/ this.service2$.someCall2(this.key),
        /*04*/ this.service2$.someCall3(this.key),
        /*05*/ this.service2$.someCall4(this.key),
        /*06*/ this.service2$.someCall5(this.key),
      ])
        .takeWhile(() => this.alive)
        .subscribe({
          next: responses => {
            observable.next(responses);
            observable.complete();
            ... // join all the data together
          },
          error: error => {
            observable.error(error);
            observable.complete();
            this.handleError(error);
          }
        });
    }

    this.changeDetector$.markForCheck();

  });

};

Also remember that with the forkJoin all your observables should return the complete event.

Testing an Angular method that uses Observable.forkJoin with Jest

2 Answers2