title: Running Angular2 tests that call setTimeout errors with "Cannot use setInterval from within an async zone test"
body: <p>I'm upgrading our Angular2 app to use rc4 and I started getting an error on my unit tests:</p>
  
  <blockquote>
    <p>Cannot use setInterval from within an async zone test</p>
  </blockquote>
  
  <p>My widget makes a request for data from its <code>ngOnInit</code> method and puts up a loading indicator while that request is made. My mocked service returns some data after 1ms.</p>
  
  <p>Here's a simplified version that exposes the problem</p>
  
  <pre><code>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 =&gt; resp.text());
      }
  }
  
  @Component({
      template: `&lt;div&gt;
        &lt;div class="loader" *ngIf="_isLoading"&gt;Loading&lt;/div&gt;
        &lt;div class="data" *ngIf="_data"&gt;{{_data}}&lt;/div&gt;
      &lt;/div&gt;`
  })
  class FakeComponent {
      private _isLoading: boolean = false;
      private _data: string = '';
  
      constructor(private _service: MyService) {}
  
      ngOnInit() {
          this._isLoading = true;
          this._service.getData().subscribe(data =&gt; {
              this._isLoading = false;
              this._data = data;
          });
      }
  }
  
  describe('FakeComponent', () =&gt; {
      var service = new MyService(null);
      var _fixture:ComponentFixture&lt;FakeComponent&gt;;
  
      beforeEach(async(inject([TestComponentBuilder], (tcb:TestComponentBuilder) =&gt; {
          return tcb
              .overrideProviders(FakeComponent, [
                  HTTP_PROVIDERS,
                  provide(MyService, {useValue: service}),
              ])
              .createAsync(FakeComponent)
              .then((fixture:ComponentFixture&lt;FakeComponent&gt;) =&gt; {
                  _fixture = fixture;
              });
      })));
  
      it('Shows loading while fetching data', (cb) =&gt; {
          // Make the call to getData take one ms so we can verify its state while the request is pending
          // Error occurs here, when the widget is initialized and sends out an XHR
          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
          // This doesn't seem to be the problem
          setTimeout(() =&gt; {
              _fixture.detectChanges();
              expect(_fixture.nativeElement.querySelector('.loader')).toBeFalsy();
              cb();
          }, 10);
      });
  });
  </code></pre>
  
  <p>This was working fine in Angular2 rc1 and it throws an error in rc4, any suggestions?</p>
  
  <p>Also, there are no errors if you use a <code>setTimeout</code> directly from the test itself</p>
  
  <pre><code>        fit('lets you run timeouts', async(() =&gt; {
              setTimeout(() =&gt; {
                  expect(1).toBe(1);
              }, 10);
          }));
  </code></pre>