Angular 2 + Jasmine - 测试元素是否可见

Question

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

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

模板

<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布尔值.

Answer 1

我通过检查隐藏属性的存在来对其进行单元测试。

expect(menuDropDownButtonEl.hasAttribute('hidden')).toEqual(true);