I have a basic ng2 component that interacts with a service to retrieve carousel items and automatically cycle through them using setInterval. Everything functions properly, but I encounter the error "Cannot use setInterval from within an async test zone" when running Jasmine tests.
Even after attempting to wrap the setInterval call in this.zone.runOutsideAngular(() => {...}), the error persists. Switching the test to run in fakeAsync zone leads to another error stating XHR calls are not allowed within fakeAsync test zone (which is understandable).
How can I integrate both XHR calls and the interval in my tests without encountering these issues? My project is based on ng2 rc4 and was generated by angular-cli. Thank you for any help in advance.
The code snippet from the component is shown below:
constructor(private carouselService: CarouselService) {
}
ngOnInit() {
this.carouselService.getItems().subscribe(items => {
this.items = items;
});
this.interval = setInterval(() => {
this.forward();
}, this.intervalMs);
}
And here is the relevant part of the Jasmine spec:
it('should display carousel items', async(() => {
testComponentBuilder
.overrideProviders(CarouselComponent, [provide(CarouselService, { useClass: CarouselServiceMock })])
.createAsync(CarouselComponent).then((fixture: ComponentFixture<CarouselComponent>) => {
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
// add your expectations here;
});
}));