CODEWITHSUNDEEP
angularunit-testingtypescriptkarma-jasminengx-bootstrap
Sanju
Sanju

Reputation: 1518

How to test a dropdown-toggle operation in angular 2 testing?

I'm trying to test the dropdown-toggle function. But I could not manage to get it to work. I have also imported BsDropdownModule to the spec file. Note: I'm using ngx-bootstrap.

Here's what I tried:

Html:

<div class="btnBox" dropdown placement="bottom right">
    <button class="btnIcon dropdown-toggle" dropdownToggle>
    </button>
    <ul class="btnOptionBox dropdown-menu dropdown-menu-right" *dropdownMenu>
       <li class="iconBtn" (click)="someFun()" type="button"><span>Edit</span></li>
       <li class="iconBtn" (click)="someFun1()" type="button"><span>Delete</span></li>
    </ul>
 </div>

Test Spec: 

it("Should show options when toggle option is clicked",() => {
     fixture.detectChanges();
     let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
     toggleButton[0].nativeElement.click();
     fixture.detectChanges();
     /*Unable to access li tag directly. That's why I have used it's parent*/
     let list = fixture.debugElement.queryAll(By.css('div.ellipsisBox'));  
     console.log(list[0]); /*Shows the list in the children array*/
     console.log(list[0].children);  /*Doesn't show the list*/
});

Can anyone suggest the right way to do it?

Upvotes: 4

Views: 5259

Answers (1)

Sanju
Sanju

Reputation: 1518

I have managed to solve this issue. It was just a silly mistake. The data in the list is populated by an asynchronous process. So I was supposed to use fakeAsync and tick() after clicking the dropdown button. The view was updated before the data was populated into the list. That caused the problem. Here's the fixed code:

it("Should show options when toggle option is clicked",fakeAsync(() => {
     fixture.detectChanges();
     let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
     toggleButton[0].nativeElement.click();
     tick();
     fixture.detectChanges();
     let list = fixture.debugElement.queryAll(By.css('ul.btnOptionBox'));  
     console.log(list[0]);
}));

Upvotes: 7

Related Questions