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

我知道tick()函数利用fakeAsync()。我也可以使用fixture.whenStable().then() with async() and fakeAsync()以及。

我想知道它们的确切用例。任何人都可以用例子解释这一点。

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

tl;dr

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

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

除此之外，我认为这是风格偏好的问题。我可以说的一件事是想象你需要进行多个异步调用，就像这个例子 https://stackoverflow.com/a/39796036/2587435。你需要嵌套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()s 和代码looks同步。

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

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

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

我可能要补充的另一件事是OCD https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_disorder我的一部分always需要检查我的电话是否在fixture.whenStable()叫做

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

想象一下您忘记将测试包装在async。如果没有这个，测试将在fixture.whenStable决议，你永远不会知道。看起来测试已通过，这是误报。实际发生的情况是，该断言从未被调用过。

出于这个原因，我实际上已经远离async。但如果您喜欢这种风格，并且相信自己，您总是将测试包含在内async，然后坚持下去。但与fakeAsync，所有内容都是同步调用的，因此断言不可能不被调用。