使用 Mock.Interactions 模拟鼠标悬停在为 Polymer 元素编写单元测试

Question

我正在为自定义 Polymer 元素编写单元测试，需要模拟鼠标悬停事件并检查鼠标悬停时是否显示按钮（隐藏）。

我正在使用 iron-test-helpers（模拟交互）。在测试期间，我收到此错误消息：

Error: MockInteractions.mouseover is not a function.

我的问题是我找不到合适的功能（.hover、mouseOver 和类似的组合不起作用）并且不确定 Mock.Interactions 中是否没有合适的功能或者我就是找不到合适的。

我的代码（仅测试部分）：

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

嗨，鼠标悬停是 HTML 元素的一个事件，当鼠标指针悬停在某个元素上时会触发该事件。这不是鼠标可以进行的交互。所以你真正想要做的是一个鼠标移动事件来触发鼠标悬停事件。

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)
        });
    });
});

此代码应模拟将鼠标移动到按钮的中心。

使用 Mock.Interactions 模拟鼠标悬停在为 Polymer 元素编写单元测试

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

javascript

unit-testing

polymer

polymer-1.0