title: Spy on the result of an Observable Subscription with Jasmine
body: <p>I am Jasmine unit testing an angular component, which uses Observables. My component has this lifecycle hook that I am testing:</p>
  <pre><code>ngOnInit() {
    this.dataService.getCellOEE(this.cell).subscribe(value =&gt; this.updateChart(value));
  }
  </code></pre>
  <p>I have a test that ensures that getCellOEE has been called, but now I want to check that updateChart is called when the observable resolves with a new value. This is what I have so far:</p>
  <pre><code>let fakeCellService = {
    getCellOEE: function (value): Observable&lt;Array&lt;IOee&gt;&gt; {
      return Observable.of([{ time: moment(), val: 67 }, { time: moment(), val: 78 }]);
    }
  };
  
  describe('Oee24Component', () =&gt; {
    let component: Oee24Component;
    let service: CellService;
    let injector: Injector;
    let fixture: ComponentFixture&lt;Oee24Component&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [Oee24Component],
        providers: [{ provide: CellService, useValue: fakeCellService }]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(Oee24Component);
      component = fixture.componentInstance;
      injector = getTestBed();
      service = injector.get(CellService)
      fixture.detectChanges();
      spyOn(service, 'getCellOEE').and.returnValue({ subscribe: () =&gt; { } });
      spyOn(component, 'updateChart');
    });
  
    it('should get cell oee on init', () =&gt; {
      component.ngOnInit();
      expect(service.getCellOEE).toHaveBeenCalled();
    });
  
    it('should update chart on new data', () =&gt; {
      component.ngOnInit();
      expect(component.updateChart).toHaveBeenCalled();
    });
  });
  </code></pre>
  <p>However, I get the error:</p>
  <blockquote>
  <p>chrome 56.0.2924 (Windows 10 0.0.0) Oee24Component should update chart on new data FAILED</p>
  <p>Expected spy updateChart to have been called.</p>
  </blockquote>
  <p>Presumably this is a timing issue because the observable hasn't necessarily resolved when the test checks? If that is the case, how do I set this up correctly?</p>
  <h1>Update:</h1>
  <p>Here is my component:</p>
  <pre><code>@Component({
    selector: 'app-oee24',
    templateUrl: './oee24.component.html',
    styleUrls: ['./oee24.component.css']
  })
  export class Oee24Component implements OnInit {
    public barChartData: any[] = [{ data: [], label: 'OEE' }];
  
    constructor(public dataService: CellService) { }
  
    ngOnInit() {
      this.dataService.getCellOEE(this.cell).subscribe(value =&gt; this.updateChart(value));
    }
  
    updateChart(data: Array&lt;IOee&gt;) {
      this.barChartData[0].data = data.map(val =&gt; val.val);
    }
  }
   
  </code></pre>