Unit-Tests in Angular 2 mit Karma

Question

Ich habe versucht zu verstehen, wie Unit-Tests in eckigen funktioniert, ich versuche immer noch zu verstehen, eckige 2 und seine Syntax, die das Testen ein wenig schwieriger zu verstehen macht.Mehr oder weniger versuchen Sie die hier aufgeführten Beispiele folgen: https://angular.io/docs/ts/latest/guide/testing.html#!#testbed

In meinem Projekt habe ich Komponente

Workflow-display.component:

import { Component,Input} from '@angular/core'; 
//some other imports hidden 

@Component({ 
    selector: 'workflow-display', 
    template: require('./workflow-display.component.html') 
}) 
export class WorkflowDisplayComponent implements OnInit { 

    taskQuery: string = 'process=workstream&taskStatus=RUNNING'; // the query parameters to pass to the tasks web service 
    workbenchTaskPage: string = 'wsIndex'; // workbench page to use to open tasks 
    tasks: IGrcTask[]; 
    currentTask: IGrcTask; 
    @Input() 
    environment: String; 
    //some properties may hidden due to being irrelevant to the question 




    constructor(private _workflowService: WorkflowService) { 

    } 

    //some other functions hidden 

    //called on double click event in the html dom,THIS IS the function I want to test 
    openTask(event: any, task: any) { 
     //this.enviroment is initiliaze/bound by app.component through one way binding 
     window.open(this.environment + this.workbenchTaskPage + "?taskId=" + task.taskId + "&activitiWorkflow=true"); 
    } 



} 

Dies ist mein HMTL-Vorlage Seite

Workflow-display.component.html:

<!--container div ,table and other HTML hidden--> 

        <tbody *ngIf='!tasks || tasks.length == 0'> 
         <tr> 
          <td align="left" colspan="8">There are no tasks.</td> 
         </tr> 
        </tbody> 

        <tbody *ngIf='(taskMode == "workorder") && tasks && tasks.length'> 
         <ng-container *ngFor='let task of tasks; let i=index'> 
          <tr (dblclick)="openTask($event, task)" 
          id="workspace_table_wo_{{ task.workOrderId }}_task_{{ task.taskId }}_workorder" 
          [class.table-active]="isSelected(task)"> 
    <!--remaining html hidden to avoid been clear--> 

Deshalb möchte ich im Grunde paar Dinge zu testen, zum einen, dass die DOM dh jeder tr das entsprechende Ereignis dh (dblclick)="openTask($event, task)" und die Open Funktion hat sich nicht sicher, was Der genaue Weg ist.

Meine versucht Spec-Datei, ich jeden Test noch nicht schreiben, Dies ist, wo ich will mich ..

Workflow-display.component.spec.ts:

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { WorkflowDisplayComponent } from './workflow-display.component'; 

describe('WorkflowDisplayComponent (inline template)',() => { 

    let comp: WorkflowDisplayComponent; 
    let fixture: ComponentFixture<WorkflowDisplayComponent>; 
    let de:  DebugElement;  //Element to test 
    let el:  HTMLElement;  //HMTL of element 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ WorkflowDisplayComponent ], // declare the test component 
     }); 

     fixture = TestBed.createComponent(WorkflowDisplayComponent); 

     comp = fixture.componentInstance; // BannerComponent test instance 

     // query for the title <h1> by CSS element selector 
     de = fixture.debugElement.query(By.css('good way to select the tr??')); 
     el = de.nativeElement; 
    }); 
}); 

Answer 1

Hier ist, wie wählen Sie alle Tabellenzeilen:

let trs = fixture.nativeElement.querySelectorAll('tr'); 

Sie werden wahrscheinlich wollen jedoch zuerst die richtige Tabelle (wenn Sie mehrere Tabellen-Rendering), vorausgesetzt, Sie sind eine Klasse auf dem Tisch Element haben, und dann Abfrage dass Tabelle für die Tabellenzeilen

Von dort aus sollen Sie in der Lage sein zu überprüfen, ob Ihre erwarteten Funktionen zu den DBLCLICK Ereignissen zugeordnet sind, aber ich habe nicht tun muß, dass ich so nicht sicher, ob die genauen Syntax

I nur benötigt eine erwartete Anzahl von Zeilen zu überprüfen hatte generiert - zB:

expect(trs).toBeTruthy(); 
expect(trs.length).toBe(3); 

Wenn Sie nur die erste Zeile überprüfen wollen, sind Sie trs [0] und so weiter, oder Schleife durch oder was auch immer bekommen konnte, Ich kann nicht genau sagen, was Sie tun müssen durch Ihre Beschreibung