mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 00:26:10 +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' );
} );
} )(); } )();

144
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();
} }
@ -72,42 +114,42 @@
}; };
/* /*
Test console log capture Test console log capture
1. Only the OpenSeadragon.console logger is touched 1. Only the OpenSeadragon.console logger is touched
2. All log messages are stored in window.testLog in arrays keyed on the logger name (e.g. log, 2. All log messages are stored in window.testLog in arrays keyed on the logger name (e.g. log,
warning, error, etc.) as JSON-serialized strings to simplify comparisons warning, error, etc.) as JSON-serialized strings to simplify comparisons
3. The captured log arrays have a custom contains() method for ease of testing 3. The captured log arrays have a custom contains() method for ease of testing
4. testLog.reset() will clear all of the message arrays, intended for use in test setup routines 4. testLog.reset() will clear all of the message arrays, intended for use in test setup routines
*/ */
var testConsole = window.testConsole = {}, var testConsole = window.testConsole = {},
testLog = window.testLog = { testLog = window.testLog = {
log: [], log: [],
debug: [], debug: [],
info: [], info: [],
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;
})(); } )();