单元测试 – Angular 2 Jasmine – 测试元素是否可见

我正在测试使用Angular(2)制作的网络应用程序,我使用Jasmine Karma作为测试环境.
我经常搜索但是我无法测试一个元素是否可见,我以为我会找到一个罐装匹配器或Angular的一些实用方法,但我没有.
我尝试使用 HTMLElement的classList属性,测试：可见,但这不起作用.
我觉得我缺少一些基本的东西,因为它应该是一些基本的东西.
那么,在下面的例子中,我如何测试具有id header-menu-dropdown-button的div是否可见？

这是我正在努力的测试方法：

模板

<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>

测试

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

注意：showMenu方法只是切换showUserMenu布尔值.