Draggable: Add battery of tests to cover connectToSortable

Refs #9481
Refs #9675
Closes jquerygh-1323

Author: mikesherov

tests/unit/draggable/draggable.html

@@ -46,19 +46,11 @@
 		#draggable3, #draggable4 {
 			z-index: 100;
 		}
-		#sortable {
+		.sortable {
 			position: relative;
 			top: 8000px;
 			left: 10px;
-		}
-		#sortable2 {
-			position: relative;
-			top: 9000px;
-			left: 10px;
-		}
-		.sortable {
 			width: 300px;
-			height: 100px;
 			padding: 0;
 			margin: 0;
 			border: 0;
@@ -117,13 +109,13 @@
 	<div style="width: 1px; height: 1000px;"></div>
 	<div style="position: absolute; width: 1px; height: 2000px;"></div>
 	<ul id="sortable" class="sortable">
-		    <li>Item 0</li>
-		    <li id="draggableSortable">Item 1</li>
+		    <li id="draggableSortable">Item 0</li>
+		    <li id="draggableSortable2">Item 1</li>
 		    <li>Item 2</li>
 		    <li>Item 3</li>
 		  </ul>
 		  <ul id="sortable2" class="sortable">
-		    <li id="draggableSortableClone">Item 0</li>
+		    <li id="draggableSortableClone" class="sortable2Item">Item 0</li>
 		    <li>Item 1</li>
 		    <li>Item 2</li>
 		    <li>Item 3</li>

tests/unit/draggable/draggable_options.js

@@ -244,23 +244,15 @@ test( "cancelement, default, switching after initialization", function() {
 	TestHelpers.draggable.shouldNotDrag( element, "cancel: input, input dragged", input );
 });
 
-/*
-test( "{ connectToSortable: selector }, default", function() {
-	expect( 1 );
-
-	ok(false, "missing test - untested code is broken code" );
-});
-*/
-
 test( "connectToSortable, dragging out of a sortable", function() {
-	expect( 3 );
+	expect( 4 );
 
 	var sortItem, dragHelper,
 		element = $( "#draggableSortable" ).draggable({
 			scroll: false,
 			connectToSortable: "#sortable"
 		}),
-		sortable = $( "#sortable" ).sortable(),
+		sortable = $( "#sortable" ).sortable({ revert: 100 }),
 		dx = 50,
 		dy = 50,
 		offsetBefore = element.offset(),
@@ -286,6 +278,10 @@ test( "connectToSortable, dragging out of a sortable", function() {
 		// HTML IDs are removed when dragging to a Sortable
 		equal( sortItem[ 0 ], dragHelper[ 0 ], "both have the same helper" );
 		equal( sortItem.attr( "id" ), dragHelper.attr( "id" ), "both have the same id" );
+
+		// http://bugs.jqueryui.com/ticket/9481
+		// connectToSortable causes sortable revert to fail on second attempt
+		equal( sortable.sortable( "option", "revert" ), 100, "sortable revert behavior is preserved" );
 	});
 
 	element.simulate( "drag", {
@@ -294,21 +290,31 @@ test( "connectToSortable, dragging out of a sortable", function() {
 	});
 });
 
-test( "connectToSortable, dragging clone into sortable", function() {
-	expect( 1 );
+asyncTest( "connectToSortable, dragging clone into sortable", function() {
+	expect( 3 );
 
-	var element = $( "#draggableSortableClone" ).draggable({
+	var offsetPlaceholder,
+		element = $( "#draggableSortableClone" ).draggable({
 			scroll: false,
 			connectToSortable: "#sortable",
 			helper: "clone"
 		}),
-		sortable = $( "#sortable" ).sortable(),
+		sortable = $( "#sortable" ).sortable({ revert: 100 }),
 		offsetSortable = sortable.offset();
 
 	$( sortable ).one( "sort", function( event, ui ) {
+		offsetPlaceholder = ui.placeholder.offset();
 		// http://bugs.jqueryui.com/ticket/8809
 		// Position issue when connected to sortable
 		deepEqual( ui.helper.offset(), offsetSortable, "sortable offset is correct" );
+		notDeepEqual( ui.helper.offset(), offsetPlaceholder, "offset not equal to placeholder" );
+	});
+
+	$( sortable ).one( "sortstop", function( event, ui ) {
+		// http://bugs.jqueryui.com/ticket/9675
+		// Animation issue with revert and connectToSortable
+		deepEqual( ui.item.offset(), offsetPlaceholder, "offset eventually equals placeholder" );
+		start();
 	});
 
 	element.simulate( "drag", {
@@ -318,6 +324,87 @@ test( "connectToSortable, dragging clone into sortable", function() {
 	});
 });
 
+test( "connectToSortable, dragging multiple elements in and out of sortable", function() {
+	expect( 1 );
+
+	var element = $( "#draggableSortableClone" ).draggable({
+			scroll: false,
+			connectToSortable: "#sortable",
+			helper: "clone"
+		}),
+		element2 = $( "#draggableSortable" ).draggable({
+			scroll: false,
+			connectToSortable: "#sortable"
+		}),
+		sortable = $( "#sortable" ).sortable({ revert: false }),
+		sortableOffset = sortable.offset();
+
+	// Move element into sortable
+	element.simulate( "drag", {
+		x: sortableOffset.left + 1,
+		y: sortableOffset.top + 1,
+		moves: 10
+	});
+
+	// Move element in sortable out
+	element2.simulate( "drag", {
+		dx: 200,
+		dy: 200,
+		moves: 10
+	});
+
+	// http://bugs.jqueryui.com/ticket/9675
+	// Animation issue with revert and connectToSortable
+	sortable.one( "sortstop", function( event, ui ) {
+		ok( !$.contains( document, ui.placeholder[ 0 ] ), "placeholder was removed" );
+	});
+
+	// Move the clone of the first element back out
+	$( "#sortable .sortable2Item" ).simulate( "drag", {
+		dx: 200,
+		dy: 200,
+		moves: 10
+	});
+});
+
+test( "connectToSortable, dragging through one sortable to a second", function() {
+	expect( 2 );
+
+	var overCount = 0,
+		element = $( "#draggableSortable" ).draggable({
+			scroll: false,
+			connectToSortable: ".sortable"
+		}),
+		delta = 200,
+		sortable = $( "#sortable" ).sortable({ revert: false }),
+		sortable2 = $( "#sortable2" ).sortable({ revert: false }),
+		sortable2Offset = sortable2.offset(),
+		dragParams = {
+			x: sortable2Offset.left + 25,
+			y: sortable2Offset.top + sortable.outerHeight() + delta,
+			moves: 10
+		};
+
+	$( sortable ).one( "sortover", function() {
+		overCount++;
+		sortable2.css( "top", "+=" + delta );
+	});
+
+	$( sortable2 ).on( "sortupdate", function() {
+		ok( true, "second sortable is updated" );
+	});
+
+	$( sortable2 ).one( "sortover", function() {
+		overCount++;
+	});
+
+	$( sortable2 ).one( "sortstop", function() {
+		equal( overCount, 2, "went over both sortables" );
+	});
+
+	element.simulate( "drag", dragParams );
+});
+
 test( "{ containment: Element }", function() {
 	expect( 1 );
 
@@ -456,8 +543,8 @@ test( "containment, element cant be pulled out of container", function() {
 		})
 		.draggable({ containment: "parent" })
 		.simulate( "drag", {
-			dx: 200,
-			dy: 200
+			dx: 500,
+			dy: 500
 		});
 
 	offsetBefore = element.offset();