title: Angular2 - Testing call with a debounceTime
body: <p>I'm using a form control that detects changes using <code>valueChanges</code> and <code>debounceTime</code>. I'm writing a test that spies on <code>itemService</code> to check if the <code>update</code> method is being called. If I remove the <code>debounceTime</code> from the form control the test works fine.</p>
  
  <p>Here's the form control in the component.</p>
  
  <pre><code>this.itemControl.valueChanges.debounceTime(300).subscribe(response =&gt; {
     this.itemService.update(response);
  });
  </code></pre>
  
  <p>Here's the test</p>
  
  <pre><code>it('should do stuff',
      inject([ItemService], (itemService) =&gt; {
        return new Promise((res, rej) =&gt;{
          spyOn(itemService, 'update');
          let item = {
              test: 'test'
          };
          fixture.whenStable().then(() =&gt; {
            let itemControl = new FormControl('test');
            fixture.componentInstance.itemControl = itemControl;
            fixture.autoDetectChanges();
  
            fixture.componentInstance.saveItem(item);
            expect(itemService.update).toHaveBeenCalled();
  
  })}));
  </code></pre>
  
  <p>Here's the component's saveItem function</p>
  
  <pre><code>saveItem(item): void {
      this.itemControl.setValue(item);
  }
  </code></pre>
  
  <p>Like I said, if I remove <code>debounceTime</code> from the form control the test executes fine, but I can't do that. I've tried adding a <code>tick()</code> call before the <code>expect</code> call but I just get this error</p>
  
  <pre><code>Unhandled Promise rejection: The code should be running in the fakeAsync zone to call this function ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: The code should be running in the fakeAsync zone to call this function Error: The code should be running in the fakeAsync zone to call this function
  </code></pre>