javascript - 测试 CSS :hover with Jasmine

Question

所以我有一个简单的 div，当鼠标悬停时会根据我的 css 中的定义更改其背景:

.my-class{
    background-color:#FFFFFF;
}
.my-class:hover{
    background-color:#F2F2F2;
}

我尝试用 jasmine 测试这种行为，但测试一直失败:

it "Shadows .soboo-drop-item when hover", ->
      $('.my-class:first').trigger('mouseover')
      expect($('.my-class:first').css('background-color')).toBe("#F2F2F2")

Expected 'rgba(0, 0, 0, 0)' to be '#F2F2F2'

在控制台上运行 $('.my-class:first').trigger('mouseover') 似乎不起作用 - 背景颜色没有改变。

注意:悬停 JQuery 行为会响应 $('#something').trigger('mouseover')

我正在使用 Jasminerice , 其中包括 Jasmine-JQuery

Jasmine-JQuery 有一个测试 css 的方法:

expect($('.my-class:first')).toHaveCss({"background-color": "#F2F2F2"})

这给了我:

Expected '<div class="soboo-service my-class"
service="google"><img
src="http://localhost:3000/img/bookmark-services/google.gif"> Google
Book...</div>' to have css { background-color : '#F2F2F2' }

如何查看这个背景？提前致谢 =)

Answer 1

我做了以下事情:

overed = $($('.my-class:first').trigger('mouseover').html())
expect(overed).toHaveCss({"background-color": "#F2F2F2"})