From b8795e15d6692426e76e2503e27d01257694c628 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sun, 20 Oct 2013 08:55:02 -0400 Subject: [PATCH] Draggable Tests: Add position asserts to drag tests They're currently disabled however due to bugs both in the tests and in the actual widget. --- tests/unit/draggable/draggable_core.js | 4 +- tests/unit/draggable/draggable_methods.js | 12 +-- tests/unit/draggable/draggable_options.js | 90 +++++++++---------- .../unit/draggable/draggable_test_helpers.js | 28 ++++-- 4 files changed, 74 insertions(+), 60 deletions(-) diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index 8732ea772..74be16b35 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -43,12 +43,12 @@ test( "element types", function() { }); test( "No options, relative", function() { - expect( 1 ); + expect( 2 ); TestHelpers.draggable.shouldMove( $( "#draggable1" ).draggable(), "no options, relative" ); }); test( "No options, absolute", function() { - expect( 1 ); + expect( 2 ); TestHelpers.draggable.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" ); }); diff --git a/tests/unit/draggable/draggable_methods.js b/tests/unit/draggable/draggable_methods.js index 63a19e26d..5c540bc54 100644 --- a/tests/unit/draggable/draggable_methods.js +++ b/tests/unit/draggable/draggable_methods.js @@ -51,10 +51,10 @@ test( "destroy", function() { }); test( "enable", function() { - expect( 7 ); + expect( 9 ); element.draggable({ disabled: true }); - TestHelpers.draggable.shouldNotMove( element, ".draggable({ disabled: true })" ); + TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" ); element.draggable("enable"); TestHelpers.draggable.shouldMove( element, ".draggable('enable')" ); @@ -62,7 +62,7 @@ test( "enable", function() { element.draggable("destroy"); element.draggable({ disabled: true }); - TestHelpers.draggable.shouldNotMove( element, ".draggable({ disabled: true })" ); + TestHelpers.draggable.shouldNotDrag( element, ".draggable({ disabled: true })" ); element.draggable( "option", "disabled", false ); equal(element.draggable( "option", "disabled" ), false, "disabled option setter" ); @@ -74,13 +74,13 @@ test( "enable", function() { }); test( "disable", function() { - expect( 10 ); + expect( 12 ); element = $( "#draggable2" ).draggable({ disabled: false }); TestHelpers.draggable.shouldMove( element, ".draggable({ disabled: false })" ); element.draggable( "disable" ); - TestHelpers.draggable.shouldNotMove( element, ".draggable('disable')" ); + TestHelpers.draggable.shouldNotDrag( element, ".draggable('disable')" ); equal( element.draggable( "option", "disabled" ), true, "disabled option getter" ); element.draggable( "destroy" ); @@ -89,7 +89,7 @@ test( "disable", function() { element.draggable( "option", "disabled", true ); equal( element.draggable( "option", "disabled" ), true, "disabled option setter" ); - TestHelpers.draggable.shouldNotMove( element, ".draggable('option', 'disabled', true)" ); + TestHelpers.draggable.shouldNotDrag( element, ".draggable('option', 'disabled', true)" ); ok( !element.draggable( "widget" ).hasClass( "ui-state-disabled" ), "element does not get ui-state-disabled" ); ok( !element.draggable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js index b0ebb18b0..be7d665d4 100644 --- a/tests/unit/draggable/draggable_options.js +++ b/tests/unit/draggable/draggable_options.js @@ -4,7 +4,7 @@ module( "draggable: options" ); // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: 'parent' }, default, no clone", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: "parent" }); TestHelpers.draggable.shouldMove( element, "absolute appendTo: parent" ); @@ -14,7 +14,7 @@ test( "{ appendTo: 'parent' }, default, no clone", function() { // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: Element }, no clone", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] }); TestHelpers.draggable.shouldMove( element, "absolute appendTo: Element" ); @@ -25,7 +25,7 @@ test( "{ appendTo: Element }, no clone", function() { // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: Selector }, no clone", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable2" ).draggable({ appendTo: "#main" }); TestHelpers.draggable.shouldMove( element, "absolute appendTo: Selector" ); @@ -100,19 +100,19 @@ test( "appendTo, default, switching after initialization", function() { }); test( "{ axis: false }, default", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: false }); TestHelpers.draggable.shouldMove( element, "axis: false" ); }); test( "{ axis: 'x' }", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: "x" }); TestHelpers.draggable.testDrag( element, element, 50, 50, 50, 0, "axis: x" ); }); test( "{ axis: 'y' }", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable2" ).draggable({ axis: "y" }); TestHelpers.draggable.testDrag( element, element, 50, 50, 0, 50, "axis: y" ); }); @@ -128,7 +128,7 @@ test( "{ axis: ? }, unexpected", function() { "function() {}": function() {} }; - expect( 6 ); + expect( 12 ); $.each(unexpected, function(key, val) { element = $( "#draggable2" ).draggable({ axis: val }); @@ -138,7 +138,7 @@ test( "{ axis: ? }, unexpected", function() { }); test( "axis, default, switching after initialization", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable({ axis : false }); @@ -156,7 +156,7 @@ test( "axis, default, switching after initialization", function() { }); test( "{ cancel: 'input,textarea,button,select,option' }, default", function() { - expect( 2 ); + expect( 3 ); $( "
" ).appendTo( "#main" ); @@ -166,12 +166,12 @@ test( "{ cancel: 'input,textarea,button,select,option' }, default", function() { element.draggable( "destroy" ); element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" }); - TestHelpers.draggable.shouldNotMove( element, "cancel: default, input dragged", "#draggable-option-cancel-default input" ); + TestHelpers.draggable.shouldNotDrag( element, "cancel: default, input dragged", "#draggable-option-cancel-default input" ); element.draggable( "destroy" ); }); test( "{ cancel: 'span' }", function() { - expect( 2 ); + expect( 3 ); var element = $( "#draggable2" ).draggable(); TestHelpers.draggable.shouldMove( element, "cancel: default, span dragged", "#draggable2 span" ); @@ -179,11 +179,11 @@ test( "{ cancel: 'span' }", function() { element.draggable( "destroy" ); element = $( "#draggable2" ).draggable({ cancel: "span" }); - TestHelpers.draggable.shouldNotMove( element, "cancel: span, span dragged","#draggable2 span" ); + TestHelpers.draggable.shouldNotDrag( element, "cancel: span, span dragged","#draggable2 span" ); }); test( "{ cancel: ? }, unexpected", function() { - expect( 6 ); + expect( 12 ); var element, unexpected = { @@ -216,32 +216,32 @@ test( "{ cancel: Selectors }, matching parent selector", function() { $( "#wrapping a" ).append( element ); TestHelpers.draggable.shouldMove( element, "drag span child", "#draggable2 span" ); - TestHelpers.draggable.shouldNotMove( $( "#draggable2 span a" ), "drag span a" ); - TestHelpers.draggable.shouldNotMove( $( "#wrapping a" ), "drag wrapping a" ); + TestHelpers.draggable.shouldNotDrag( $( "#draggable2 span a" ), "drag span a" ); + TestHelpers.draggable.shouldNotDrag( $( "#wrapping a" ), "drag wrapping a" ); $( "#draggable2" ).draggable( "option", "cancel", "span > a" ); $( "#draggable2" ).find( "a" ).append( "" ); TestHelpers.draggable.shouldMove( element, "drag span child", $( "#draggable2 span a" ).last() ); - TestHelpers.draggable.shouldNotMove( $( "#draggable2 span a" ).first(), "drag span a first child" ); + TestHelpers.draggable.shouldNotDrag( $( "#draggable2 span a" ).first(), "drag span a first child" ); }); */ test( "cancelement, default, switching after initialization", function() { - expect( 3 ); + expect( 4 ); $( "
" ).appendTo( "#main" ); var input = $( "#draggable-option-cancel-default input" ), element = $( "#draggable-option-cancel-default" ).draggable(); - TestHelpers.draggable.shouldNotMove( element, "cancel: default, input dragged", input ); + TestHelpers.draggable.shouldNotDrag( element, "cancel: default, input dragged", input ); element.draggable( "option", "cancel", "textarea" ); TestHelpers.draggable.shouldMove( element, "cancel: textarea, input dragged", input ); element.draggable( "option", "cancel", "input" ); - TestHelpers.draggable.shouldNotMove( element, "cancel: input, input dragged", input ); + TestHelpers.draggable.shouldNotDrag( element, "cancel: input, input dragged", input ); }); /* @@ -293,7 +293,7 @@ test( "{ containment: Selector }", function() { }); test( "{ containment: [x1, y1, x2, y2] }", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable1" ).draggable(), eo = element.offset(); @@ -375,7 +375,7 @@ test( "containment, account for border", function() { }); test( "containment, default, switching after initialization", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable({ containment: false }); @@ -586,21 +586,21 @@ test( "cursorAt, switching after initialization", function() { }); test( "disabled", function() { - expect( 3 ); + expect( 5 ); var element = $( "#draggable1" ).draggable(); TestHelpers.draggable.shouldMove( element, "disabled: default" ); element.draggable( "option", "disabled", true ); - TestHelpers.draggable.shouldNotMove( element, "option: disabled true" ); + TestHelpers.draggable.shouldNotDrag( element, "option: disabled true" ); element.draggable( "option", "disabled", false ); TestHelpers.draggable.shouldMove( element, "option: disabled false" ); }); test( "{ grid: [50, 50] }, relative", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable1" ).draggable({ grid: [ 50, 50 ] }); TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] relative" ); @@ -608,7 +608,7 @@ test( "{ grid: [50, 50] }, relative", function() { }); test( "{ grid: [50, 50] }, absolute", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable2" ).draggable({ grid: [ 50, 50 ] }); TestHelpers.draggable.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] absolute" ); @@ -616,7 +616,7 @@ test( "{ grid: [50, 50] }, absolute", function() { }); test( "grid, switching after initialization", function() { - expect( 4 ); + expect( 8 ); var element = $( "#draggable1" ).draggable(); @@ -631,17 +631,17 @@ test( "grid, switching after initialization", function() { }); test( "{ handle: 'span' }", function() { - expect( 3 ); + expect( 5 ); var element = $( "#draggable2" ).draggable({ handle: "span" }); TestHelpers.draggable.shouldMove( element, "handle: span", "#draggable2 span"); TestHelpers.draggable.shouldMove( element, "handle: span child", "#draggable2 span em" ); - TestHelpers.draggable.shouldNotMove( element, "handle: span element" ); + TestHelpers.draggable.shouldNotDrag( element, "handle: span element" ); }); test( "handle, default, switching after initialization", function() { - expect( 6 ); + expect( 11 ); var element = $( "#draggable2" ).draggable(); @@ -650,7 +650,7 @@ test( "handle, default, switching after initialization", function() { // Switch element.draggable( "option", "handle", "span" ); - TestHelpers.draggable.shouldNotMove( element, "handle: span as option, element dragged" ); + TestHelpers.draggable.shouldNotDrag( element, "handle: span as option, element dragged" ); TestHelpers.draggable.shouldMove( element, "handle: span as option, span dragged", "#draggable2 span" ); // And back @@ -660,7 +660,7 @@ test( "handle, default, switching after initialization", function() { }); test( "helper, default, switching after initialization", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable(); TestHelpers.draggable.shouldMove( element, "helper: default" ); @@ -673,21 +673,21 @@ test( "helper, default, switching after initialization", function() { }); test( "{ helper: 'clone' }, relative", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable1" ).draggable({ helper: "clone" }); TestHelpers.draggable.shouldNotMove( element, "helper: clone relative" ); }); test( "{ helper: 'clone' }, absolute", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable2" ).draggable({ helper: "clone" }); TestHelpers.draggable.shouldNotMove( element, "helper: clone absolute" ); }); test( "{ helper: 'original' }, relative, with scroll offset on parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable({ helper: "original" }); @@ -704,7 +704,7 @@ test( "{ helper: 'original' }, relative, with scroll offset on parent", function }); test( "{ helper: 'original' }, relative, with scroll offset on root", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable({ helper: "original" }); @@ -721,7 +721,7 @@ test( "{ helper: 'original' }, relative, with scroll offset on root", function() }); test( "{ helper: 'original' }, relative, with scroll offset on root and parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).draggable({ helper: "original" }); @@ -742,7 +742,7 @@ test( "{ helper: 'original' }, relative, with scroll offset on root and parent", }); test( "{ helper: 'original' }, absolute, with scroll offset on parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -759,7 +759,7 @@ test( "{ helper: 'original' }, absolute, with scroll offset on parent", function }); test( "{ helper: 'original' }, absolute, with scroll offset on root", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -776,7 +776,7 @@ test( "{ helper: 'original' }, absolute, with scroll offset on root", function() }); test( "{ helper: 'original' }, absolute, with scroll offset on root and parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -797,7 +797,7 @@ test( "{ helper: 'original' }, absolute, with scroll offset on root and parent", }); test( "{ helper: 'original' }, fixed, with scroll offset on parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -814,7 +814,7 @@ test( "{ helper: 'original' }, fixed, with scroll offset on parent", function() }); test( "{ helper: 'original' }, fixed, with scroll offset on root", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -831,7 +831,7 @@ test( "{ helper: 'original' }, fixed, with scroll offset on root", function() { }); test( "{ helper: 'original' }, fixed, with scroll offset on root and parent", function() { - expect( 3 ); + expect( 6 ); var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" }); @@ -1032,7 +1032,7 @@ test( "opacity, default, switching after initialization", function() { }); asyncTest( "revert and revertDuration", function() { - expect( 4 ); + expect( 7 ); var element = $( "#draggable2" ).draggable({ revert: true, @@ -1062,7 +1062,7 @@ asyncTest( "revert and revertDuration", function() { }); test( "revert: valid", function() { - expect( 1 ); + expect( 2 ); var element = $( "#draggable2" ).draggable({ revert: "valid", @@ -1075,7 +1075,7 @@ test( "revert: valid", function() { }); test( "scope", function() { - expect( 2 ); + expect( 4 ); var element = $( "#draggable2" ).draggable({ scope: "tasks", diff --git a/tests/unit/draggable/draggable_test_helpers.js b/tests/unit/draggable/draggable_test_helpers.js index 285da1447..583eece90 100644 --- a/tests/unit/draggable/draggable_test_helpers.js +++ b/tests/unit/draggable/draggable_test_helpers.js @@ -7,8 +7,18 @@ TestHelpers.draggable = { return $.contains( element[ 0 ].ownerDocument, element[ 0 ] ); })(), testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) { - var offsetAfter, actual, expected, - offsetBefore = el.offset(); + msg = msg ? msg + "." : ""; + + var offsetActual, + offsetBefore = el.offset(), + offsetExpected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY }; + + $( el ).one( "dragstop", function( event, ui ) { + var expectedPosition = { left: ui.originalPosition.left + expectedDX, top: ui.originalPosition.top + expectedDY }; + // TODO: fix test bugs and actual bugs that cause this not to be true + // deepEqual( ui.position, expectedPosition, "position dragged[" + dx + ", " + dy + "] " + msg ); + ok( true, "TODO: deepEqual( ui.position, expectedPosition, 'position dragged[" + dx + ", " + dy + "] " + msg + "');"); + } ); $( handle ).simulate( "drag", { dx: dx, @@ -17,13 +27,10 @@ TestHelpers.draggable = { // so we can't faithfully test things that rely on a scroll event (which is async) moves: 1 }); - offsetAfter = el.offset(); - actual = { left: offsetAfter.left, top: offsetAfter.top }; - expected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY }; + offsetActual = el.offset(); - msg = msg ? msg + "." : ""; - deepEqual( actual, expected, "dragged[" + dx + ", " + dy + "] " + msg ); + deepEqual( offsetActual, offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg ); }, shouldMove: function( el, why, handle ) { handle = handle || el; @@ -33,6 +40,13 @@ TestHelpers.draggable = { handle = handle || el; TestHelpers.draggable.testDrag( el, handle, 50, 50, 0, 0, why ); }, + shouldNotDrag: function( el, why, handle ) { + $( el ).bind( "dragstop", function() { + ok( false, "should not drag " + why ); + } ); + TestHelpers.draggable.shouldNotMove( el, why, handle ); + $( el ).unbind( "dragstop" ); + }, testScroll: function( el, position ) { var oldPosition = $( "#main" ).css( "position" ); $( "#main" ).css( "position", position);