mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-18 07:43:13 +03:00
Code Issues Projects Releases Wiki Activity

Unit tests for canvas drag, release, click events

Browse Source 
Added test for canvas-drag, canvas-release, and canvas-click events
This commit is contained in:
Mark Salsbery 2013-08-28 11:33:41 -07:00
parent 853a141994
commit 6049a7ecef
2 changed files with 133 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
test/events.js
View File

@ -5,12 +5,12 @@
module( 'Events', { module( 'Events', {
setup: function () { setup: function () {
var example = $( '<div id="example"></div>' ).appendTo( "#qunit-fixture" ); var example = $( '<div id="eventsexample"></div>' ).appendTo( "#qunit-fixture" );
testLog.reset(); testLog.reset();
viewer = OpenSeadragon( { viewer = OpenSeadragon( {
id: 'example', id: 'eventsexample',
prefixUrl: '/build/openseadragon/images/', prefixUrl: '/build/openseadragon/images/',
springStiffness: 100 // Faster animation = faster tests springStiffness: 100 // Faster animation = faster tests
} ); } );
@ -60,4 +60,42 @@
viewer.open( '/test/data/testpattern.dzi' ); viewer.open( '/test/data/testpattern.dzi' );
} ); } );
// ----------
asyncTest( 'canvas-drag canvas-release canvas-click', function () {
var dragMoves = 10;
var dragMovesHandled = 0;
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.simulateViewerDrag( viewer, 0.25, 0.25, 1, 1, dragMoves );
};
var canvasDragHandler = function ( eventSender, eventData ) {
dragMovesHandled += 1;
ok( true, 'canvas-drag event handled' );
};
var canvasReleaseHandler = function ( eventSender, eventData ) {
ok( true, 'canvas-release event handled' );
};
var canvasClickHandler = function ( eventSender, eventData ) {
viewer.removeHandler( 'canvas-drag', canvasDragHandler );
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' );
viewer.close();
start();
};
viewer.addHandler( 'open', openHandler );
viewer.open( '/test/data/testpattern.dzi' );
} );
} )(); } )();

120
test/test.js
View File

@ -1,67 +1,109 @@
/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */ /* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */
(function() { (function () {
// ---------- // ----------
window.Util = { window.Util = {
// ---------- // ----------
simulateViewerClick: function(viewer, widthFactor, heightFactor) { simulateViewerClick: function ( viewer, widthFactor, heightFactor ) {
if (widthFactor === undefined) { if ( widthFactor === undefined ) {
widthFactor = 0.5; widthFactor = 0.5;
} }
//TODO Redefine to be the middle by default //TODO Redefine to be the middle by default
if (heightFactor === undefined) { if ( heightFactor === undefined ) {
heightFactor = 0.5; heightFactor = 0.5;
} }
widthFactor = Math.min(1, Math.max(0, widthFactor)); widthFactor = Math.min( 1, Math.max( 0, widthFactor ) );
//TODO Fix this. The max height should be 1/AR //TODO Fix this. The max height should be 1/AR
heightFactor = Math.min(1, Math.max(0, heightFactor)); heightFactor = Math.min( 1, Math.max( 0, heightFactor ) );
var $canvas = $(viewer.element).find('.openseadragon-canvas').not('.navigator .openseadragon-canvas'); var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' );
var offset = $canvas.offset(); var offset = $canvas.offset();
var event = { var event = {
clientX: offset.left + Math.floor($canvas.width() * widthFactor), clientX: offset.left + Math.floor( $canvas.width() * widthFactor ),
clientY: offset.top + Math.floor($canvas.height() * heightFactor) clientY: offset.top + Math.floor( $canvas.height() * heightFactor )
}; };
$canvas $canvas
.simulate('mouseover', event) .simulate( 'mouseover', event )
.simulate('mousedown', event) .simulate( 'mousedown', event )
.simulate('mouseup', 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++ ) {
event.clientX += dx;
event.clientY += dy;
$canvas
.simulate( "mousemove", event );
}
$canvas
.simulate( 'mouseup', event );
}, },
initializeTestDOM: function () { initializeTestDOM: function () {
$("#qunit-fixture") $( "#qunit-fixture" )
.append('<div><div id="example"></div><div id="exampleNavigator"></div></div>') .append( '<div><div id="example"></div><div id="exampleNavigator"></div></div>' )
.append('<div id="wideexample"></div>') .append( '<div id="wideexample"></div>' )
.append('<div id="tallexample"></div>'); .append( '<div id="tallexample"></div>' );
}, },
equalsWithVariance: function (value1, value2, variance) { equalsWithVariance: function ( value1, value2, variance ) {
return Math.abs(value1 - value2) <= variance; return Math.abs( value1 - value2 ) <= variance;
}, },
assessNumericValue: function (value1, value2, variance, message) { assessNumericValue: function ( value1, value2, variance, message ) {
ok(Util.equalsWithVariance(value1, value2, variance), message + " Expected:" + value1 + " Found: " + value2 + " Variance: " + variance); ok( Util.equalsWithVariance( value1, value2, variance ), message + " Expected:" + value1 + " Found: " + value2 + " Variance: " + variance );
}, },
timeWatcher: function(time) { timeWatcher: function ( time ) {
time = time || 2000; time = time || 2000;
var finished = false; var finished = false;
setTimeout(function() { setTimeout( function () {
if (!finished) { if ( !finished ) {
finished = true; finished = true;
ok(false, 'finishes in ' + time + 'ms'); ok( false, 'finishes in ' + time + 'ms' );
start(); start();
} }
}, time); }, time );
return { return {
done: function() { done: function () {
if (!finished) { if ( !finished ) {
finished = true; finished = true;
start(); start();
} }
@ -88,26 +130,26 @@
warn: [], warn: [],
error: [], error: [],
reset: function () { reset: function () {
for (var i in testLog) { for ( var i in testLog ) {
if (testLog.hasOwnProperty(i) && 'length' in testLog[i] && 'push' in testLog[i]) { if ( testLog.hasOwnProperty( i ) && 'length' in testLog[i] && 'push' in testLog[i] ) {
testLog[i].length = 0; testLog[i].length = 0;
} }
} }
} }
}; };
for (var i in testLog) { for ( var i in testLog ) {
if (testLog.hasOwnProperty(i) && testLog[i].push) { if ( testLog.hasOwnProperty( i ) && testLog[i].push ) {
testConsole[i] = (function (arr) { testConsole[i] = ( function ( arr ) {
return function () { return function () {
var args = Array.prototype.slice.call(arguments, 0); // Coerce to true Array var args = Array.prototype.slice.call( arguments, 0 ); // Coerce to true Array
arr.push(JSON.stringify(args)); // Store as JSON to avoid tedious array-equality tests arr.push( JSON.stringify( args ) ); // Store as JSON to avoid tedious array-equality tests
}; };
})(testLog[i]); } )( testLog[i] );
testLog[i].contains = function (needle) { testLog[i].contains = function ( needle ) {
for (var i = 0; i < this.length; i++) { for ( var i = 0; i < this.length; i++ ) {
if (this[i] == needle) { if ( this[i] == needle ) {
return true; return true;
} }
} }
@ -117,5 +159,5 @@
} }
OpenSeadragon.console = testConsole; OpenSeadragon.console = testConsole;
})(); } )();