在AngularJS指令中測試mouseover和mouseout事件

Question

我試圖在D3指令中測試mouseover和mouseout事件。 這是我試圖測試的代碼部分：

var nodeEnter = node.enter().append('svg:g')
  .attr('class', 'node')
  .attr('transform', function(d) {
    return 'translate(' + d.x + ',' + d.y + ')';
  })
  .attr('filter', 'url(' + $location.path() + '#drop-shadow)')
  .on('mouseover', function(d) {
    tooltip.transition()
      .duration(200)
      .style('opacity', 0.75);
    tooltip.html(d.email)
      .style('left', (d3.event.pageX - 50) + 'px')
      .style('top', (d3.event.pageY - 50) + 'px');
    d.scale = 1.5;
    tick();
  })
  .on('mouseout', function(d) {
    tooltip.transition()
      .duration(200)
      .style('opacity', 0);
    d.scale = 1;
    tick();
  })

以下是這些特定測試的相關茉莉花代碼：

it('should trigger mouse events', function() {
  element.find('.node').triggerHandler('mouseover');
  element.find('.node').triggerHandler('mouseout');
});

應該在這些鼠標事件上調用的函數在我的代碼覆蓋中保持紅色，如果它們從未被觸發過。 任何人都知道為什么會這樣？

Answer 1

這對我來說很有用：

使用jQuery：

beforeEach(function(){
    $.fn.triggerSVGEvent = function(eventName) {
        var event = document.createEvent('SVGEvents');
        event.initEvent(eventName, true, true);
        this[0].dispatchEvent(event);
        return $(this)
    }
})

然后在測試中：

it('should trigger mouse events', function() {
    $(yourSelector).triggerSVGEvent('mouseover');
    $(yourSelector).triggerSVGEvent('mouseout');
})