如何在angularjs单元测试中触发mousemove事件 [英] How do I trigger a mousemove event in an angularjs unit test
问题描述
我已经实现了一个使用鼠标事件的angularjs指令;单击组件并向上或向下移动鼠标可以更改值. 所以我需要知道如何在单元测试中触发mousemove事件(我使用业力/茉莉花); 我想建议您在单元测试中上下移动鼠标时测试此组件.
I have implemented an angularjs directive that use mouse event; clicking on component and moving mouse up or down it can changes a value. So i need to know how do I trigger a mousemove event in a unit test (i use karma/jasmine); I'd like to have a suggestion to testing this component when mouse goes up or down in an unit test.
组件模板是这样的:
<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代码是:
and javascript code is:
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的变体.我该怎么办?
Also i need to simulate an variation of event.pageY. How can i do this?
推荐答案
此博客文章显示了一个使用jqLite的triggerHandler()
的示例.
This blog article shows an example using jqLite's triggerHandler()
.
好的,我快速制作了一个Plunker来演示如何传递参数:链接.检查控制台输出以查看事件对象上的参数.您可以添加实现可能需要的任何内容.
Okay, I made a Plunker quickly to demonstrate how you can pass parameters too: link. Check the console output to see the parameters on the event object. You can add anything your implementation might need.
因此,您可以像这样传递数据:
So you can pass data like this for example:
elem.triggerHandler({
type : "mousemove",
pageX: 48,
pageY: 102
});
因此,您需要使用angular.element
获取元素的句柄,然后使用上面的代码来触发元素上的事件.
So you will need to get a handle on your element with angular.element
and then use above code to trigger events on it.
这篇关于如何在angularjs单元测试中触发mousemove事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!