Unit tests for canvas drag, release, click events

This commit is contained in:
Mark Salsbery 2013-08-29 13:01:07 -07:00
parent 6049a7ecef
commit 1a005573f5
3 changed files with 42 additions and 54 deletions

View File

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

View File

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

View File

@ -5,68 +5,43 @@
// ----------
window.Util = {
// ----------
simulateViewerClick: function ( viewer, widthFactor, heightFactor ) {
if ( widthFactor === undefined ) {
widthFactor = 0.5;
simulateViewerClickWithDrag: function ( args ) {
// args = { viewer, widthFactor, heightFactor, dragCount, dragDx, dragDy }
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 ) {
heightFactor = 0.5;
if ( args.heightFactor === undefined ) {
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 ),
clientY: offset.top + Math.floor( $canvas.height() * 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 )
clientX: offset.left + Math.floor( $canvas.width() * args.widthFactor ),
clientY: offset.top + Math.floor( $canvas.height() * args.heightFactor )
};
$canvas
.simulate( 'mouseover', event )
.simulate( 'mousedown', event );
for ( var i = 0; i < movecount; i++ ) {
event.clientX += dx;
event.clientY += dy;
for ( var i = 0; i < args.dragCount; i++ ) {
event.clientX += args.dragDx;
event.clientY += args.dragDy;
$canvas
.simulate( "mousemove", event );
}