title: Angular testing: using fakeAsync with async/await
body: <p>Angular Material provides <a href="https://material.angular.io/guide/using-component-harnesses" rel="nofollow noreferrer">component harnesses</a> for testing, which lets you interact with their components by <code>await</code>ing promises, like this:</p>
  <pre class="lang-js prettyprint-override"><code>  it('should click button', async () =&gt; {
      const matButton = await loader.getHarness(MatButtonHarness);
      await matButton.click();
      expect(...);
    });
  </code></pre>
  <p>But what if the button click triggers a delayed operation? Normally I would use <code>fakeAsync()</code>/<code>tick()</code> to handle it:</p>
  <pre class="lang-js prettyprint-override"><code>  it('should click button', fakeAsync(() =&gt; {
      mockService.load.and.returnValue(of(mockResults).pipe(delay(1000)));
      // click button
      tick(1000);
      fixture.detectChanges();
      expect(...);
    }));
  </code></pre>
  <p>But is there any way I can do both in the same test?</p>
  <p>Wrapping the <code>async</code> function inside <code>fakeAsync()</code> gives me &quot;Error: The code should be running in the fakeAsync zone to call this function&quot;, presumably because once it finishes an <code>await</code>, it's no longer in the same function I passed to <code>fakeAsync()</code>.</p>
  <p>Do I need to do something like this -- starting a fakeAsync function after the await? Or is there a more elegant way?</p>
  <pre class="lang-js prettyprint-override"><code>  it('should click button', async () =&gt; {
      mockService.load.and.returnValue(of(mockResults).pipe(delay(1000)));
      const matButton = await loader.getHarness(MatButtonHarness);
  
      fakeAsync(async () =&gt; {
        // not awaiting click here, so I can tick() first
        const click = matButton.click(); 
        tick(1000);
        fixture.detectChanges();
        await click;
        expect(...);
      })();
    });
  </code></pre>