2017-04-10 288 views
4

组件是https://github.com/valor-software/ngx-bootstrap下拉列表。Angular2茉莉花单元测试组件与第三方指令

模板

我有这样的:

<span dropdown placement="bottom right"> 
     <a id="droplist-label" href="javascript:void(0)" dropdownToggle> 
      <span>{{conf.title}}</span> 
     </a> 
     <ul class="dropdown-menu pull-right" *dropdownMenu> 
     <li *ngFor="let item of items"> 
      <a class="dropdown-item" (click)="listClick(item.value)" href="javascript:void(0)">{{item.label}}</a> 
     </li> 
     </ul> 
    </span> 

未添加了UL,直到标签被点击 - 为此我不能在测试访问它。

调用点击:

let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement; 
droplist.click(); 

不工作 - 如果我试图寻找dropdown-menu是空的:

it('should test if droplist has title', async(() => { 
    fixture.detectChanges(); 
    let droplist = fixture.debugElement.query(By.css('#droplist-label')).nativeElement; 
    droplist.click(); 

    fixture.whenStable().then(() => { 
     let droplistOptions = fixture.debugElement.queryAll(By.css('.dropdown-item')); 
     expect(droplistOptions.length).toBeGreaterThan(0); 
    }); 
})); 

该指令有click事件的hostlistener似乎 - 我怎么能触发它,使得ul变得可用?

+0

好像如果组件使用