0

我有一个元素在悬停另一个元素时变得可见。这一切都是用纯 CSS 处理的，没有使用 Angular 或 JavaScript。是否可以使用 Jasmine 查看当鼠标悬停在所选元素上时该元素是否可见？我看过其他类似的帖子，很多时候答案似乎是使用 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.

4

0 回答 0