I'm upgrading our Angular2 app to use rc4 and I started getting an error on my unit tests:
Cannot use setInterval from within an async zone test
My widget makes a request for data from its ngOnInit
method and puts up a loading indicator while that request is made. My mocked service returns some data after 1ms.
Here's a simplified version that exposes the problem
import { inject, async, TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {Http, Headers, RequestOptions, Response, HTTP_PROVIDERS} from '@angular/http';
import {provide, Component} from '@angular/core';
import {Observable} from "rxjs/Rx";
class MyService {
constructor(private _http: Http) {}
getData() {
return this._http.get('/some/rule').map(resp => resp.text());
}
}
@Component({
template: `<div>
<div class="loader" *ngIf="_isLoading">Loading</div>
<div class="data" *ngIf="_data"></div>
</div>`
})
class FakeComponent {
private _isLoading: boolean = false;
private _data: string = '';
constructor(private _service: MyService) {}
ngOnInit() {
this._isLoading = true;
this._service.getData().subscribe(data => {
this._isLoading = false;
this._data = data;
});
}
}
describe('FakeComponent', () => {
var service = new MyService(null);
var _fixture:ComponentFixture<FakeComponent>;
beforeEach(async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) => {
return tcb
.overrideProviders(FakeComponent, [
HTTP_PROVIDERS,
provide(MyService, {useValue: service}),
])
.createAsync(FakeComponent)
.then((fixture:ComponentFixture<FakeComponent>) => {
_fixture = fixture;
});
})));
it('Shows loading while fetching data', (cb) => {
// Make the call to getData take one ms so we can verify its state while the request is pending
spyOn(service, 'getData').and.returnValue(Observable.of('value').delay(1));
_fixture.detectChanges();
expect(_fixture.nativeElement.querySelector('.loader')).toBeTruthy();
// Wait a few ms, should not be loading
setTimeout(() => {
_fixture.detectChanges();
expect(_fixture.nativeElement.querySelector('.loader')).toBeFalsy();
cb();
}, 10);
});
});
This was working fine in Angular2 rc1 and it throws an error in rc4, any suggestions?
Aucun commentaire:
Enregistrer un commentaire