测试 CSS :hover with Jasmine

Posted 2023-05-07

【中文标题】测试 CSS :hover with Jasmine

【英文标题】：Testing CSS :hover with Jasmine

【发布时间】：2012-10-15 22:12:56

【问题描述】：

所以我有一个简单的 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")

预期 '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' 

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

【参考方案1】：

我做了以下事情：

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

【参考方案2】：

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