Jasmine Vorschau Website mit eckigen 2 CLI

Question

Ich bin sehr neu zu Jasmin Tests mit Angular 2 CLI und schreibe meine ersten Tests nach der Testanleitung auf angular.io.

Wenn ich zu den Live-Beispielen auf Plunker gehe, werden alle Testergebnisse sehr schön in index.html gezeigt, aber wenn ich Tests mit meiner eckigen CLI-Anwendung durchführe, öffnet der Browser Karma, von wo ich auf die Debug-Schaltfläche klicken kann . Im nächsten Schritt klicke ich auf F12 für die Developer Tools-Konsole.

Hier kann ich die Ergebnisse aller meiner Tests zusammen mit Konsolenprotokollen sehen, und es gibt mir keinen sehr klaren Überblick, speziell wenn ich bald eine Menge Tests durchführen werde.

Ich bin sicher, dass ich einige Informationen darüber vermisse, aber ich habe nicht in der Lage, mehr darüber zu finden.

Alle Anleitungen, die ich gefunden habe, machen einige Tests und führen sie in der Konsole aus, aber für den Fall, dass ich eine große Anwendung testen muss, muss es eine andere Möglichkeit geben, einen guten Überblick ohne andere Konsoleninformationen zu haben .

Was fehlt mir?

Answer 1

Wenn Sie einen Test auf Komponente zum Beispiel den Test erstellen die Vorlage der Komponente.

Es macht Sie in der Lage zu klicken auf Schaltfläche oder überprüfen, wie viel Element Sie in * ngFor Anweisung haben.

Sie können Element erhalten von:

let myComponentElement = fixture.nativeElement 

Sie können Element verwenden Ihr Element zum Beispiel zu testen:

die Taste:

<button id="my-test-button" (click)="myTestFunction()>ClickMe</button> 

Prüfung der Taste:

it("click on my_test_button should call myTestFunction() ",()=> { 
    spyOn(componentInstance.myTestFunction); 
    let my_test_button = myComponentElement.querySelector("my-test-button") 
    my_test_button.click(); 
    fixture.detectChanges(); 
    expect(componentInstance.myTestFunction).toHaveBeenCall(); 
}) 

Letztes Ding, Sie können tatsächlich sehen, Sie Vorlage zu testen, indem Sie "dubugger" auf Ihren Test und klicken Sie auf "f12" auf Chrom.

zum Beispiel:

it("click on my_test_button should call myTestFunction() ",()=> { 
     spyOn(componentInstance.myTestFunction); 
     let my_test_button = myComponentElement.querySelector("my-test-button") 
     **debugger;** 
     my_test_button.click(); 
     fixture.detectChanges(); 
     expect(componentInstance.myTestFunction).toHaveBeenCall(); 
    }) 

shuold Sie Ihre Komponentenvorlage sehen beim Debuggen.

Viel Glück !!!