Angular测试中fakeAsync和async有什么区别? [英] What is the difference between fakeAsync and async in Angular testing?

问题描述

我知道tick()功能使用了fakeAsync().而且我也可以将fixture.whenStable().then()与async()和fakeAsync()一起使用.

I know that tick() function utilizes fakeAsync(). And also I can use fixture.whenStable().then() with async() and fakeAsync() as well.

我想知道两者的确切用例.谁能举例说明这一点.

I want to know the exact use case for both of them. Can anyone explain this with examples.

注意:我想在两种情况下都使用假服务或存根.

推荐答案

tl; dr

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

tl;dr

In almost all cases, they can be used interchangeably, but using fakeAsync()/tick() combo is preferred unless you need to make an XHR call, in which case you MUST use async()/whenStable() combo, as fakeAsync() does not support XHR calls.

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

For the most part they can be used interchangeably. I can't think of anything off the top of my head in which one is required over the other, except for the case of components whose external templates and styles are not compiled inline in to the component for testing (i.e. using SystemJS). When using SystemJS, XHR calls are made for the external templates and styles. fakeAsync() cannot be used when there are XHR calls made. On the other hand, when using Webpack, the external templates and styles get compiled inline, so you can use fakeAsync().

除此之外，我认为这是样式偏好的问题.我可以说的一件事是，假设您需要进行多个异步调用，例如此示例.您需要嵌套的fixture.whenStable()调用，当它们变得很深时，它们看起来可能很难看.

Other than that, I think it's a matter of style preference. One thing I can say is imagine you need to make multiple calls that are asynchronous, like in this example. You need nested fixture.whenStable() calls, which can start to look to pretty ugly when they get so deep.

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()和代码同步的话，这看起来会更干净(更容易推理).

This might look cleaner (and easier to reason about) without all those fixture.whenStable()s and code that looks synchronous.

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

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

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

我可能要添加的另一件事是我的 OCD 的一部分总是需要检查我在fixture.whenStable()中的呼叫是否被呼叫

Another thing I might add is the OCD part of me always needs to check that my calls in the fixture.whenStable() is called

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

想象一下，您忘记将测试包装在async中.否则，测试将在fixture.whenStable分辨率之前完成，您将永远不会知道.看起来像通过了测试，这是一个误报.实际发生的是断言甚至从未被调用过.

Imagine that you forgot to wrap the test in async. Without that, the test will complete before the fixture.whenStable resolution, and you will never know it. It will look like the test passed, which is a false positive. What actually happened is that the assertion was never even called.

基于这个原因，我实际上已经远离了async.但是，如果您喜欢该样式，并相信自己始终将测试包装在async中，则请坚持使用.但是使用fakeAsync时，所有内容都被同步调用，因此断言不会被调用.

For this reason, I've actually been moving away from async. But if you like that style, and trust yourself that you always wrap the test in async, then stick with it. But with fakeAsync, everything is called synchronously, so there's no chance of the assertion not being called.

这篇关于Angular测试中fakeAsync和async有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！