FakeAsync / tick(Async / whenStable)vs detectChanges()

时间:2017-09-21 11:19:44

标签: angular unit-testing asynchronous

请你帮我区分这两件事。

根据我的理解,如果你只使用observable,你可以使用detectChanges()。因此,您可以直接更改组件属性或监视服务调用并返回一个observable,然后调用detectChanges(),更改将在html元素上可用。

但对于输入字段中的[(ngModel)],您需要调用tick()以便在html元素上呈现更改。

所以如果我知道他们做了什么以及何时使用了什么,我会很高兴。

提前致谢。

1 个答案:

答案 0 :(得分:6)

detectChanges

ViewRef上提供了方法detectChanges

class ViewRef extends ChangeDetectorRef {
  // inherited from core/ChangeDetectorRef
  markForCheck(): void   <-----------------------------
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

ViewRef是组件的基础表示。在编写测试而不是ViewRef时,会引入另一个抽象,即fixture

fixture = TestBed.createComponent(BannerComponent);

它包含类似于ViewRef的组件。

detectChanges方法运行底层组件的更改检测并执行以下操作:

  • 更新输入绑定属性
  • 更新DOM

和其他许多人。

要了解详情,请阅读Everything you need to know about change detection in Angular。因此,为了验证DOM中的更改或验证输入绑定,您需要运行detectChanges

Angular docs很好地描述了它:

  

tick函数是Angular测试实用程序之一和a   伪造同步的伴侣。你只能在伪同步体内调用它。

     

调用tick()模拟所有待处理的时间   异步活动完成,包括解析   此测试用例中的getQuote承诺。

使用ngModel,您需要调用它,因为在ngModel内创建的控件是异步注册的。以下是the article by Victor Savkin on forms的引用:

  

为了使它工作,NgModel不会同步添加表单控件 - 它   它是在微任务中完成的。在上面的例子中,三个ngModel将   安排三个微任务来添加扬声器,标题和highRating   控件。