title: How to test debounceTime in angular 4 form
body: <p>I have a field on a form which is a search filter. When user enters a value in that search field, new results are fetched and view is filter. Below is the form</p>
  
  <pre><code>&lt;form [formGroup]="form" &gt;
  &lt;span&gt;Enter State:&lt;/span&gt;&lt;input id="txtState" formControlName="stateControl"  type="text" /&gt;
  &lt;div&gt;// data&lt;div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>component code</p>
  
  <pre><code> const stateCtrl=this.form.get("stateControl");
  stateCtrl.valueChanges.debounceTime(2000).subscribe((data)=&gt;//serviceCall)
  </code></pre>
  
  <p>test.ts</p>
  
  <pre><code> let state=component.form.controls["stateControl"];
        state.setValue("Texas");
  
        fixture.detectChanges();
              fixture.whenStable()
              .then(()=&gt;
              {
                fixture.detectChanges();
                expect(component.customers.length).toBe(5)
              })
  </code></pre>
  
  <p>The issue is, this test is always successful. No matter what is the value in .toBe(). the code is not waiting for debounce. How to write a test for debounce in angular 4</p>