使用 Mock.Interactions 模拟鼠标悬停在编写聚合物元素的单元测试上

Question

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

我正在使用铁测试助手(模拟交互(。在测试期间，我收到此错误消息：

错误：MockInteractions.mouseover 不是一个函数。

我的问题是我找不到合适的函数(.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)
});
});
});

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