使用業力在Angular 2中進行單元測試

Question

我一直在嘗試理解angular的單元測試的工作原理，我仍然在試圖理解angular 2及其語法，這使得嘗試理解測試變得有些困難。或多或少，我嘗試遵循此處列出的示例： https： //angular.io/docs/ts/latest/guide/testing.html#!#testbed

在我的項目中，我有組件

工作流顯示組件：

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");
    }



}

這是我的HMTL模板頁面

work-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-->

所以我想測試一下幾件事情，首先是DOM即每個tr都具有適當的事件，即(dblclick)="openTask($event, task)"和opentask函數本身，不確定該怎么做是。

我嘗試的規格文件，我尚未編寫任何測試，這是我想要的。

工作流顯示。組件。規格：

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

以下是選擇所有表行的方法：

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

假設您在表元素上有一個類，則可能需要首先獲取正確的表（如果要渲染多個表），然后在該表中查詢表行

從那里，您應該能夠測試您期望的功能是否已分配給dblClick事件，但是我自己不需要這樣做，因此不確定確切的語法

我只需要檢查已生成預期的行數，例如：

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

如果您只想檢查第一行，就可以得到trs [0]等等，或者循環遍歷，無論如何，根據您的描述我不太清楚您需要做什么