Question

我一直试图理解单元测试在角度方面是如何工作的，我仍在尝试理解角度2及其语法，这使得尝试理解测试更加困难。或多或少我尝试按照此处列出的示例：https://angular.io/docs/ts/latest/guide/testing.html#!#testbed

在我的项目中，我有组件

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



}

这是我的HMTL模板页面

工作流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函数本身，不确定具体的方法是什么。

我试过的spec文件，我还没有写任何测试，这就是我想要的地方..

工作流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

以下是如何选择所有表格行：

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

您可能希望先获取正确的表（如果要渲染多个表），假设您的表元素上有一个类，然后查询该表以获取表行

从那里你应该能够测试你的期望功能被分配给dblClick事件，但我自己不需要这样做，所以不确定语法是否正确

我只需要检查已生成的预期行数 - 例如：

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

如果你想要检查第一行你可以得到trs [0]等等，或者循环或其他什么，我不能完全告诉你需要做什么按您的描述

使用业力在Angular 2中进行单元测试

1 个答案: