[英]How can I trigger a TouchEvent in a grunt-run qunit test with plain javascript?
我有要测试的各种触摸事件的回调。 例如,“ touchstart”事件使用触摸的坐标来设置类的成员:
NavigationUI.prototype.touchStart = function(evt) {
this.interacting = true;
this.startPoint = this.getTouchXY(evt);
};
NavigationUI.prototype.getTouchXY = function(evt) {
var rect = this.element.getBoundingClientRect();
return {
x: evt.targetTouches[0].clientX - rect.left,
y: evt.targetTouches[0].clientY - rect.top
};
};
我没有使用jQuery。 要测试此功能,我需要在一个已知的位置创建一个div,创建一个Touch事件以正确设置第一个targetTouches Touch的clientX和clientY变量,然后触发该事件并检查回调函数是否应做。 我对鼠标事件有类似的回调。 样本测试是:
test('test mouseDownCallback', function() {
var div, evt, navElement;
div = document.createElement('div');
div.setAttribute('style', 'position: fixed; left: 0px; top: 0px;');
document.body.appendChild(div);
navElement = new lasertutor.NavigationUI(div);
evt = document.createEvent("MouseEvent");
evt.initMouseEvent("mousedown", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
div.dispatchEvent(evt);
ok(navElement.interacting, "mousedown doesn't set interacting");
return deepEqual({
x: 0,
y: 0
}, navElement.startPoint);
});
但是,似乎没有文档可以尝试针对触摸事件执行此操作。 似乎对触摸事件接口的描述无法触发, 对initTouchEvent函数的Apple Developer页面没有任何构造所需的Touch或TouchList参数的方式的引用,以及2011年的另一个SO问题 ,包括用任何位置数据填充“触摸事件”。
我当前的测试看起来像这样,并使用Apple Dev页面中的initTouchEvent规范,并尝试模拟TouchList和Touch对象:
test("test TouchStartCallback", function() {
var div, evt, navElement, touch1;
div = document.createElement('div');
div.setAttribute('style', 'position: fixed; left: 0px; top: 0px;');
document.body.appendChild(div);
navElement = new lasertutor.NavigationUI(div);
evt = document.createEvent("TouchEvent");
touch1 = document.createTouch({
clientX: 0,
clientY: 0,
id: 0,
pageX: 0,
pageY: 0,
screenX: 0,
screenY: 0,
target: div
});
evt.initTouchEvent("touchstart", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, [touch1], [touch1], [touch1], 1, 0);
div.dispatchEvent(evt);
ok(navElement.interacting, "touchstart doesn't set interacting");
return deepEqual({
x: 0,
y: 0
}, navElement.startPoint);
});
我将这个测试作为Qunit任务的一部分进行。 它失败且没有错误,表示ok或deepEqual断言都不正确。 此测试的mouseEvent版本通过。
您是否正确使用document.createTouch? 根据Safari开发人员的说法,您需要传递事件发生所在的视图(窗口)。
createTouch(DOMWindow视图,EventTarget目标,长标识符,长pageX,长pageY,长screenX,长screenY)
touch1 = document.createTouch(window, div, 1, 0, 0, 0, 0);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.