Angular 2 setTimeout e2e测试失败

Question

我有一个可以在“ afterViewChecked”生命周期中计算属性的组件，因此我需要使用setTimeout-应用更改，否则会出错。 （ 角度4基于视图的更改 ）

我只是发现了setTimeout， 无论在我的应用程序中什么位置导致量角器抛出超时消息。 -这说

失败：waitig超时以完成异步角度任务.....-这可能是因为当前页面不是角度应用程序”，

我该怎么办？ -有时您只需要使用setTimeout ...

Answer 1

检测DOM变化的另一种方法是通过MutationObserver 。 实例化构造函数中的类，在其中定义更改要执行的操作，然后在ngAfterViewInit()进行观察。 运行所需的计算功能时，您可以停止观察，以便在发生进一步更改时该功能不会继续触发。

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `<div #element></div>`
})
export class TestComponent implements AfterViewInit {
  @ContentChild('element') element : ElementRef;
  this.observer: MutationObserver;

  constructor() {
    this.observer = new MutationObserver(mutations => {
      this.testFunction();
    });
  }

  ngAfterViewInit() {
    this.observer.observe(this.element.nativeElement, { attributes: true, childList: true, characterData: true });
  }

  testFunction() {
    this.observer.disconnect(); // We no longer want to observe
    alert('Test!');
  }

}

Answer 2

您需要将$ timeout替换为$ interval，它将起作用。 “如果您的页面使用$ timeout进行轮询，则量角器将无法告诉您页面何时准备就绪。请考虑使用$ interval而不是$ timeout。”

他们的官方文档： http : //www.protractortest.org/#/system-setup https://github.com/marcorinck/angular-growl/issues/43