title: How to easily mock a service HTTP request with Jasmine (Angular)?
body: <p>Why wont this spy work?  I am creating an instance of the prescriptionService and spying on the <code>fetchClientPrescriptions</code> method, but when I check to see if its been called, I get an error. Yet the first spy for <code>getClientPrescriptions</code> works just fine. </p>
  
  <p>Test:</p>
  
  <pre><code>  let prescriptions = [
      {"ndcpackage": "58160082552", "form": "1.0ML Syringe", "name": "Havrix", "dosage": "Havrix INJ 720UNIT", "quantity": "3", "refill_freq": 30},
      {"ndcpackage": "59310058020", "form": "1.0EA Box", "name": "Proair Respiclick", "dosage": "Proair Respiclick AER", "quantity": "0", "refill_freq": 30}
    ];
  
    it('should fetch client prescriptions if clientId is provided', async(() =&gt; {
      let spyC = spyOn(component, 'getClientPrescriptions');
      let spyS = spyOn(prescriptionService, 'fetchClientPrescriptions').and.returnValue(of(prescriptions));
      component.clientId = 5;
      component.ngOnInit();
      fixture.whenStable().then(() =&gt; {
        expect(spyC).toHaveBeenCalled();
        expect(spyS).toHaveBeenCalled();
        expect(component.currentPrescriptions).toEqual(prescriptions);
      });
    }));
  </code></pre>
  
  <p>Service: </p>
  
  <pre><code>  fetchClientPrescriptions(id: any) {
      return this.http.get&lt;DrugSelection[]&gt;(environment.apiURL + '/fetch-client-rx/' + id);
    }
  </code></pre>
  
  <p>Component: </p>
  
  <pre><code>  ngOnInit() {
      if (this.clientId != null) {
        this.getClientPrescriptions();
      }
    }
  
    getClientPrescriptions() {
      this.prescriptionService.fetchClientPrescriptions(this.clientId).subscribe(p =&gt; {
        this.dataSource = new MatTableDataSource&lt;DrugSelection&gt;(p);
        this.dataSource.sort = this.sort;
        this.currentPrescriptions = p;
      });
    }
  </code></pre>
  
  <p>Errors:</p>
  
  <pre><code>Error: Expected spy fetchClientPrescriptions to have been called.
          at &lt;Jasmine&gt;
          at http://localhost:9876/_karma_webpack_/src/app/client/client-prescriptions/client-prescriptions.component.spec.ts:48:20
          at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/C:/Users/BHanna/Documents/my-mfg/mymfg-spring-agents/src/main/webapp/node_modules/zone.js/dist/zone.js:396:1)
          at AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/C:/Users/BHanna/Documents/my-mfg/mymfg-spring-agents/src/main/webapp/node_modules/zone.js/dist/async-test.js:102:1)
      Error: Expected $.length = 0 to equal 2.
      Expected $[0] = undefined to equal Object({ ndcpackage: '58160082552', form: '1.0ML Syringe', name: 'Havrix', dosage: 'Havrix INJ 720UNIT', quantity: '3', refill_freq: 30 }).
      Expected $[1] = undefined to equal Object({ ndcpackage: '59310058020', form: '1.0EA Box', name: 'Proair Respiclick', dosage: 'Proair Respiclick AER', quantity: '0', refill_freq: 30 }).
          at &lt;Jasmine&gt;
          at http://localhost:9876/_karma_webpack_/src/app/client/client-prescriptions/client-prescriptions.component.spec.ts:49:46
          at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/C:/Users/BHanna/Documents/my-mfg/mymfg-spring-agents/src/main/webapp/node_modules/zone.js/dist/zone.js:396:1)
          at AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/C:/Users/BHanna/Documents/my-mfg/mymfg-spring-agents/src/main/webapp/node_modules/zone.js/dist/async-test.js:102:1)
  </code></pre>