CSS Testing: Hanging with Jasmine

Question

So, I have a simple div that, when hovering, changes its background as defined in my css:

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

I tried to test this behavior with jasmine, but the tests continue to fail:

 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)' will be '# F2F2F2'

Running $('.my-class:first').trigger('mouseover') on the console seems to be inoperative - the background color does not change.

Note: Hover jQuery behavior responds to $('#something').trigger('mouseover')

Im using Jasminerice , which includes Jasmine-jQuery

Jasmine-jQuery has a css validation method:

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

which gives me:

 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' } 

How to check this background? Thanks in advance =)

Answer 1

Try the following: expect ($ ('my class :. first')). toHaveCss ("background color", "# f2f2f2");

Answer 2

I have done the following:

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