title: How to test angular 5 component with rxjs 5 forkJoin
body: <p>I have a ResultsComponent in my application, where I am making two service calls at the same time joining both observable by using a rxjs forkJoin operator. I want to mock the data for the rxjs operator. I have google lot time and tried different ways, but didn't find a way to do it. can anyone please help me.</p>
  
  <p>angular version: 5.2.9
  rxjs version: 5.5.7
  angular-cli: 1.6.6</p>
  
  <p>getting this error at forkJoin statement in <strong>results.component.ts</strong></p>
  
  <blockquote>
    <p>TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.</p>
  </blockquote>
  
  <p><strong>results.component.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: "app-results",
    templateUrl: "./results.component.html",
    styleUrls: ["./results.component.scss"]
  })
  export class ResultsComponent 
    implements OnInit, OnDestroy {
    searchForm: FormGroup;
  
  
    constructor(
      private rxnsSearchService: RxnsSearchService,
      private rxnsSearchHitCountService: RxnsSearchHitCountService,
      public store: Store&lt;fromAppReducer.AppState&gt;,
      private route: ActivatedRoute,
      public formBuilder: FormBuilder,
      public router: Router
    ) {
  
    }
  
    ngOnInit() {
  
      this.route.queryParams.subscribe(params =&gt; {
        this.searchForm = this.formBuilder.group({
          searchInput: new FormControl(params.q, Validators.required),
          searchType: new FormControl(params.searchType),
          searchBy: new FormControl(params.searchBy)
        });
        this.store.dispatch(new AppActions.ChemQueryString(params.q));
        const rxnsObservable: Observable&lt;Array&lt;any&gt;&gt; = this.rxnsSearchService.getReactions(params, 0);
        const headCountObservable: Observable&lt;number&gt; = this.rxnsSearchHitCountService.getHitCount(params);
        forkJoin([rxnsObservable, headCountObservable]).subscribe(results =&gt; {
          this.reactions = results["0"];
          this.total = results["1"];
        }, (error) =&gt; {
          console.log(error);
        });
      });
      this.store.select("rxnState").subscribe(data =&gt; {
        console.log(data);
        this.searchString = data.slice(-1)[0].searchString;
      });
    }
    ngOnDestroy() {}
  }
  </code></pre>
  
  <p><strong>results.component.spec.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const dummydata = [
    {
      ruid: "02b01f46288b4f71950d03856bc8f173",
      rxnString: "Cl.NCCC1(C(F)(F)F)CC1.NCC1=CC=CC(NC"
    },
    {
      ruid: "02b01f46288b4f71950d03856bc8f173",
      rxnString: "Cl.NCCC1(C(F)(F)F)CC1.NCC1=CC=CC(NC"
    }
  ];
  const dummyParams = {q: "[H]N(C(=O)C([H])([H])C)C1([H])CCCC22", searchType: "SUBSTRUCTURE", searchBy: "PRODUCT"};
  
  class RouterStub {
    navigate(commands: any[], extras?: NavigationExtras) { }
  }
  class ActivatedRouteStub {
    private _testParams: {};
    private subject = new BehaviorSubject(this._testParams);
     queryParams = this.subject.asObservable();
    setQueryParams(params: Params) {
      this._testParams = params;
      this.subject.next(params);
    }
  }
  
  describe("ResultsComponent", () =&gt; {
    beforeEach(() =&gt; {
      activatedRoute = new ActivatedRouteStub();
    });
    let component: ResultsComponent;
    let injector;
    let store: Store&lt;any&gt;;
    let fixture: ComponentFixture&lt;ResultsComponent&gt;;
    let rxnsSearchService: RxnsSearchService;
    let rxnsSearchHitCountService: RxnsSearchHitCountService;
    let activatedRoute: ActivatedRouteStub;
  
    beforeEach(async(() =&gt; {
  
      TestBed.configureTestingModule({
        imports: [
          ResultsModule,
          NgxPaginationModule,
          HttpClientTestingModule,
          RouterTestingModule,
          StoreModule.forRoot(fromAppReducer.reducers)
        ],
        declarations: [ ],
        providers: [
            RxnsSearchService,
            RxnsSearchHitCountService,
          { provide: ActivatedRoute, useValue: activatedRoute },
          { provide: Router, useClass: RouterStub},
          FormBuilder
        ]
      }).compileComponents();
      injector = getTestBed();
      rxnsSearchService = injector.get(RxnsSearchService);
      rxnsSearchHitCountService = injector.get(RxnsSearchHitCountService);
      spyOn(rxnsSearchService, 'getReactions').and.returnValue(Observable.of(dummydata));
      spyOn(rxnsSearchHitCountService, 'getHitCount').and.returnValue(Observable.of(300));
      store = injector.get(Store);
    }));
  
    beforeEach(async(() =&gt; {
      activatedRoute.setQueryParams(dummyParams);
      fixture = TestBed.createComponent(ResultsComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    }));
  
    it("should create results component", () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>