Angular 2 Observable testing Error: Cannot use set

Question

I'm trying to test a component, which uses a service that makes async http calls. The service returns an Observable, which the component subscribes on.

Service code snippet:

getRecentMachineTemperatures(_machine_Id): Observable<IDeviceReadings[]> {

    return this.http.get(TemperatureService.URL + _machine_Id)
      .map(response => { return response.json(); })
      .map((records: Array<any>) => {
        let result = new Array<IDeviceReadings>();
        if (records) {
          records.forEach((record) => {
            let device = new IDeviceReadings();
            device.device_id = record.device_id;

            if (record.d) {
              record.d.forEach((t) => {
                let temperature = new ITemperature();
                temperature.timestamp = t.timestamp;
                temperature.value = t.temperature;

                device.temperatures.push(temperature);
              });
            }

            result.push(device);
          });
        }
        return result;
      });
  }

Component code snippet:

  ngOnInit() {
    this.getRecentTemperatures();
  }

  getRecentTemperatures() {
    this.temperatureService.getRecentMachineTemperatures(this.machine_id)
      .subscribe(
        res => {
          let device1 = res[0];
          this.deviceId = device1.device_id;
          this.initTemperatures(device1.temperatures);
          this.updateChart();
        },
        error => console.log(error));
  }

My Test sets up dependencies, spies on the service 'getRecentMachineTemperatures' and sets i to return some stub data. I've been googling around for ways to test this, thus resulting in 3 different test, trying to test the same thing. Each giving me a different error.

temperature.component.spec.ts:

let machine_id = 1;
let comp:                 TemperatureComponent;
let fixture:              ComponentFixture<TemperatureComponent>;
let de:                   DebugElement;
let el:                   HTMLElement;
let temperatureService:   TemperatureService;
let stubDevices:          IDeviceReadings[];
let stubTemperatures:     ITemperature[];
let spyRecentTemps:       Function;

describe('Component: Temperature', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TemperatureComponent],
      imports: [ ChartsModule ],
      providers: [
        MockBackend,
        BaseRequestOptions,
        { provide: Http,
          useFactory: (backend, defaultOptions) => {
            return new Http(backend, defaultOptions);
          },
          deps: [MockBackend, BaseRequestOptions]},
        TemperatureService
      ]
    });

    stubDevices = new Array<IDeviceReadings>();

    let stubDevice = new IDeviceReadings();
    stubDevice.device_id = 'stub device';
    stubDevice.temperatures = new Array<ITemperature>();

    let stubTemp = new ITemperature();
    stubTemp.timestamp = new Date().getTime();
    stubTemp.value = 10;

    stubDevice.temperatures.push(stubTemp);
    stubDevices.push(stubDevice);

    stubTemperatures = new Array<ITemperature>();

    let stubTemp2 = new ITemperature();
    stubTemp.timestamp = new Date().getTime() + 1;
    stubTemp.value = 11;

    stubTemperatures.push(stubTemp2);

    fixture = TestBed.createComponent(TemperatureComponent);
    comp = fixture.componentInstance;

    temperatureService = fixture.debugElement.injector.get(TemperatureService);

    spyRecentTemps = spyOn(temperatureService, 'getRecentMachineTemperatures')
      .and.returnValue(Observable.of(stubDevices).delay(1));

    //  get the "temperature-component" element by CSS selector (e.g., by class name)
    de = fixture.debugElement.query(By.css('.temperature-component'));
    el = de.nativeElement;
  });

  it('should show device readings after getRecentTemperatures subscribe (fakeAsync)', fakeAsync(() => {
    fixture.detectChanges();
    expect(spyRecentTemps.calls.any()).toBe(true, 'getRecentTemperatures called');

    tick(1000);
    fixture.detectChanges();
    expect(el.textContent).toContain(stubDevices[0].temperatures[0].timestamp);
    expect(el.textContent).toContain(stubDevices[0].temperatures[0].value);
  }));

  it('should show device readings after getRecentTemperatures subscribe (async)', async(() => {
      fixture.detectChanges();
      expect(spyRecentTemps.calls.any()).toBe(true, 'getRecentTemperatures called');

      fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(el.textContent).toContain(stubDevices[0].temperatures[0].timestamp);
        expect(el.textContent).toContain(stubDevices[0].temperatures[0].value);
      });
  }));

  it('should show device readings after getRecentTemperatures subscribe (async) (done)', (done) => {
    async(() => {
      fixture.detectChanges();
      expect(spyRecentTemps.calls.any()).toBe(true, 'getRecentTemperatures called');

      fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(el.textContent).toContain(stubDevices[0].temperatures[0].timestamp);
        expect(el.textContent).toContain(stubDevices[0].temperatures[0].value);
      }).then(done);
    });
  });
});

fakeAsync fails with: 'Error: 1 timer(s) still in the queue.'

async fails with: 'Error: Cannot use setInterval from within an async zone test.'

async (done) fails with: 'Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.'

How would I go about testing components with a async service dependency?

From what I understand it might be something about the AsyncScheduler within the Rx library using Date().now instead of faked time (https://github.com/angular/angular/issues/10127). If so has this been fixed? Or anyone found a workaround?

I'm using angular-cli: 1.0.0-beta.16. node: 4.4.2. npm: 3.10.6. webpack 2.1.0-beta.22.

Answer 1

I had ..

import 'rxjs/add/operator/timeout';

return this.http[method](url, emit, this.options)
    .timeout(Config.http.timeout, new Error('timeout'))

Which was causing this error. I believe under the hood RXJS .timeout is calling setInterval.

I fixed this by switching ...

it('blah', async(() => {     

to

it('blah', (done) => {