如何在AngularJS单元测试中触发mousemove事件

Question

我实现了一个使用鼠标事件的AngularJS指令；点击组件并上下移动鼠标可以更改值。 因此，我需要知道如何在单元测试中触发mousemove事件（我使用karma / jasmine）； 当鼠标在单元测试中上下移动时，我希望得到一个测试该组件的建议。

组件模板大致如下：

<div class="rotativeContent">
    <p class="rotativeLabel">{{label}}</p>
    <pie class="zero"></pie>
    <p class="rotativeValue">{{ngModel}}</p>
    <input type="hidden" ng-model="ngModel"/>
</div>

而 JavaScript 代码是：

var Component = angular.module('Components', []);

Components.directive('rotative', ['$document', function($document){
    return {
    require : '?ngModel',
    restrict: 'E',
    replace: true,
    templateUrl: "templates/rotative.html",
    scope: {label: "@", ngModel: "="},
    link: function(scope, element, attr, ngModel) {
        var value = 0;
        function bindElementMove() {
            element.bind('mousedown', function (event) {
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
            });
        }

        bindElementMove();

        function mousemove(event) {
            // code on mouse move
            // to track vertical mouse position
            var prevY = element.attr('data-prevY');
            if (event.pageY < prevY) {
                // do something if mouse goes down
                // ...
                value++;
            } else {
                // do something if mouse goes up
                // ...
                value--;
            } 
            element.attr('data-prevY', event.pageY);
            ngModel.$setViewValue(value);
        }

        function mouseup() {
            $document.off('mousemove', mousemove);
            $document.off('mouseup', mouseup);
        }
    }
};

// ...

另外，我需要模拟一个event.pageY的变化。我该怎么做？

- sergioska

Answer 1

这篇博客文章展示了一个使用jqLite的triggerHandler()的例子。 在Angular JS指令测试中触发事件 编辑： 好的，我快速制作了一个Plunker，以演示如何传递参数：链接。检查控制台输出以查看事件对象中的参数。您可以添加任何您的实现可能需要的内容。

所以你可以像这样传递数据：

elem.triggerHandler({
    type : "mousemove",
    pageX: 48,
    pageY: 102
});

因此，您需要使用 angular.element 获取元素的句柄，然后使用上述代码在其上触发事件。

- juunas

---

感谢您的回复Juunas。我需要知道如何模拟鼠标上下移动（event.pageY），以测试相应值是否正确。你能给我一些相关信息吗？ - sergioska