Trying to grasp the concept of unit testing in Angular has been quite a challenge for me, especially since I am still navigating through Angular 2 and its syntax. Understanding testing becomes even more intricate. I attempt to follow the examples provided at this link: https://angular.io/docs/ts/latest/guide/testing.html#!#testbed
Within my project, there exists a component:
workflow-display.component:
import { Component, Input } from '@angular/core';
//other imports hidden
@Component({
selector: 'workflow-display',
template: require('./workflow-display.component.html')
})
export class WorkflowDisplayComponent implements OnInit {
taskQuery: string = 'process=workstream&taskStatus=RUNNING'; // query parameters for tasks web service
workbenchTaskPage: string = 'wsIndex'; // page used to open tasks
tasks: IGrcTask[];
currentTask: IGrcTask;
@Input()
environment: String;
//some properties may be hidden for simplicity
constructor(private _workflowService: WorkflowService) {
}
//some other functions hidden
//Function to be tested, called on double click event in the HTML
openTask(event: any, task: any) {
window.open(this.environment + this.workbenchTaskPage + "?taskId=" + task.taskId + "&activitiWorkflow=true");
}
}
This is the HTML template for the page:
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 for brevity-->
The goal is to test if each tr element in the DOM has the correct event defined as
(dblclick)="openTask($event, task)"In my attempted spec file, no tests have been written yet:
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;
let el: HTMLElement;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ WorkflowDisplayComponent ],
});
fixture = TestBed.createComponent(WorkflowDisplayComponent);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('good way to select the tr??'));
el = de.nativeElement;
});
});