如何在 angular 2 测试中测试下拉切换操作？

Question

我正在尝试测试下拉切换功能。但我无法让它发挥作用。我还将 BsDropdownModule 导入到规范文件中。注意：我正在使用 ngx-bootstrap.

这是我尝试过的：

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>

测试规格：

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

任何人都可以建议正确的方法吗？

Answer 1

我已经设法解决了这个问题。这只是一个愚蠢的错误。列表中的数据由 异步进程 填充。所以我应该在单击下拉按钮后使用 fakeAsync 和 tick()。在数据填充到列表之前，视图已更新。这导致了问题。这是固定代码：

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

如何在 angular 2 测试中测试下拉切换操作？

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

unit-testing

typescript

karma-jasmine

ngx-bootstrap

angular