Testing jQuery Hover with Jasmine

Question

How should I go about testing a jQuery Hover action with Jasmine? My jQuery looks like

$('.class').hover(
  function() { $('#someid').hide(); },
  function() { $('#someid').show(); }
);

How could I simulate moving the hover action with jasmine and expect that 'someid' element is hidden and shown as it should?

Answer 1

You should be able to directly trigger a mouseover event and then test for the appropriate behavior:

it("should do something on hover", function() {
  $('.class').trigger('mouseover');
  expect($('#someid')).toBeHidden();
  $('.class').trigger('mouseout');
  expect($('#someid')).toBeShown();
});

$('#someid') must be in the DOM. The best way to do that is through a fixture.