Browse files

Adding "drag" unit tests

  • Loading branch information...
1 parent 195ed42 commit 218d43eef4059fc18d19ef47b96083836295db19 @threedubmedia committed Jun 8, 2010
Showing with 583 additions and 0 deletions.
  1. +50 −0 drag/test/binding.js
  2. +164 −0 drag/test/handlers.js
  3. +25 −0 drag/test/index.html
  4. +179 −0 drag/test/interaction.js
  5. +33 −0 drag/test/live.js
  6. +46 −0 drag/test/method.js
  7. +68 −0 drag/test/properties.js
  8. +18 −0 drag/test/requirements.js
View
50 drag/test/binding.js
@@ -0,0 +1,50 @@
+test("Event Binding",function(){
+
+ expect( 72 );
+
+ $.each(['draginit','dragstart','drag','dragend'],function( i, type ){
+
+ // make sure the event handler gets bound to the element
+ var $elem = $('<div />'),
+ elem = $elem[0],
+ count = 0,
+ fn = function(){
+ count += 1;
+ },
+ opts = {
+ which: 99,
+ distance: 88,
+ not: 77,
+ handle: 66,
+ relative: 55,
+ drop: 44,
+ click: 33
+ },
+ data;
+
+ ok( $elem.bind( type, fn )[0] == elem, ".bind('"+ type +"', fn )" );
+ ok( $.data( elem, $.event.special.drag.datakey ), "drag data exists" );
+ ok( $.data( elem, "events" ), "event data exists" );
+ ok( $.data( elem, "events" )[ type ][0], type +" event handler added" );
+
+ ok( $elem.trigger( type )[0] == elem, ".trigger('"+ type +"')" );
+ ok( count == 1, "handler was triggered");
+
+ ok( $elem.unbind( type )[0] == elem, ".unbind('"+ type +"')" );
+ ok( !$.data( elem, "events" ), "event data removed" );
+ ok( !$.data( elem, $.event.special.drag.datakey ), "drag data removed" );
+
+ ok( $elem.bind( type, opts, fn )[0] == elem, ".bind('"+ type +"', data, fn )" );
+ ok( data = $.data( elem, $.event.special.drag.datakey ), "drag data exists" );
+ ok( data.which == opts.which, "'which' option stored" );
+ ok( data.distance == opts.distance, "'distance' option stored" );
+ ok( data.not == opts.not, "'not' option stored" );
+ ok( data.handle == opts.handle, "'handle' option stored" );
+ ok( data.relative == opts.relative, "'relative' option stored" );
+ ok( data.drop == opts.drop, "'drop' option stored" );
+ ok( data.click == opts.click, "'click'option stored" );
+
+ $elem.remove();
+
+ });
+});
View
164 drag/test/handlers.js
@@ -0,0 +1,164 @@
+test("Event Handlers",function(){
+
+ expect( 35 );
+
+ // create the markup for the tests
+ var $div = $('<div />')
+ .css({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: 100,
+ width: 100
+ })
+ .appendTo( document.body )
+ .bind("draginit dragstart drag dragend click", function( event ){
+ counts[ event.type ] += 1;
+ if ( extratest[ event.type ] )
+ extratest[ event.type ].apply( this, arguments );
+ return returned[ event.type ];
+ }),
+ counts, extratest, returned,
+ reset = function(){
+ counts = { draginit:0, dragstart:0, drag:0, dragend:0 };
+ extratest = {};
+ returned = {};
+ };
+
+ // test DRAGINIT FALSE
+ setTimeout(function(){
+ ok( true, 'DRAGINIT returns false...' );
+ // test prep
+ reset();
+ returned.draginit = false;
+ // simulate a partial drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check counts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 0, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test DRAGSTART FALSE
+ setTimeout(function(){
+ ok( true, 'DRAGSTART returns false...' );
+ // test prep
+ reset();
+ returned.dragstart = false;
+ // simulate a partial drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check counts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test DRAG FALSE
+ setTimeout(function(){
+ ok( true, 'DRAG returns false...' );
+ // test prep
+ reset();
+ returned.drag = false;
+ // simulate a partial drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check ocunts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test DRAGINIT ELEMENT
+ setTimeout(function(){
+ ok( true, 'DRAGINIT returns different element...' );
+ // test prep
+ reset();
+ var $clone = returned.draginit = $div.clone( true );
+ extratest.dragstart = extratest.drag = extratest.dragend = function( ev, dd ){
+ ok( dd.drag === $clone[0], ev.type +' target element' );
+ };
+ // simulate a complete drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check counts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test DRAGINIT ELEMENTS
+ setTimeout(function(){
+ ok( true, 'DRAGINIT returns two elements...' );
+ // test prep
+ reset();
+ returned.draginit = $div.clone( true ).add( $div );
+ // simulate a complete drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check counts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 2, "dragstart");
+ equals( counts.drag, 2, "drag");
+ equals( counts.dragend, 2, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test DRAGSTART PROXY
+ setTimeout(function(){
+ ok( true, 'DRAGSTART returns proxy element...' );
+ // test prep
+ reset();
+ var $proxy = returned.dragstart = $div.clone().addClass('proxy');
+ extratest.drag = extratest.dragend = function( ev, dd ){
+ ok( dd.proxy === $proxy[0], ev.type +' proxy element' );
+ };
+ // simulate a complete drag
+ $div.fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // check counts
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ // continue
+ start();
+ }, 20 );
+ stop();
+
+ // test clean-up
+ setTimeout(function(){
+ $div.remove();
+ start();
+ }, 20 );
+ stop();
+
+});
View
25 drag/test/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link href="./inc/qunit.css" rel="stylesheet" />
+<script src="./inc/jquery-1.4.2.js"></script>
+<script src="./inc/qunit.js"></script>
+<script src="./inc/jquery.fire.js"></script>
+<script src="./inc/jquery.event.drag.js"></script>
+<script src="./requirements.js"></script>
+<script src="./binding.js"></script>
+<script src="./method.js"></script>
+<script src="./interaction.js"></script>
+<script src="./properties.js"></script>
+<script src="./handlers.js"></script>
+<script src="./live.js"></script>
+<title>ThreeDubMedia &middot; jquery.event.drag.js</title>
+</head>
+<body>
+<h1 id="qunit-header">jquery.event.drag.js Unit Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+</body>
+</html>
View
179 drag/test/interaction.js
@@ -0,0 +1,179 @@
+test("Interaction Options",function(){
+
+ expect( 60 );
+
+ // create the markup for the test
+ var $div = $('<div />')
+ .css({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: 100,
+ width: 100
+ })
+ .append('<div class="child" />')
+ .appendTo( document.body )
+ .bind("draginit dragstart drag dragend click", function( event ){
+ counts[ event.type ] += 1;
+ }),
+ counts,
+ reset = function( opts ){
+ counts = { draginit:0, dragstart:0, drag:0, dragend:0, click:0 };
+ $.extend( $div.data( $.event.special.drag.datakey ), $.event.special.drag.defaults, opts );
+ };
+
+ // prep DEFAULT interaction
+ reset();
+ // simulate DEFAULT interaction
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, "Drag defaults...");
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 0, "click");
+
+ // prep NOT interaction
+ reset({ not:'.child' });
+ // simulate NOT interaction
+ $div.children()
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "not" option (matched)...');
+ equals( counts.draginit, 0, "draginit");
+ equals( counts.dragstart, 0, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ equals( counts.click, 1, "click");
+ // simulate NON NOT interaction
+ reset({ not:'.child' });
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "not" option (unmatched)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 0, "click");
+
+ // prep HANDLE interaction
+ reset({ handle:'.child' });
+ // simulate HANDLE interaction
+ $div.children()
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "handle" option (matched)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 0, "click");
+ // simulate NON HANDLE interaction
+ reset({ handle:'.child' });
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "handle" option (unmatched)...');
+ equals( counts.draginit, 0, "draginit");
+ equals( counts.dragstart, 0, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ equals( counts.click, 1, "click");
+
+ // prep WHICH interaction
+ reset({ which:3 });
+ // simulate WHICH interaction
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50, button:2 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "which" option (matched)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 0, "click");
+ // simulate NON WHICH interaction
+ reset({ which:3 });
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "which" option (unmatched)...');
+ equals( counts.draginit, 0, "draginit");
+ equals( counts.dragstart, 0, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ equals( counts.click, 1, "click");
+
+ // prep DISTANCE interaction
+ reset({ distance:5 });
+ // simulate NON DISTANCE interaction
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "distance" option (unmatched)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 0, "dragstart");
+ equals( counts.drag, 0, "drag");
+ equals( counts.dragend, 0, "dragend");
+ equals( counts.click, 1, "click");
+ // simulate DISTANCE interaction
+ reset({ distance:5 });
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:53, clientY:54 })
+ .fire("mouseup",{ clientX:53, clientY:54 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "distance" option (matched)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 0, "click");
+
+ // prep CLICK interaction
+ reset({ click:true });
+ // simulate CLICK interaction
+ $div
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+ // inspect results
+ ok( true, 'Drag "click" option (true)...');
+ equals( counts.draginit, 1, "draginit");
+ equals( counts.dragstart, 1, "dragstart");
+ equals( counts.drag, 1, "drag");
+ equals( counts.dragend, 1, "dragend");
+ equals( counts.click, 1, "click");
+
+ $div.remove();
+});
+
View
33 drag/test/live.js
@@ -0,0 +1,33 @@
+test("Live Delegation",function(){
+
+ expect( 16 );
+
+ // set up the delegation
+ $('.drag').live("draginit dragstart drag dragend",function( event ){
+ counts[ event.type ] += 1;
+ equals( this, $drag[0], event.type+" target" );
+ });
+ // local refs
+ var counts = { draginit:0, dragstart:0, drag:0, dragend:0 },
+ // add a div to test the delegation
+ $drag = $('<div class="drag" />').appendTo( document.body );
+
+ // check triggering of the event handlers
+ $.each(["dragend","drag","dragstart","draginit"],function( i, type ){
+ $drag.trigger( type );
+ equals( counts[ type ], 1, "triggered "+ type );
+ counts[ type ] = 0;
+ });
+
+ // simulate a complete drag
+ $drag
+ .fire("mousedown",{ clientX:50, clientY:50 })
+ .fire("mousemove",{ clientX:51, clientY:51 })
+ .fire("mouseup",{ clientX:51, clientY:51 })
+ .trigger("click");
+
+ // check the event handler counts
+ $.each(["dragend","drag","dragstart","draginit"],function( i, type ){
+ equals( counts[ type ], 1, "delegated "+ type );
+ });
+});
View
46 drag/test/method.js
@@ -0,0 +1,46 @@
+test("Instance Method",function(){
+
+ expect( 56 );
+
+ $.each(['init','start','','end'],function( i, type ){
+
+ // make sure the event handler gets bound to the element
+ var $elem = $('<div />'),
+ elem = $elem[0],
+ count = 0,
+ fn = function(){
+ count += 1;
+ },
+ opts = {
+ which: 99,
+ distance: 88,
+ not: 77,
+ handle: 66,
+ drop: 55,
+ click: 44
+ },
+ data;
+
+ ok( $elem.drag( type, fn )[0] == elem, ".drag("+( type ? "'"+ type +"'," : "" )+" fn )" );
+ ok( $.data( elem, $.event.special.drag.datakey ), "drag data exists" );
+ ok( $.data( elem, "events" ), "event data exists" );
+ ok( $.data( elem, "events" )[ 'drag'+type ][0], 'drag'+ type +" event handler added" );
+
+ ok( $elem.drag( type )[0] == elem, ".drag("+( type ? "'"+ type +"'," : "" )+")" );
+ ok( count == 1, "handler was triggered");
+
+ $elem.unbind( type );
+
+ ok( $elem.drag( type, fn, opts )[0] == elem, ".drag("+( type ? "'"+ type +"'," : "" )+" fn, opts )" );
+ ok( data = $.data( elem, $.event.special.drag.datakey ), "drag data exists" );
+ ok( data.which == opts.which, "'which' option stored" );
+ ok( data.distance == opts.distance, "'distance' option stored" );
+ ok( data.not == opts.not, "'not' option stored" );
+ ok( data.handle == opts.handle, "'handle' option stored" );
+ ok( data.drop == opts.drop, "'drop' option stored" );
+ ok( data.click == opts.click, "'click'option stored" );
+
+ $elem.remove();
+
+ });
+});
View
68 drag/test/properties.js
@@ -0,0 +1,68 @@
+test("Callback Properties",function(){
+
+ expect( 13 );
+
+ // create the markup for the test
+ var $div = $('<div />')
+ .appendTo( document.body ),
+ // starting position
+ sx = Math.round( Math.random() * 90 ) + 5,
+ sy = Math.round( Math.random() * 90 ) + 5,
+ // mouse offset position
+ mx = Math.round( Math.random() * 90 ) + 5,
+ my = Math.round( Math.random() * 90 ) + 5,
+ // distance dragged
+ dx = Math.round( Math.random() * 90 ) + 5,
+ dy = Math.round( Math.random() * 90 ) + 5;
+
+ $div
+ .drag(function( event, dd ){
+
+ ok( dd.target == $div[0], "target: [drag target]" );
+ ok( dd.drag == $div[0], "drag: [drag target]" );
+ ok( dd.proxy == $div[0], "proxy: [drag target]" );
+
+ equals( dd.startX, sx + mx, "startX" );
+ equals( dd.startY, sy + my, "startY" );
+
+ equals( dd.deltaX, dx, "deltaX" );
+ equals( dd.deltaY, dy, "deltaY" );
+
+ equals( dd.originalX, sx, "originalX" );
+ equals( dd.originalY, sy, "originalY" );
+
+ equals( dd.offsetX, sx + dx, "offsetX" );
+ equals( dd.offsetY, sy + dy, "offsetY" );
+
+ ok( dd.drop.constructor == Array && !dd.drop.length, "drop: []" );
+ ok( dd.available.constructor == Array && !dd.available.length, "available: []" );
+
+ })
+ .css({
+ position: 'absolute',
+ top: sy,
+ left: sx,
+ height: 100,
+ width: 100
+ })
+ // simulate a drag
+ .fire("mousedown",{
+ clientX: sx + mx,
+ clientY: sy + my,
+ pageX: sx + mx,
+ pageY: sy + my
+ })
+ .fire("mousemove",{
+ clientX: sx + mx + dx,
+ clientY: sy + my + dy,
+ pageX: sx + mx + dx,
+ pageY: sy + my + dy
+ })
+ .fire("mouseup",{
+ clientX: sx + mx + dx,
+ clientY: sy + my + dy,
+ pageX: sx + mx + dx,
+ pageY: sy + my + dy
+ });
+ $div.remove();
+});
View
18 drag/test/requirements.js
@@ -0,0 +1,18 @@
+module("EVENT.DRAG");
+
+test("Requirements",function(){
+
+ expect( 7 );
+
+ // make sure the right jquery is included
+ ok( window.jQuery, "jQuery exists" );
+ ok( parseFloat( jQuery([]).jquery ) >= 1.4, "jQuery version is 1.4 or greater" );
+
+ // make sure the event interface is complete
+ ok( jQuery.event.special.draginit, "DRAGINIT special event is defined" );
+ ok( jQuery.event.special.dragstart, "DRAGSTART special event is defined" );
+ ok( jQuery.event.special.drag, "DRAG special event is defined" );
+ ok( jQuery.event.special.dragend, "DRAGEND special event is defined" );
+ ok( jQuery([]).drag, "$('...').drag() method is defined" );
+
+});

0 comments on commit 218d43e

Please sign in to comment.