2017-04-10 68 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

好像如果組件使用