simulate mouse over writing unit tests for Polymer elements using Mock.Interactions

Question

I am writing a unit test for a custom Polymer element and need to simulate a mouse over event and check if a button (which is hidden) shows up on mouse over.

I am using iron-test-helpers (mock interactions). During testing I receive this error message:

Error: MockInteractions.mouseover is not a function.

My issue is that I cannot find a proper function ( .hover , mouseOver and similar combinations do not work) and am not sure if there is no appropriate function in Mock.Interactions or I just do not find the right one.

My code (only test part):

test('check settings btb shows on hover', function(done) {
    var hoverSpy = sinon.spy();
    var button = Polymer.dom(myEl5.root).querySelector('#user-settings');
    button.addEventListener('mouseover', hoverSpy);
    MockInteractions.mouseover(button);
    });
});

Answer 1

Hi mouseover is an event by HTML elements that gets fired when the Mouse pointer is over an element. It is not a interaction a mouse can do. So what you actually want to do is a mouse move event to trigger the mouseover event.

test('check settings btb shows on hover', function(done) {
    var hoverSpy = sinon.spy();
    var button = Polymer.dom(myEl5.root).querySelector('#user-settings');
    button.addEventListener('mouseover', hoverSpy);
    MockInteractions.move(button, {x: 0, y: 0}, 
        {
             x: button.offsetLeft + (button.offsetWidth / 2), 
             y: button.offsetTop + (button.offsetHeight / 2)
        });
    });
});

This code should simulate moving the mouse to the center of the button.