From 6049a7ecef5e1ab09057fa464aa960d2ece56e02 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Wed, 28 Aug 2013 11:33:41 -0700 Subject: [PATCH] Unit tests for canvas drag, release, click events Added test for canvas-drag, canvas-release, and canvas-click events --- test/events.js | 42 ++++++++++++++- test/test.js | 144 +++++++++++++++++++++++++++++++------------------ 2 files changed, 133 insertions(+), 53 deletions(-) diff --git a/test/events.js b/test/events.js index 31fa9dd1..92f1cd81 100644 --- a/test/events.js +++ b/test/events.js @@ -5,12 +5,12 @@ module( 'Events', { setup: function () { - var example = $( '
' ).appendTo( "#qunit-fixture" ); + var example = $( '
' ).appendTo( "#qunit-fixture" ); testLog.reset(); viewer = OpenSeadragon( { - id: 'example', + id: 'eventsexample', prefixUrl: '/build/openseadragon/images/', springStiffness: 100 // Faster animation = faster tests } ); @@ -60,4 +60,42 @@ 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' ); + } ); + } )(); diff --git a/test/test.js b/test/test.js index 37b7a075..a3696998 100644 --- a/test/test.js +++ b/test/test.js @@ -1,67 +1,109 @@ /* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */ -(function() { +(function () { // ---------- window.Util = { // ---------- - simulateViewerClick: function(viewer, widthFactor, heightFactor) { - if (widthFactor === undefined) { + simulateViewerClick: function ( viewer, widthFactor, heightFactor ) { + if ( widthFactor === undefined ) { widthFactor = 0.5; } //TODO Redefine to be the middle by default - if (heightFactor === undefined) { + if ( heightFactor === undefined ) { 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 - 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 event = { - clientX: offset.left + Math.floor($canvas.width() * widthFactor), - clientY: offset.top + Math.floor($canvas.height() * heightFactor) + 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); + .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 ) + }; + + $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 () { - $("#qunit-fixture") - .append('
') - .append('
') - .append('
'); + $( "#qunit-fixture" ) + .append( '
' ) + .append( '
' ) + .append( '
' ); }, - 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 +114,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 +159,5 @@ } OpenSeadragon.console = testConsole; -})(); +} )();