0

私はドロップダウントグル機能をテストしようとしています。しかし、私はそれを動作させることができませんでした。私もBsDropdownModuleをspecファイルにインポートしました。 注:私はngx-bootstrapを使用しています。ここで角度2のテストでドロップダウントグル操作をテストするにはどうすればよいですか?

は、私が試したものです:

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

誰もがそれを行うための正しい方法を提案することはできますか?

答えて

1

私はこの問題を解決することができました。それはちょっとばかげた過ちだった。リスト内のデータには、の非同期処理が入力されます。だから、私はfakeAsynctick()をドロップダウンボタンをクリックした後に使用することになっていました。データがリストに入力される前に、ビューが更新されました。それは問題を引き起こしました。固定コードは次のとおりです。

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]); 
})); 
関連する問題