Question

我有一个使用D3和Angular编写的折线图组件。它有可拖动的条，用于改变x轴的比例。现在我尝试使用Karma / Jasmine测试组件。我在单元测试中触发拖动事件时遇到问题。
其他事件如鼠标悬停和点击都被触发就好了。我认为它是＆＃34; drag＆＃34;的综合实现。 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％。我完全迷失在哪里搜索错误。
附：我尝试生成＆＃34; dragstart＆＃34;，＆＃34;拖动＆＃34;和＆＃34; dragend＆＃34;事件，但浏览器中的d3无法正确处理它们（在控制台的基本测试示例中无效）。 Mousedown / mousemove / mouseup序列在浏览器中正常工作，但在单元测试中仅调度mousedown。将非常感谢任何帮助或想法。

Answer 1

虽然这不是一个答案，但我希望这会有所帮助。

在这种情况下，您可以将处理程序分解为可测试的东西。

将它们添加为控制器的成员，如下所示：

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

);

D3.js - 以编程方式在Jasmine中生成拖动事件

1 个答案: