angular - Angular 测试中的 fakeAsync 和 async 有什么区别？

Question

我知道 tick() 函数使用了 fakeAsync()。而且我还可以将 fixture.whenStable().then() 与 async() 和 fakeAsync() 一起使用。

我想知道它们的确切用例。任何人都可以举例说明这一点。

注意:我想在这两种情况下都使用 Fake Service 或 Stub。

Answer 1

tl;博士

几乎在所有情况下，它们都可以互换使用，但最好使用 fakeAsync()/tick() 组合，除非您需要进行 XHR 调用，在这种情况下您必须使用 async()/whenStable() 组合，因为 fakeAsync() 不支持 XHR 调用。

---

在大多数情况下，它们可以互换使用。除了组件的外部模板和样式未内联编译到组件中以进行测试之外，我想不出有什么是需要的(即使用 SystemJS)。使用 SystemJS 时，XHR 调用是针对外部模板和样式进行的。当进行 XHR 调用时，不能使用 fakeAsync()。另一方面，当使用 Webpack 时，外部模板和样式会内联编译，因此您可以使用 fakeAsync()。

除此之外，我认为这是风格偏好的问题。我可以说的一件事是想象您需要进行多个异步调用，例如 this example。 .您需要嵌套的 fixture.whenStable() 调用，当它们变得如此深时，它们看起来会变得非常难看。

someAsyncAction();
fixture.whenStable().then(() => {
  fixture.detectChanges();
  expect(something)

  changeSomethingElseAsynchronously();      
  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(something);

    anotherAsyncAction();
    fixture.whenStable().then(() => {
      fixture.detectChanges()
      expect(somthingeElse)
    })
  })
})

如果没有所有那些 fixture.whenStable() 和看起来同步的代码，这可能看起来更干净(并且更容易推理)。

tick();
fixture.detectChanges();
expect(something)

changeSomethingAsynchronously()
tick();
fixture.detectChanges();
expect(somethingElse)

changeSomethingAsynchronously()
tick();
fixture.detectChanges();
expect(somethingElse);

我可能要补充的另一件事是 OCD我的一部分 总是 需要检查我在 fixture.whenStable() 中的调用是否被调用

fixture.whenStable().then(() => {
  expect(...)
  console.log('called...')
})

假设您忘记将测试包装在 async 中。否则，测试将在 fixture.whenStable 解决之前完成，您永远不会知道。看起来测试通过了，这是误报。实际发生的是断言从未被调用过。

出于这个原因，我实际上一直在远离 async。但是，如果您喜欢这种风格，并且相信自己总是将测试包装在 async 中，那么请坚持使用它。但是使用 fakeAsync，一切都被同步调用，所以断言不可能不被调用。