Angular 中的单元测试 Http 调用

Question

我正在使用 Angular 9+。

虽然 unit testing 服务实现了 httpClient 并发出 http 请求，但我将这个 documentation 由 Angular Team 引用。我遵循了这个过程，并且在单元测试中也取得了成功。 以下是代码（取自文档）：

it('can test HttpClient.get', () => {
  const testData: Data = {name: 'Test Data'};

  // Make an HTTP GET request
  httpClient.get<Data>(testUrl)
    .subscribe(data =>
      // When observable resolves, result should match test data
      expect(data).toEqual(testData)
    );

  // The following `expectOne()` will match the request's URL.
  // If no requests or multiple requests matched that URL
  // `expectOne()` would throw.
  const req = httpTestingController.expectOne('/data');

  // Assert that the request is a GET.
  expect(req.request.method).toEqual('GET');

  // Respond with mock data, causing Observable to resolve.
  // Subscribe callback asserts that correct data was returned.
  req.flush(testData);

  // Finally, assert that there are no outstanding requests.
  httpTestingController.verify();
});

我的问题是：

• 既然http calls 是asynchronous，为什么文档中提供的任何测试中都没有编写fakeAsync()？就像通常在单元测试 asynchronous methods (setTimeout() , setInterval()) 时一样，角度提供的文档表明我们需要一个假的 zone.js，它将所有异步请求附加到一个数组，然后我们使用 flushMicrotasks( ) 或 tick() 以进一步方便调用。

• 当req.flush() 被调用时，控制流是如何发生的？我们调用了函数httpClient.get<Data>(testUrl)，它订阅了 observable，并且 flush 用于解决它。所以测试规范中的整个流程都是异步/同步发生的？

Answer 1

rxjs 的特性允许您处理流，而无需考虑它们是同步的还是异步的。用于测试 http 客户端的东西是同步的，以便于测试。 httpClient 以异步代码在测试中表现同步的方式制作，因为每个“异步”工作都基于 rxjs 流。流 api 足够强大，可以制作异步逻辑 - 在某些情况下同步。通过 js 世界中的异步，通常在执行此代码之前，js 执行调用堆栈应该为空

req.flush(...); 将在这一行中调用组件内部的订阅处理程序。就在它之后，您可以断言该处理程序的结果