Question

我有各种触摸事件的回调，我想测试。例如，'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);
});

但是，似乎没有尝试为触摸事件执行此操作的文档。似乎a description of the Touch Event Interface无法触发一个an Apple Developer page on the initTouchEvent function，没有任何方法可以构建所需的Touch或TouchList参数，而{2011}的another SO question不包括填充带有任何位置数据的触摸事件。

我当前的测试看起来像这样，并使用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);                                                  
});

我将此测试作为gunnt Qunit任务的一部分运行。它失败没有错误，说ok和deepEqual断言都不是真的。此测试的mouseEvent版本通过。

Answer 1

您是否正确使用document.createTouch？根据{{3}}，您需要传递事件发生的视图（窗口）。

createTouch（DOMWindow视图，EventTarget目标，长标识符，长页面X，长页面Y，长屏幕X，长屏幕Y）

touch1 = document.createTouch(window, div, 1, 0, 0, 0, 0);

如何使用普通的javascript在grunt运行的qunit测试中触发TouchEvent？

1 个答案: