Skip to content
Permalink
Browse files

Draggable Tests: Add test coverage for supported options

  • Loading branch information
mikesherov committed Jan 12, 2013
1 parent 6d3a1e1 commit c278a4461b399c5b84abf4e03c1d902bfd130441
@@ -23,6 +23,7 @@
"Globalize",
"module",
"notEqual",
"notDeepEqual",
"notStrictEqual",
"ok",
"QUnit",
@@ -277,18 +277,30 @@ function findCenter( elem ) {
};
}

function findCorner( elem ) {
var offset,
document = $( elem.ownerDocument );
elem = $( elem );
offset = elem.offset();

return {
x: offset.left - document.scrollLeft(),
y: offset.top - document.scrollTop()
};
}

$.extend( $.simulate.prototype, {
simulateDrag: function() {
var i = 0,
target = this.target,
options = this.options,
center = findCenter( target ),
center = options.handle === "corner" ? findCorner( target ) : findCenter( target ),
x = Math.floor( center.x ),
y = Math.floor( center.y ),
dx = options.dx || 0,
dy = options.dy || 0,
moves = options.moves || 3,
coord = { clientX: x, clientY: y };
coord = { clientX: x, clientY: y },
dx = options.dx || ( options.x !== undefined ? options.x - x : 0 ),
dy = options.dy || ( options.y !== undefined ? options.y - y : 0 ),
moves = options.moves || 3;

this.simulateEvent( target, "mousedown", coord );

@@ -6,12 +6,12 @@

<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css">

<style>
/* See #9077 */
#draggable3, #draggable4 { z-index: 100; }
</style>

<script src="../../../external/qunit.js"></script>
<script src="../../jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
@@ -23,7 +23,8 @@
"ui/jquery.ui.widget.js",
"ui/jquery.ui.mouse.js",
"ui/jquery.ui.resizable.js",
"ui/jquery.ui.draggable.js"
"ui/jquery.ui.draggable.js",
"ui/jquery.ui.droppable.js"
]
});
</script>
@@ -45,15 +46,12 @@ <h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<div id="main"></div>

<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
<div style='width: 1px; height: 1000px;'></div>
<div style="position: absolute; width: 1px; height: 2000px;"></div>
<div id="draggable3"></div>
<div id="draggable4"></div>

<div id="main"></div>
<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
<div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
<div style="width: 1px; height: 1000px;"></div>
<div style="position: absolute; width: 1px; height: 2000px;"></div>
</div>

</body>
@@ -1,20 +1,16 @@
TestHelpers.commonWidgetTests( "draggable", {
defaults: {
addClasses: true,
appendTo: "parent",
axis: false,
cancel: "input,textarea,button,select,option",
connectToSortable: false,
containment: false,
cursor: "auto",
cursorAt: false,
delay: 0,
disabled: false,
distance: 1,
grid: false,
handle: false,
helper: "original",
iframeFix: false,
opacity: false,
refreshPositions: false,
revert: false,
@@ -29,6 +25,12 @@ TestHelpers.commonWidgetTests( "draggable", {
stack: false,
zIndex: false,

//todo: remove the following option checks when interactions are rewritten:
addClasses: true,
delay: 0,
distance: 1,
iframeFix: false,

// callbacks
create: null,
drag: null,
@@ -2,64 +2,79 @@
* draggable_core.js
*/

(function($) {
(function( $ ) {

module("draggable");
var relativeElement, absoluteElement;

test("element types", function() {
var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" +
",acronym,code,samp,kbd,var,img,hr" +
",input,button,label,select,iframe").split(",");
module( "draggable: core", {
setup: function() {
relativeElement = $("<div style='width: 200px; height: 100px;'>Relative</div>").appendTo("#qunit-fixture");
absoluteElement = $("<div style='background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;'><span>Absolute</span></div>").appendTo("#qunit-fixture");
},
teardown: function() {
relativeElement.remove();
absoluteElement.remove();
}
});

test( "element types", function() {
var typeNames = (
"p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" +
",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" +
",acronym,code,samp,kbd,var,img,hr" +
",input,button,label,select,iframe"
).split(",");

expect( typeNames.length * 2 );

$.each(typeNames, function(i) {
$.each( typeNames, function( i ) {
var offsetBefore, offsetAfter,
typeName = typeNames[i],
el = $(document.createElement(typeName)).appendTo("#qunit-fixture");
typeName = typeNames[ i ],
el = $( document.createElement( typeName ) ).appendTo("#qunit-fixture");

if ( typeName === "table" ) {
el.append("<tr><td>content</td></tr>");
}

(typeName === "table" && el.append("<tr><td>content</td></tr>"));
el.draggable({ cancel: "" });
offsetBefore = el.offset();
el.simulate( "drag", {
dx: 50,
dy: 50
});
offsetAfter = el.offset();
// there are some rounding errors in FF, Chrome, and IE9, so we can't say equal, we have to settle for close enough
closeEnough(offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + ">");
closeEnough(offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + ">");

// Support: FF, Chrome, and IE9,
// there are some rounding errors in so we can't say equal, we have to settle for close enough
closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" );
closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" );
el.draggable("destroy");
el.remove();
});
});

test("No options, relative", function() {
test( "No options, relative", function() {
expect( 1 );
var el = $("#draggable1").draggable();
TestHelpers.draggable.shouldMove(el);
TestHelpers.draggable.shouldMove( relativeElement.draggable() );
});

test("No options, absolute", function() {
test( "No options, absolute", function() {
expect( 1 );
var el = $("#draggable2").draggable();
TestHelpers.draggable.shouldMove(el);
TestHelpers.draggable.shouldMove( absoluteElement.draggable() );
});

test("resizable handle with complex markup (#8756 / #8757)", function() {
test( "resizable handle with complex markup (#8756 / #8757)", function() {
expect( 2 );

$("#draggable1")
relativeElement
.append(
$("<div>")
.addClass("ui-resizable-handle")
.addClass("ui-resizable-w")
.append($("<div>"))
.addClass("ui-resizable-handle ui-resizable-w")
.append( $("<div>") )
);

var handle = $(".ui-resizable-w div"),
target = $("#draggable1").draggable().resizable({ handles: "all" });
target = relativeElement.draggable().resizable({ handles: "all" });

// todo: fix resizable so it doesn't require a mouseover
handle.simulate("mouseover").simulate( "drag", { dx: -50 } );
@@ -70,4 +85,4 @@ test("resizable handle with complex markup (#8756 / #8757)", function() {
equal( target.width(), 200, "compare width" );
});

})(jQuery);
})( jQuery );

0 comments on commit c278a44

Please sign in to comment.
You can’t perform that action at this time.