javascript - 测试 CSS :hover with Jasmine

Question

所以我有一个简单的 div，当悬停时会改变它的背景，如我的 css 中定义的那样：

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

我试图用茉莉花测试这种行为，但测试一直失败：

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

预期 'rgba(0, 0, 0, 0)' 为 '#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"})

Answer 2

试试这个：expect($('.my-class:first')).toHaveCss("background-color","#F2F2F2");