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

Question

我正在测试使用Angular（2+）制作的网络应用程序，我使用Jasmine + Karma作为测试环境。 我搜索了很多，但我无法测试一个元素是否可见，我以为我会找到一个罐装匹配器或Angular的一些实用方法，但我没有。 我尝试使用classList的{​​{1}}属性，测试HTMLElement，但这不起作用。
我觉得我缺少一些基本的东西，因为它应该是基本的东西 那么，在下面的示例中，我如何测试ID为:visible的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>

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

Answer 1

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

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