我有一个使用 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);
我发现只有第一个事件被正确调度 (leftBar.dispatchEvent(evObjStart))。
其他两个事件根本不发送。 leftBar 变量是 100% 正确的。我完全不知道在哪里搜索错误。
附言我尝试生成“dragstart”、“drag”和“dragend”事件,但浏览器中的 d3 无法正确处理它们(在控制台的基本测试示例中不起作用)。 Mousedown/mousemove/mouseup 序列在浏览器中正常工作,但在单元测试中仅调度 mousedown。将非常感谢任何帮助或想法。
最佳答案
虽然这不是答案,但我希望这会有所帮助。
这里有一种方法可以将处理程序分解为可测试的内容。
像这样将它们添加为 Controller 的成员:
app.controller('MyDirectiveCtrl', function($scope) {
this.dragHandler = function() {
// do stuff
};
});
app.directive('MyDirective', function(){
return {
controller: 'MyDirectiveCtrl',
link: function(scope, elem, attrs, ctrl) {
var drag = d3.behavior.drag();
drag.on('drag', ctrl.dragHandler);
d3.select(elem[0]).call(drag);
}
}
});
然后进行测试:
<!-- language: lang-js -->
// create the controller
var ctrl = $controller('MyDirectiveCtrl', {
$scope: mockScope
});
// call the handler
ctrl.dragHandler(mock, args, here);
// assert some difference
expect(mock).toBe(differentSomehow
);
关于javascript - D3.js - 以编程方式在 Jasmine 中生成拖动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24288693/