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

Question

我有一個使用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％。 我完全迷失在哪里搜索錯誤。
PS我嘗試生成“dragstart”，“drag”和“dragend”事件，但是瀏覽器中的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

);