mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 14:46:10 +03:00
Merge pull request #209 from msalsbery/Events-Unit-Tests
Unit tests for canvas drag, release, click events
This commit is contained in:
iangilman
commit
ea16668389
@ -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');
|
||||
});
|
||||
|
||||
@ -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' );
|
||||
} );
|
||||
|
||||
} )();
|
||||
|
||||
123
test/test.js
123
test/test.js
@ -1,67 +1,84 @@
|
||||
/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */
|
||||
|
||||
(function() {
|
||||
(function () {
|
||||
|
||||
// ----------
|
||||
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('mouseup', event);
|
||||
.simulate( 'mouseover', 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 );
|
||||
},
|
||||
|
||||
initializeTestDOM: function () {
|
||||
$("#qunit-fixture")
|
||||
.append('<div><div id="example"></div><div id="exampleNavigator"></div></div>')
|
||||
.append('<div id="wideexample"></div>')
|
||||
.append('<div id="tallexample"></div>');
|
||||
$( "#qunit-fixture" )
|
||||
.append( '<div><div id="example"></div><div id="exampleNavigator"></div></div>' )
|
||||
.append( '<div id="wideexample"></div>' )
|
||||
.append( '<div id="tallexample"></div>' );
|
||||
},
|
||||
|
||||
equalsWithVariance: function (value1, value2, variance) {
|
||||
return Math.abs(value1 - value2) <= variance;
|
||||
equalsWithVariance: function ( value1, value2, variance ) {
|
||||
return Math.abs( value1 - value2 ) <= variance;
|
||||
},
|
||||
|
||||
assessNumericValue: function (value1, value2, variance, message) {
|
||||
ok(Util.equalsWithVariance(value1, value2, variance), message + " Expected:" + value1 + " Found: " + value2 + " Variance: " + variance);
|
||||
assessNumericValue: function ( value1, value2, variance, message ) {
|
||||
ok( Util.equalsWithVariance( value1, value2, variance ), message + " Expected:" + value1 + " Found: " + value2 + " Variance: " + variance );
|
||||
},
|
||||
|
||||
timeWatcher: function(time) {
|
||||
timeWatcher: function ( time ) {
|
||||
time = time || 2000;
|
||||
var finished = false;
|
||||
|
||||
setTimeout(function() {
|
||||
if (!finished) {
|
||||
setTimeout( function () {
|
||||
if ( !finished ) {
|
||||
finished = true;
|
||||
ok(false, 'finishes in ' + time + 'ms');
|
||||
ok( false, 'finishes in ' + time + 'ms' );
|
||||
start();
|
||||
}
|
||||
}, time);
|
||||
}, time );
|
||||
|
||||
return {
|
||||
done: function() {
|
||||
if (!finished) {
|
||||
done: function () {
|
||||
if ( !finished ) {
|
||||
finished = true;
|
||||
start();
|
||||
}
|
||||
@ -72,42 +89,42 @@
|
||||
};
|
||||
|
||||
/*
|
||||
Test console log capture
|
||||
Test console log capture
|
||||
|
||||
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,
|
||||
warning, error, etc.) as JSON-serialized strings to simplify comparisons
|
||||
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
|
||||
*/
|
||||
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,
|
||||
warning, error, etc.) as JSON-serialized strings to simplify comparisons
|
||||
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
|
||||
*/
|
||||
var testConsole = window.testConsole = {},
|
||||
testLog = window.testLog = {
|
||||
log: [],
|
||||
debug: [],
|
||||
info: [],
|
||||
warn: [],
|
||||
error: [],
|
||||
log: [],
|
||||
debug: [],
|
||||
info: [],
|
||||
warn: [],
|
||||
error: [],
|
||||
reset: function () {
|
||||
for (var i in testLog) {
|
||||
if (testLog.hasOwnProperty(i) && 'length' in testLog[i] && 'push' in testLog[i]) {
|
||||
for ( var i in testLog ) {
|
||||
if ( testLog.hasOwnProperty( i ) && 'length' in testLog[i] && 'push' in testLog[i] ) {
|
||||
testLog[i].length = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (var i in testLog) {
|
||||
if (testLog.hasOwnProperty(i) && testLog[i].push) {
|
||||
testConsole[i] = (function (arr) {
|
||||
for ( var i in testLog ) {
|
||||
if ( testLog.hasOwnProperty( i ) && testLog[i].push ) {
|
||||
testConsole[i] = ( function ( arr ) {
|
||||
return function () {
|
||||
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
|
||||
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
|
||||
};
|
||||
})(testLog[i]);
|
||||
} )( testLog[i] );
|
||||
|
||||
testLog[i].contains = function (needle) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == needle) {
|
||||
testLog[i].contains = function ( needle ) {
|
||||
for ( var i = 0; i < this.length; i++ ) {
|
||||
if ( this[i] == needle ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -117,5 +134,5 @@
|
||||
}
|
||||
|
||||
OpenSeadragon.console = testConsole;
|
||||
})();
|
||||
} )();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user