CODEWITHSUNDEEP
angulartypescriptkarma-jasmine
Snedden27
Snedden27

Reputation: 1920

Unit testing in Angular 2 using karma

I have been trying to understand how unit testing works in angular , I am still trying to understand angular 2 and its syntax which is making trying to understand testing a little more difficult.More or less I try to follow the examples listed here :https://angular.io/docs/ts/latest/guide/testing.html#!#testbed

In my project I have component

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



}

This is my HMTL template 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 to avoid been clear-->

So I want to test basically couple of things ,firstly that the DOM i.e each tr has the appropriate event i.e (dblclick)="openTask($event, task)" and the opentask function itself ,not sure what the exact way to go about is.

My attempted spec file,I didn't write any test yet ,This is where I am wanting..

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

Upvotes: 1

Views: 3020

Answers (1)

zanther
zanther

Reputation: 529

Here's how to select all table rows:

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

You'll probably want to first get the correct table though (if you are rendering multiple tables), assuming you have a class on your table element, and then query that table for the table rows

From there you should be able to test that your expected functions are assigned to the dblClick events, but I've not needed to do that myself so not sure of exact syntax

I only needed to check an expected number of rows had been generated - e.g.:

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

If you're wanting to check just the first row you could get trs[0] and so on, or loop through or whatever, I can't quite tell what you're needing to do by your description

Upvotes: 1

Related Questions