在Angular 2+中使用Jasmine由CSS类设置元素时，是否可以测试元素是否可见？

Question

我有一个元素，当另一个元素悬停在上方时，该元素变得可见。全部用纯CSS处理，不使用Angular或JavaScript。使用茉莉花，是否有可能在鼠标悬停在所选元素上时查看该元素是否可见？我看到其他帖子也提出了类似的要求，很多时候，答案似乎是使用Angular指令或对JavaScript中的样式更改进行编码。我不想这样做，纯CSS解决方案效果很好。到目前为止，这是我的代码：

CSS

.wrapper {
    position: relative;
}

.wrapper .content {
    background: white;
    border: 1px solid black;
    color: black;
    font-size: 12px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: -30px;
    visibility: hidden;
}

.wrapper:hover .content {
    opacity: 1;
    visibility: visible;
}

HTML

<div class="wrapper">
    Show the hidden element on hover
    <div class="content">I am now visible!</div>
</div>

茉莉花单元测试

it('should display the hidden element when wrapper is hovered over', () => {
    const wrapper = fixture.debugElement.query(By.css('.wrapper'));
    const content = fixture.debugElement.query(By.css('.content'));
    let styles = window.getComputedStyle(content.nativeElement);

    wrapper.triggerEventHandler('mouseover', null);
    fixture.detectChanges();

    expect(styles.visibility).toBe('visible');
});

单元测试未能说期望visibility属性为hidden。