Unit tests for canvas drag, release, click events

test/basic.js

@@ -160,8 +160,15 @@
             };
 
             viewer.addHandler('animationfinish', clickHandler);
-            Util.simulateViewerClick(viewer, 0.25, 0.25);
+            Util.simulateViewerClickWithDrag( {
-        });
+                viewer: viewer,
+                widthFactor: 0.25,
+                heightFactor: 0.25,
+                dragCount: 0,
+                dragDx: 0,
+                dragDy: 0
+            } );
+        } );
 
         viewer.open('/test/data/testpattern.dzi');
     });

test/events.js

@@ -62,7 +62,7 @@
 
     // ----------
     asyncTest( 'canvas-drag canvas-release canvas-click', function () {
-        var dragMoves = 10;
+        var dragCount = 10;
         var dragMovesHandled = 0;
 
         var openHandler = function ( eventSender, eventData ) {
@@ -72,12 +72,18 @@
             viewer.addHandler( 'canvas-release', canvasReleaseHandler );
             viewer.addHandler( 'canvas-click', canvasClickHandler );
 
-            Util.simulateViewerDrag( viewer, 0.25, 0.25, 1, 1, dragMoves );
+            Util.simulateViewerClickWithDrag( { 
+                viewer: viewer, 
+                widthFactor: 0.25, 
+                heightFactor: 0.25, 
+                dragCount: dragCount, 
+                dragDx: 1, 
+                dragDy: 1 
+            } );
         };
 
         var canvasDragHandler = function ( eventSender, eventData ) {
             dragMovesHandled += 1;
-            ok( true, 'canvas-drag event handled' );
         };
 
         var canvasReleaseHandler = function ( eventSender, eventData ) {
@@ -89,7 +95,7 @@
             viewer.removeHandler( 'canvas-release', canvasReleaseHandler );
             viewer.removeHandler( 'canvas-click', canvasClickHandler );
             ok( true, 'canvas-click event handled' );
-            equal( dragMovesHandled, dragMoves, 'canvas-drag event count matches mousemove count' );
+            equal( dragMovesHandled, dragCount, "'canvas-drag' event count matches 'mousemove' event count" );
             viewer.close();
             start();
         };

test/test.js

@@ -5,68 +5,43 @@
     // ----------
     window.Util = {
         // ----------
-        simulateViewerClick: function ( viewer, widthFactor, heightFactor ) {
+        simulateViewerClickWithDrag: function ( args ) {
-            if ( widthFactor === undefined ) {
+            // args = { viewer, widthFactor, heightFactor, dragCount, dragDx, dragDy }
-                widthFactor = 0.5;
+
+            if ( args.hasOwnProperty( 'dragCount' ) ) {
+                args.dragDx = args.dragDx || 1;
+                args.dragDy = args.dragDy || 1;
+            }
+            else {
+                args.dragCount = 0;
+            }
+
+            if ( args.widthFactor === undefined ) {
+                args.widthFactor = 0.5;
             }
 
             //TODO Redefine to be the middle by default
-            if ( heightFactor === undefined ) {
+            if ( args.heightFactor === undefined ) {
-                heightFactor = 0.5;
+                args.heightFactor = 0.5;
             }
 
-            widthFactor = Math.min( 1, Math.max( 0, widthFactor ) );
+            args.widthFactor = Math.min( 1, Math.max( 0, args.widthFactor ) );
             //TODO Fix this.  The max height should be 1/AR
-            heightFactor = Math.min( 1, Math.max( 0, heightFactor ) );
+            args.heightFactor = Math.min( 1, Math.max( 0, args.heightFactor ) );
 
-            var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' );
+            var $canvas = $( args.viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' );
             var offset = $canvas.offset();
             var event = {
-                clientX: offset.left + Math.floor( $canvas.width() * widthFactor ),
+                clientX: offset.left + Math.floor( $canvas.width() * args.widthFactor ),
-                clientY: offset.top + Math.floor( $canvas.height() * heightFactor )
+                clientY: offset.top + Math.floor( $canvas.height() * args.heightFactor )
-            };
-
-            $canvas
-                .simulate( 'mouseover', event )
-                .simulate( 'mousedown', event )
-                .simulate( 'mouseup', event );
-        },
-
-        simulateViewerDrag: function ( viewer, widthFactor, heightFactor, dx, dy, movecount ) {
-            dx = dx || 1;
-            dy = dy || 1;
-
-            movecount = movecount || 5;
-            if ( movecount < 1 ) {
-                movecount = 1;
-            }
-
-            if ( widthFactor === undefined ) {
-                widthFactor = 0.5;
-            }
-
-            //TODO Redefine to be the middle by default
-            if ( heightFactor === undefined ) {
-                heightFactor = 0.5;
-            }
-
-            widthFactor = Math.min( 1, Math.max( 0, widthFactor ) );
-            //TODO Fix this.  The max height should be 1/AR
-            heightFactor = Math.min( 1, Math.max( 0, heightFactor ) );
-
-            var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' );
-            var offset = $canvas.offset();
-            var event = {
-                clientX: offset.left + Math.floor( $canvas.width() * widthFactor ),
-                clientY: offset.top + Math.floor( $canvas.height() * heightFactor )
             };
 
             $canvas
                 .simulate( 'mouseover', event )
                 .simulate( 'mousedown', event );
-            for ( var i = 0; i < movecount; i++ ) {
+            for ( var i = 0; i < args.dragCount; i++ ) {
-                event.clientX += dx;
+                event.clientX += args.dragDx;
-                event.clientY += dy;
+                event.clientY += args.dragDy;
                 $canvas
                     .simulate( "mousemove", event );
             }