How can I trigger a TouchEvent in a grunt-run qunit test with plain javascript?

Question

I have callbacks for various touch events that I would like to test. For instance, a 'touchstart' event uses the coordinates of the touch to set a member of my class:

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
    };
};

I'm not using jQuery. To test this function, I need to create a div in a known location, create a Touch event that sets the clientX and clientY variables of the first targetTouches Touch correctly, and then fire that event and check that the callback does what it should. I have similar callback for mouse events. A sample test is:

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);
});

However, there seems to be no documentation for trying to do this for touch events. There seems to be a description of the Touch Event Interface with no way to trigger one, an Apple Developer page on the initTouchEvent function with no reference to any way to construct the required Touch or TouchList arguments, and another SO question from 2011 that doesn't include populating the Touch Event with any positional data.

My current test looks like this, and uses the initTouchEvent spec from the Apple Dev page with my simple attempt at mocking a TouchList and Touch object:

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);                                                  
});

I run this test as part of a grunt Qunit task. It fails without errors, saying that neither the ok nor the deepEqual assertions are true. The mouseEvent version of this test passes.

Answer 1

Are you using document.createTouch correctly? According to Safari developer you need to pass the view in which the event occurs (window).

createTouch( DOMWindow view, EventTarget target, long identifier, long pageX, long pageY, long screenX, long screenY)

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