在AngularJS指令中测试mouseover和mouseout事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在AngularJS指令中测试mouseover和mouseout事件相关的知识,希望对你有一定的参考价值。

我试图在D3指令中测试mouseovermouseout事件。这是我试图测试的代码部分:

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');
});

应该在这些鼠标事件上调用的函数在我的代码覆盖中保持红色,如果它们从未被触发过。任何人都知道为什么会这样?

答案

This为我效劳:

使用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');
})

以上是关于在AngularJS指令中测试mouseover和mouseout事件的主要内容,如果未能解决你的问题,请参考以下文章

ng-mouseover 并离开以在 angularjs 中使用鼠标切换项目

如何测试在悬停/鼠标悬停时调用了 Vue 指令?

单元测试 angularjs 指令的事件广播

AngularJS 指令链接功能在 Jasmine 测试中不运行

如何在模块化的angularjs范围内测试指令?

AngularJS – 如何在 Jasmine 中为输入事件指令编写单元测试