Website-Suche

Wie testet man eine Dropdown-Toggle-Funktion in Angular 2 Tests?

Ich versuche, die Dropdown-Toggle-Funktion zu testen. Aber ich konnte sie nicht zum Laufen bringen. Ich habe auch BsDropdownModule in die Spec-Datei importiert. Hinweis: Ich benutze ngx-bootstrap.

Hier ist, was ich versucht habe:

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>

Testspezifikation:

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

Kann jemand den richtigen Weg vorschlagen, es zu tun?

Antwort #1

Es ist mir gelungen, dieses Problem zu lösen. Es war nur ein dummer Fehler. Die Daten in der Liste werden durch einen asynchronen Prozess gefüllt. Deshalb sollte ich fakeAsync und tick() nach dem Klicken auf die Dropdown-Schaltfläche verwenden. Die Ansicht wurde aktualisiert, bevor die Daten in die Liste eingefügt wurden. Das verursachte das Problem. Hier ist der korrigierte 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]);
}));

Verwandte Artikel