Angular 2 + Jasmin - Test, ob ein element sichtbar ist

Ich Teste eine web-app mit Angular (2+), ich bin mit Jasmin + Karma als Test-Umgebung.
Ich habe gesucht, eine Menge, aber ich bin nicht in der Lage zu testen, ob ein element sichtbar ist oder nicht, ich dachte, ich würde zu finden ein Konserven-matcher oder einige utility-Methode von Winkel -, aber ich Tat es nicht.
Ich habe versucht, mit classList Eigenschaft von HTMLElement Prüfung :visible, aber das funktioniert nicht.
Ich glaube, ich bin fehlt etwas grundlegendes, da es sollte etwas grundlegendes zu erreichen.
Also, im Beispiel unten, wie kann ich testen, dass der div mit der id header-menu-dropdown-button sichtbar ist ?

Hier ist die Testmethode, mit der ich zu kämpfen mit:

Vorlage

<div id="header-menu-dropdown-button" class="dropdown-closing-level" [hidden]="!showUserMenu" (click)="showMenu($event)"></div>
<ul [hidden]="!showUserMenu" class="dropdown-menu" aria-labelledby="dropdown">
    <li class="dropdown-item"><a href="#">Account</a></li>
    <li class="dropdown-item"><a href="#" (click)="logout($event)">Logout</a></li>
</ul>

Test

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [RouterTestingModule, TranslationsModule],
        declarations: [ AppHeaderComponent ], //declare the test component
    })
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AppHeaderComponent);
    comp = fixture.componentInstance;
    menuDropDownButtonDe = fixture.debugElement.query(By.css('#header-menu-dropdown-button'));
    menuDropDownButtonEl = menuDropDownButtonDe.nativeElement;
});

it('menu should be closed by default', () =>  {
    //Here I want to check the visibility of the menuDropDownButtonEl element
    expect(menuDropDownButtonEl.classList.contains(":visible")).toBe(false); //<-- not working
}); 

HINWEIS: showMenu-Methode einfach ist, wechselt die showUserMenu booleschen Wert.

InformationsquelleAutor Luigi Dallavalle | 2017-02-20