Merge pull request #209 from msalsbery/Events-Unit-Tests

Unit tests for canvas drag, release, click events
This commit is contained in:
iangilman 2013-09-03 13:25:21 -07:00
commit ea16668389
3 changed files with 129 additions and 59 deletions

View File

@ -160,7 +160,14 @@
};
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

@ -5,12 +5,12 @@
module( 'Events', {
setup: function () {
var example = $( '<div id="example"></div>' ).appendTo( "#qunit-fixture" );
var example = $( '<div id="eventsexample"></div>' ).appendTo( "#qunit-fixture" );
testLog.reset();
viewer = OpenSeadragon( {
id: 'example',
id: 'eventsexample',
prefixUrl: '/build/openseadragon/images/',
springStiffness: 100 // Faster animation = faster tests
} );
@ -42,8 +42,8 @@
// ----------
asyncTest( 'addHandler with userData', function () {
var userData = { item1: 'Test user data', item2: Math.random() };
var originalUserData = { item1: userData.item1, item2: userData.item2 };
var userData = { item1: 'Test user data', item2: Math.random() },
originalUserData = { item1: userData.item1, item2: userData.item2 };
var openHandler = function ( eventSender, eventData ) {
viewer.removeHandler( 'open', openHandler );
@ -60,4 +60,50 @@
viewer.open( '/test/data/testpattern.dzi' );
} );
// ----------
asyncTest( 'canvas-drag canvas-release canvas-click', function () {
var dragCount = 10,
dragMovesHandled = 0,
releasesHandled = 0,
releasesExpected = 1;
var openHandler = function ( eventSender, eventData ) {
viewer.removeHandler( 'open', openHandler );
viewer.addHandler( 'canvas-drag', canvasDragHandler );
viewer.addHandler( 'canvas-release', canvasReleaseHandler );
viewer.addHandler( 'canvas-click', canvasClickHandler );
Util.simulateViewerClickWithDrag( {
viewer: viewer,
widthFactor: 0.25,
heightFactor: 0.25,
dragCount: dragCount,
dragDx: 1,
dragDy: 1
} );
};
var canvasDragHandler = function ( eventSender, eventData ) {
dragMovesHandled++;
};
var canvasReleaseHandler = function ( eventSender, eventData ) {
releasesHandled++;
};
var canvasClickHandler = function ( eventSender, eventData ) {
viewer.removeHandler( 'canvas-drag', canvasDragHandler );
viewer.removeHandler( 'canvas-release', canvasReleaseHandler );
viewer.removeHandler( 'canvas-click', canvasClickHandler );
equal( dragMovesHandled, dragCount, "'canvas-drag' event count matches 'mousemove' event count (" + dragCount + ")" );
equal( releasesHandled, releasesExpected, "'canvas-release' event count matches expected (" + releasesExpected + ")" );
viewer.close();
start();
};
viewer.addHandler( 'open', openHandler );
viewer.open( '/test/data/testpattern.dzi' );
} );
} )();

View File

@ -5,30 +5,47 @@
// ----------
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)
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)
.simulate( 'mousedown', event );
for ( var i = 0; i < args.dragCount; i++ ) {
event.clientX += args.dragDx;
event.clientY += args.dragDy;
$canvas
.simulate( "mousemove", event );
}
$canvas
.simulate( 'mouseup', event );
},