如何在angularjs单元测试中触发mousemove事件
How do I trigger a mousemove event in an angularjs unit test
我已经实现了一个使用鼠标事件的angularjs指令;单击组件并向上或向下移动鼠标可以更改值。所以我需要知道如何在单元测试中触发鼠标移动事件(我使用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的变体。我该怎么做?
这篇博客文章展示了一个使用jqLite的triggerHandler()
的示例。
Angular JS指令测试中的触发事件
编辑:好吧,我快速制作了一个Plunker来演示如何传递参数:链接。检查控制台输出以查看事件对象上的参数。您可以添加实现可能需要的任何内容。
所以你可以像这样传递数据,例如:
elem.triggerHandler({
type : "mousemove",
pageX: 48,
pageY: 102
});
因此,您需要使用angular.element
处理您的元素,然后使用上面的代码来触发它上的事件。
相关文章:
- jQuery UI draggable:绑定到mousemove事件中的对象
- 如何正确停止mousemove事件
- 如何在angularjs单元测试中触发mousemove事件
- Iframe阻碍了mousemove事件的发生
- 如何使用jquery将mousemove事件从iframe发送回父级
- iframe中的JavaScript mousemove事件
- mousemove事件无法像Javascript中预期的那样工作
- 当鼠标超过闪光灯时,Javascript mousemove事件不会触发
- 在mousemove事件javascript中获取光标坐标
- 如何减少mousemove事件的速度减慢
- 注册MouseMove:事件对象始终未定义
- 如果iframe中发生了鼠标按下,文档不会触发mousemove事件
- 无法监听iframe内的mousemove事件
- 在全局变量中存储mousemove事件参数可能会导致性能问题
- 为平板电脑和移动设备复制mousemove()事件
- 在元素上引发mousemove事件
- 将mousemove事件限制为每秒触发不超过5次
- 如何在使用android移动浏览器时获得连续的mousemove事件
- 如何编写一个处理mousemove事件的函数,并在文档就绪时调用它
- 在mousemove事件监听器函数体中设置左位置不起作用