httpTestingController.match doesn't work for multiple requests in a pipe

[amejiarosario]

🐞 bug report

Affected Package

The issue is caused by package @angular/common/http/testing

Is this a regression?

No

Description

httpTestingController.match doesn't work for multiple requests in a pipeline.

    httpClient.get<Data[]>(testUrl)
      .pipe(
        mergeMap(() => range(0, 2)),
        mergeMap(() => httpClient.get<Data[]>(testUrl)),
      )
      .subscribe(d => expect(d.length).toEqual(0, 'should have no data')); 

    const requests = httpTestingController.match(testUrl);
    console.log({requests}); // <--- 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

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-http-testing2?file=src%2Ftesting%2Fhttp-client.spec.ts

🔥 Exception or Error

Error: Expected no open requests, found 2: GET /data, GET /data

🌍 Your Environment

Angular Version:

Angular CLI: 8.0.6
Node: 10.16.3
OS: darwin x64
Angular: 8.0.1
...

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.6
@angular/cli                      8.0.6
@angular/compiler-cli             8.0.3
@angular/language-service         8.0.3
@ngtools/webpack                  8.3.23
@schematics/angular               8.0.6
@schematics/update                0.800.6
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.39.2

Anything else relevant?

It also happens on angular 9.1.11 as you can see in the stackblitz.

[alxhub]

The issue is actually in the code triggering the requests:

httpClient.get<Data[]>(testUrl)
  .pipe(
    mergeMap(data => range(0, 2)),
    mergeMap(() => httpClient.get<Data[]>(testUrl)),
  )

I changed the first call to mergeMap slightly to highlight the fact that the argument to the merge function is the data from the first request. The Observable sequence described here waits for the first request to finish, then triggers two more based on the results.

So for example, this will work:

const firstRequest = httpTestingController.expectOne(testUrl);
firstRequest.flush([]);

const requests = httpTestingController.match(testUrl);
console.log({requests}); // now this will log the second two

requests[0].flush([]);
requests[1].flush([]);

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}