title: How to test multiple requests in pipeline in Angular?
body: <p>I want to test 3 requests done inside a pipeline. Simplified example:</p>
  <pre class="lang-js prettyprint-override"><code>    httpClient.get&lt;Data[]&gt;(testUrl)
        .pipe(
          mergeMap(() =&gt; range(0, 2)),
          mergeMap(() =&gt; httpClient.get&lt;Data[]&gt;(testUrl)),
        )
  </code></pre>
  <p>I'm using the <a href="https://angular.io/guide/http#testing-http-requests" rel="nofollow noreferrer">official recommendation: HttpTestingController</a>. It works fine if I have the requests one after another with <code>httpTestingController.match</code>. However, that's not how my real app is written. It's using pipes.</p>
  <pre class="lang-js prettyprint-override"><code>    let testData: Data[] = [
        { name: 'bob' }, { name: 'carol' },
        { name: 'ted' }, { name: 'alice' }
      ];
  
      // Make three requests in a row
      httpClient.get&lt;Data[]&gt;(testUrl)
        .subscribe(d =&gt; expect(d.length).toEqual(0, 'should have no data'));
  
      httpClient.get&lt;Data[]&gt;(testUrl)
        .subscribe(d =&gt; expect(d).toEqual([testData[0]], 'should be one element array'));
  
      httpClient.get&lt;Data[]&gt;(testUrl)
        .subscribe(d =&gt; expect(d).toEqual(testData, 'should be expected data'));
  
      // get all pending requests that match the given URL
      const requests = httpTestingController.match(testUrl);
      expect(requests.length).toEqual(3);
  
      // Respond to each request with different results
      requests[0].flush([]);
      requests[1].flush([testData[0]]);
      requests[2].flush(testData);
  </code></pre>
  <p>How to make httpTestingController.match work with multiple HTTP requests inside a pipe?</p>
  <p>This is what I have tried so far and here is the <a href="https://stackblitz.com/edit/angular-http-testing2?file=src%2Ftesting%2Fhttp-client.spec.ts" rel="nofollow noreferrer">reproducible example</a>:</p>
  <pre class="lang-js prettyprint-override"><code>    httpClient.get&lt;Data[]&gt;(testUrl)
        .pipe(
          mergeMap(() =&gt; range(0, 2)),
          mergeMap(() =&gt; httpClient.get&lt;Data[]&gt;(testUrl)),
        )
        .subscribe(d =&gt; expect(d.length).toEqual(0, 'should have no data')); 
  
      const requests = httpTestingController.match(testUrl);
      console.log({requests}); // &lt;--- why only one instead of 3??
  
      requests[0].flush([]);
      // requests[1].flush([]); // This is undefined. How do I flush the other two requests?
      // requests[2].flush([]);  // undefined. 
  
      // Error: Expected no open requests, found 2: GET /data, GET /data
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-http-testing2?file=src%2Ftesting%2Fhttp-client.spec.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-http-testing2?file=src%2Ftesting%2Fhttp-client.spec.ts</a></p>