在茉莉花单元测试中模拟鼠标悬停？

Question

Apologies if this is covered elsewhere, struggled to find comprehensive result on search.

I've got a Javascript app that has audio descriptions on mouseover for certain elements. These are implemented using mouseover listeners like so (pseudo-code!)

  menuOption.addEventListener("mouseover", function(){
    audio.play("menuoption"); 
  });

In my test I've got something like:

  spyOn(audio, "play")

  menuOption.mouseover()

  expect(audio.play.calls.count()).toBe(1);

This mouseover doesn't seem to fire. I'm using jasmine and phantomjs. When I change mouseover to click it works ok so I'm inclined to think my tests are fine and its mouseover thats a problem?

Answer 1

Just as element.click() is non-standard, so is element.mouseover() . You can try to explicitly generate the event (based on this answer by torazaburo):

function mouseover(el){
    var ev = document.createEvent("MouseEvent");
    ev.initMouseEvent(
        "mouseover",
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}
mouseover(menuOption);