我有一个使用D3和Angular编写的折线图组件.它有可拖动的条,用于改变x轴的比例.现在我尝试使用Karma/Jasmine测试组件.我在单元测试中触发拖动事件时遇到问题.
其他事件如鼠标悬停和点击都被触发就好了.我认为这是d3中"拖动"事件的综合实现,这会导致问题.这是我用来触发拖动的代码(这样的代码在测试html页面上触发正确的d3拖动事件,但在单元测试中失败).
var leftBar = element.find(".left-bar")[0];
var evObjStart = document.createEvent("MouseEvents");
evObjStart.initMouseEvent("mousedown", true, true, window, 1, 12, 320, 12, 320, false, false, false, false, 0, null);
var evObj = document.createEvent("MouseEvents");
evObj.initMouseEvent("mousemove", true, true, window, 1, 100, 320, 100, 320, false, false, false, false, 0, null);
var evObjEnd = document.createEvent("MouseEvents");
evObjEnd.initMouseEvent("mouseup", true, true, window, 1, 200, 320, 200, 320, false, false, false, false, 0, null);
leftBar.dispatchEvent(evObjStart);
leftBar.dispatchEvent(evObj);
leftBar.dispatchEvent(evObjEnd);
Run Code Online (Sandbox Code Playgroud)
我发现只有第一个事件被正确调度(leftBar.dispatchEvent(evObjStart)).其他两个事件根本没有发送.leftBar变量是正确的100%.我完全迷失在哪里搜索错误.
PS我尝试生成"dragstart","drag"和"dragend"事件,但是浏览器中的d3无法正确处理它们(在控制台的基本测试示例中无效).Mousedown/mousemove/mouseup序列在浏览器中正常工作,但在单元测试中仅调度mousedown.将非常感谢任何帮助或想法.