如何使用普通javascript在grunt运行qunit测试中触发TouchEvent?
我有我想测试的各种触摸事件的回调。例如,“touchstart”事件使用触摸的坐标设置my类的成员:如何使用普通javascript在grunt运行qunit测试中触发TouchEvent?,javascript,node.js,unit-testing,gruntjs,qunit,Javascript,Node.js,Unit Testing,Gruntjs,Qunit,我有我想测试的各种触摸事件的回调。例如,“touchstart”事件使用触摸的坐标设置my类的成员: NavigationUI.prototype.touchStart = function(evt) { this.interacting = true; this.startPoint = this.getTouchXY(evt); }; NavigationUI.prototype.getTouchXY = function(evt) { var rect = th
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事件来正确设置第一个targetTouchs 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);
});
但是,似乎没有文档说明如何尝试对触摸事件执行此操作。似乎没有办法触发一个,没有参考任何方法来构造所需的Touch或TouchList参数,从2011年开始,这不包括用任何位置数据填充Touch事件
我当前的测试如下所示,使用Apple Dev页面中的initTouchEvent规范模拟触摸列表和触摸对象:
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);
});
我将此测试作为grunt Qunit任务的一部分运行。它毫无错误地失败了,说ok和deepEqual断言都不正确。此测试的mouseEvent版本通过。您是否正确使用document.createTouch?根据需要传递事件发生的视图(窗口) createTouch(DOMWindow视图、EventTarget目标、长标识符、长pageX、长pageY、长screenX、长screenY)
这绝对有帮助——我没有找到构造函数描述,它还展示了如何初始化触摸列表。不幸的是,测试仍然失败,所以肯定还有其他问题。我将把它标记为已接受。在进行了这些更改并添加了一些日志记录之后,以下内容是正确的:1)正在执行在touchstart上添加事件侦听器的语句,并且没有引发错误。2) 定义了所有TouchEvent、Touch和TouchList对象。3) dispatchEvent调用返回true 4)未执行回调。如果一个事件被调度但其处理程序没有被调用,那么该事件是否可以说已经发生,这一问题可能是谷歌哲学博士的问题。
touch1 = document.createTouch(window, div, 1, 0, 0, 0, 0);