Angular 2 setTimeout e2e Tests schlägt fehl

Question

Ich habe eine Komponente, die Eigenschaften in der "afterViewChecked" lifeCycle berechnen, also muss ich setTimeout verwenden - für die Änderungen gelten oder sonst bekomme ich Fehler. (Angular 4 Changes based on view)

Ich habe gerade herausgefunden, dass setTimeout, egal wo in meiner Anwendung verursacht Winkelmesser Zeitüberschreitungsnachricht zu werfen. - das sagt

fehlgeschlagen: Timed waitig für asynchrone Winkelaufgaben zu beenden ..... - dies sein kann, weil die aktuelle Seite nicht Winkel Anwendung“ist,

Was soll ich tun? - manchmal müssen Sie nur setTimeout verwenden ...

Answer 1

Eine andere Möglichkeit, DOM-Änderungen zu erkennen, ist über MutationObserver. Instantiieren Sie die Klasse im Konstruktor, wo Sie definieren, was bei einer Änderung zu tun, und beobachten Sie dann in ngAfterViewInit() Sie laufen die Berechnungsfunktion, die Sie wollen, können Sie dann aufhören zu beobachten, so dass der Spaß ction wird nicht weiter feuern, wenn weitere Änderungen auftreten.

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

Sie müssen $ Timeout mit $ Intervall ersetzen und es wird funktionieren. "Wenn Ihre Seite $ timeout für die Abfrage verwendet, kann der Winkelmesser nicht erkennen, wann Ihre Seite fertig ist. Verwenden Sie $ interval anstelle von $ timeout."

Ihre offiziellen Dokumente: http://www.protractortest.org/#/system-setup https://github.com/marcorinck/angular-growl/issues/43