title: spyOn doesn't seem to work in angular unit test, actual code invoked
body: <p>I have following test. It fails and appears that the spyOn is not mocking the service correctly or may be I don't understand it. I put a console in the component method and could see it when test runs, shouldn't the actual method be not called when I am spying on it? I thought may be it's due to api taking sometime, so tried <code>fakeAsync</code>, <code>flush</code> and <code>tick</code> etc. but none worked.</p>
  <pre><code>describe('AppComponent', () =&gt; {
    let service: any;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    let component: AppComponent;
    beforeEach(async () =&gt; {
      await TestBed.configureTestingModule({
        imports: [RouterTestingModule, HttpClientTestingModule],
        declarations: [AppComponent],
        providers: [PatientdataService],
      }).compileComponents();
  
      service = TestBed.inject(PatientdataService);
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
    });
  
    it('should call getPatient from service', () =&gt; {      
  
      const dataSpy = spyOn(component, 'loadPatientData');
      const patientSpy = spyOn(service, 'getPatientValues').and.returnValue(of([]));
      const medSpy = spyOn(service, 'getMedicationValues').and.returnValue(of([]));
  
      component.getPatientDetails();
  
      expect(dataSpy).toHaveBeenCalledTimes(1);
      expect(patientSpy).toHaveBeenCalledTimes(1);
      expect(medSpy).toHaveBeenCalledTimes(1);
    }); 
  });
  </code></pre>
  <p>Following is the component method it's trying to test -</p>
  <pre><code>getPatientDetails() {
      this.service.getPatientValues().subscribe({
        next: (data) =&gt; {
          this.loadPatientData(JSON.parse(data));    
          this.service.getMedicationValues().subscribe({
            next: (data) =&gt; {
              this.loadMedicationData(JSON.parse(data));    
              this.service.getConditionsValues().subscribe({
                next: (data) =&gt; {
                ...
                ...
  </code></pre>
  <p>This is the error I get -</p>
  <pre><code>Error: Expected spy loadPatientData to have been called once. It was called 0 times.
              at &lt;Jasmine&gt;
              at UserContext.&lt;anonymous&gt; (src/app/app.component.spec.ts:41:21)
              at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
              at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
          Error: Expected spy getMedicationValues to have been called once. It was called 0 times.
              at &lt;Jasmine&gt;
              at UserContext.&lt;anonymous&gt; (src/app/app.component.spec.ts:43:20)
              at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
              at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
  </code></pre>