Можно ли проверить, является ли элемент видимым, если он установлен классами CSS с помощью Jasmine в Angular 2+?

Question

У меня есть элемент, который становится видимым, когда другой элемент находится над ним.Все это обрабатывается простым CSS, без использования Angular или JavaScript.Можно ли с помощью Jasmine увидеть, видим ли элемент при наведении курсора мыши на выбранный элемент?Я видел другие посты, спрашивающие о подобном, и часто мне кажется, что ответом являются использование угловых директив или кодирование изменения стиля в 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.