angular - 如何使用 Angular 的 HttpTestingController 检查是否已向同一个 API 端点发出 2 个 HTTP 请求？

Question

我正在使用 Angular 5 和 Jasmine 来测试我的 HTTP 服务。

我的 HTTP 服务将对同一端点进行 2 次 HTTP 调用，作为方法的一部分。我想检查该服务是否进行了 2 次 HTTP 调用。

已经有一个非常有用的 expectOne("route").flush([]); 方法，但理想情况下我想要 expectTwo("route").flush([]) ; 或 expect("route", 2).flush([]);

这是一个示例测试:

it("getApprovers called twice with over 5 seconds apart makes two calls",
    () => {
        userService.getApprovers().subscribe(x => expect(x.length).toBe(0));

        setTimeout(() => userService.getApprovers().subscribe(x => expect(x.length).toBe(0)), 5001);

        // assert that 2 calls are made here
    });

有什么方法可以断言调用了 2 次？

提前致谢

Answer 1

使用 Jasmine，您可以spyOn 函数并使用 expect(spiedOnFunction.calls.count()).toEqual(something) 检查调用计数。

您想在 5 秒后再次测试调用，这恰好是 Jasmine 默认测试超时，因此 jasmine.DEFAULT_TIMEOUT_INTERVAL 必须在 中增加到超过 5 秒beforeEach.

最后，因为您正在使用带有 setTimeout 的异步调用，所以您必须在调用完成后测试预期。如果您在 setTimeout 完成之前调用您的 expects，您的测试将不会通过。以下是如何使用 Promise、async 和 await 来做到这一点。

// dummy code under test
const userService = {
  getApprovers: function() {
    // dummy function
  }
};

describe("Jasmine test with Promise, async, await, and over 5 seconds for async call", () => {
  beforeEach(() => {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 6000;
  });

  it("getApprovers called twice with over 5 seconds apart makes two calls", async () => {
    // Arrange
    spyOn(userService, "getApprovers");

    // Act
    userService.getApprovers();
    await invokeFunctionAfterFiveSeconds(userService.getApprovers);

    // Assert
    expect(userService.getApprovers.calls.count()).toEqual(2);
  });
});

function invokeFunctionAfterFiveSeconds(func) {
  return new Promise(resolve => {
    setTimeout(() => {
      func();
      resolve();
    }, 5001);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.3.14/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.0.0/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.0.0/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.0.0/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.0.0/jasmine.min.css" rel="stylesheet"/>

我不确定你对订阅和长度检查做了什么，所以我把它拿出来简化事情，但如果这对测试很关键，就把它加回来。