diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/resizable')
9 files changed, 868 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/resizable/all.html b/apps/it/static/js/ui/tests/unit/resizable/all.html new file mode 100644 index 0000000..63bc458 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable Test Suite</title> + + <script src="../../../jquery-1.10.2.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <link rel="stylesheet" href="../qunit-composite.css"> + <script src="../../../external/qunit.js"></script> + <script src="../qunit-composite.js"></script> + <script src="../subsuite.js"></script> + + <script> + testAllVersions( "resizable" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Resizable Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/resizable/images/test.jpg b/apps/it/static/js/ui/tests/unit/resizable/images/test.jpg Binary files differnew file mode 100644 index 0000000..0175b13 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/images/test.jpg diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable.html b/apps/it/static/js/ui/tests/unit/resizable/resizable.html new file mode 100644 index 0000000..255c988 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Resizable Test Suite</title> + + <script src="../../jquery.js"></script> + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + <script> + TestHelpers.loadResources({ + css: [ "ui.core", "ui.resizable" ], + js: [ + "ui/jquery.ui.core.js", + "ui/jquery.ui.widget.js", + "ui/jquery.ui.mouse.js", + "ui/jquery.ui.resizable.js" + ] + }); + </script> + + <script src="resizable_common.js"></script> + <script src="resizable_core.js"></script> + <script src="resizable_events.js"></script> + <script src="resizable_methods.js"></script> + <script src="resizable_options.js"></script> + <script src="resizable_test_helpers.js"></script> + + <script src="../swarminject.js"></script> + + <style> + #container { + width: 300px; + height: 200px; + } + #resizable1 { + background: green; + height: 100px; + width: 100px; + } + #resizable2 { + height: 100px; + width: 100px; + } + </style> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Resizable Test Suite</h1> +<h2 id="qunit-banner"></h2> +<div id="qunit-testrunner-toolbar"></div> +<h2 id="qunit-userAgent"></h2> +<ol id="qunit-tests"></ol> +<div id="qunit-fixture"> + +<div id="container"> + <div id="resizable1">I'm a resizable.</div> +</div> +<img src="images/test.jpg" id="resizable2" alt="solid gray"> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_common.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_common.js new file mode 100644 index 0000000..c261ac5 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_common.js @@ -0,0 +1,30 @@ +TestHelpers.commonWidgetTests( "resizable", { + defaults: { + alsoResize: false, + animate: false, + animateDuration: "slow", + animateEasing: "swing", + aspectRatio: false, + autoHide: false, + cancel: "input,textarea,button,select,option", + containment: false, + delay: 0, + disabled: false, + distance: 1, + ghost: false, + grid: false, + handles: "e,s,se", + helper: false, + maxHeight: null, + maxWidth: null, + minHeight: 10, + minWidth: 10, + zIndex: 90, + + // callbacks + create: null, + resize: null, + start: null, + stop: null + } +}); diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_core.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_core.js new file mode 100644 index 0000000..b02e8b4 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_core.js @@ -0,0 +1,209 @@ +/* + * resizable_core.js + */ + +(function($) { + +module("resizable: core"); + +/* +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,object,hr" + + ",input,button,label,select,iframe").split(","); + + $.each(typeNames, function(i) { + var typeName = typeNames[i]; + el = $(document.createElement(typeName)).appendTo("body"); + (typeName == "table" && el.append("<tr><td>content</td></tr>")); + el.resizable(); + ok(true, "$('<" + typeName + "/>').resizable()"); + el.resizable("destroy"); + el.remove(); + }); +}); +*/ + +test("n", function() { + expect(4); + + var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, 0, -50); + equal( target.height(), 150, "compare height" ); + + TestHelpers.resizable.drag(handle, 0, 50); + equal( target.height(), 100, "compare height" ); + + equal( target[0].style.left, "", "left should not be modified" ); + equal( target[0].style.width, "", "width should not be modified" ); +}); + +test("s", function() { + expect(5); + + var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, 0, 50); + equal( target.height(), 150, "compare height" ); + + TestHelpers.resizable.drag(handle, 0, -50); + equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); + equal( target[0].style.width, "", "width should not be modified" ); +}); + +test("e", function() { + expect(5); + + var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, 50); + equal( target.width(), 150, "compare width"); + + TestHelpers.resizable.drag(handle, -50); + equal( target.width(), 100, "compare width" ); + + equal( target[0].style.height, "", "height should not be modified" ); + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); +}); + +test("w", function() { + expect(4); + + var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, -50); + equal( target.width(), 150, "compare width" ); + + TestHelpers.resizable.drag(handle, 50); + equal( target.width(), 100, "compare width" ); + + equal( target[0].style.height, "", "height should not be modified" ); + equal( target[0].style.top, "", "top should not be modified" ); +}); + +test("ne", function() { + expect(5); + + var handle = ".ui-resizable-ne", target = $("#resizable1").css({ overflow: "hidden" }).resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, -50, -50); + equal( target.width(), 50, "compare width" ); + equal( target.height(), 150, "compare height" ); + + TestHelpers.resizable.drag(handle, 50, 50); + equal( target.width(), 100, "compare width" ); + equal( target.height(), 100, "compare height" ); + + equal( target[0].style.left, "", "left should not be modified" ); +}); + +test("se", function() { + expect(6); + + var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, 50, 50); + equal( target.width(), 150, "compare width" ); + equal( target.height(), 150, "compare height" ); + + TestHelpers.resizable.drag(handle, -50, -50); + equal( target.width(), 100, "compare width" ); + equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); +}); + +test("sw", function() { + expect(5); + + var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, -50, -50); + equal( target.width(), 150, "compare width" ); + equal( target.height(), 50, "compare height" ); + + TestHelpers.resizable.drag(handle, 50, 50); + equal( target.width(), 100, "compare width" ); + equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); +}); + +test("nw", function() { + expect(4); + + var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, -50, -50); + equal( target.width(), 150, "compare width" ); + equal( target.height(), 150, "compare height" ); + + TestHelpers.resizable.drag(handle, 50, 50); + equal( target.width(), 100, "compare width" ); + equal( target.height(), 100, "compare height" ); +}); + +test("handle with complex markup (#8756)", function() { + expect(2); + + $("#resizable1") + .append( + $("<div>") + .addClass("ui-resizable-handle") + .addClass("ui-resizable-w") + .append($("<div>")) + ); + + var handle = ".ui-resizable-w div", target = $("#resizable1").resizable({ handles: "all" }); + + TestHelpers.resizable.drag(handle, -50); + equal( target.width(), 150, "compare width" ); + + TestHelpers.resizable.drag(handle, 50); + equal( target.width(), 100, "compare width" ); +}); + +test("resizable accounts for scroll position correctly (#3815)", function() { + expect( 3 ); + + var position, top, left, + container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"), + overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ), + el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }), + handle = ".ui-resizable-e"; + + container.scrollLeft( 100 ).scrollTop( 100 ); + + position = el.position(); + left = el.css("left"); + top = el.css("top"); + + TestHelpers.resizable.drag(handle, 50, 50); + deepEqual( el.position(), position, "position stays the same when resized" ); + equal( el.css("left"), left, "css('left') stays the same when resized" ); + equal( el.css("top"), top, "css('top') stays the same when resized" ); +}); + +test( "resizable stores correct size when using helper and grid (#9547)", function() { + expect( 2 ); + + var handle = ".ui-resizable-se", + target = $( "#resizable1" ).resizable({ + handles: "all", + helper: "ui-resizable-helper", + grid: [ 10, 10 ] + }); + + TestHelpers.resizable.drag( handle, 1, 1 ); + equal( target.width(), 100, "compare width" ); + equal( target.height(), 100, "compare height" ); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_events.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_events.js new file mode 100644 index 0000000..18e25bf --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_events.js @@ -0,0 +1,220 @@ +/* + * resizable_events.js + */ +(function($) { + +module("resizable: events"); + +test("start", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + start: function(event, ui) { + equal( ui.size.width, 100, "compare width" ); + equal( ui.size.height, 100, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "start callback should happen exactly once"); + +}); + +test( "resize", function() { + + expect( 9 ); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + resize: function( event, ui ) { + if ( count === 0 ) { + equal( ui.size.width, 125, "compare width" ); + equal( ui.size.height, 125, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + } else { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + } + count++; + } + }); + + TestHelpers.resizable.drag( handle, 50, 50 ); + + equal( count, 2, "resize callback should happen exactly once per size adjustment" ); + +}); + +test( "resize (min/max dimensions)", function() { + + expect( 5 ); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + minWidth: 60, + minHeight: 60, + maxWidth: 100, + maxHeight: 100, + resize: function( event, ui ) { + equal( ui.size.width, 60, "compare width" ); + equal( ui.size.height, 60, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag( handle, -200, -200 ); + + equal( count, 1, "resize callback should happen exactly once per size adjustment" ); + +}); + +test( "resize (containment)", function() { + + expect( 5 ); + + var count = 0, + handle = ".ui-resizable-se", + container = $("#resizable1").wrap("<div>").parent().css({ + height: "100px", + width: "100px" + }); + + $("#resizable1").resizable({ + handles: "all", + containment: container, + resize: function( event, ui ) { + equal( ui.size.width, 10, "compare width" ); + equal( ui.size.height, 10, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + // Prove you can't resize outside containment by dragging southeast corner southeast + TestHelpers.resizable.drag( handle, 100, 100 ); + + // Prove you can't resize outside containment by dragging southeast corner northwest + TestHelpers.resizable.drag( handle, -200, -200 ); + + equal( count, 1, "resize callback should happen exactly once per size adjustment" ); + +}); + +test("resize (grid)", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + grid: 50, + resize: function(event, ui) { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment"); + +}); + +test("stop", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + stop: function(event, ui) { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "stop callback should happen exactly once"); + +}); + +test( "resize (containment) works with parent with negative offset", function() { + + expect( 1 ); + + var widthBefore, widthAfter, + handle = ".ui-resizable-e", + target = $( "#resizable1" ), + absoluteContainer = target.wrap( "<div />" ).parent(), + fixedContainer = absoluteContainer.wrap( "<div />" ).parent(), + increaseWidthBy = 50; + + // position fixed container in window top left + fixedContainer.css({ + width: 400, + height: 100, + position: "fixed", + top: 0, + left: 0 + }); + + // position absolute container within fixed on slightly outside window + absoluteContainer.css({ + width: 400, + height: 100, + position: "absolute", + top: 0, + left: -50 + }); + + // set up resizable to be contained within absolute container + target.resizable({ + handles: "all", + containment: "parent" + }).css({ + width: 300 + }); + + widthBefore = target.width(); + + TestHelpers.resizable.drag( handle, increaseWidthBy, 0 ); + + widthAfter = target.width(); + + equal( widthAfter, ( widthBefore + increaseWidthBy ), "resizable width should be increased by the value dragged" ); + +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_methods.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_methods.js new file mode 100644 index 0000000..b12f303 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_methods.js @@ -0,0 +1,12 @@ +/* + * resizable_methods.js + */ +(function($) { + +module("resizable: methods"); + +// this is here to make JSHint pass "unused", and we don't want to +// remove the parameter for when we finally implement +$.noop(); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_options.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_options.js new file mode 100644 index 0000000..e739d61 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_options.js @@ -0,0 +1,291 @@ +/* + * resizable_options.js + */ +(function($) { + +module("resizable: options"); + +test( "alsoResize", function() { + expect( 2 ); + + var other = $( "<div>" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body" ), + element = $( "#resizable1" ).resizable({ + alsoResize: other + }), + handle = ".ui-resizable-e"; + + TestHelpers.resizable.drag( handle, 80 ); + equal( element.width(), 180, "resizable width" ); + equal( other.width(), 130, "alsoResize width" ); +}); + + +test("aspectRatio: 'preserve' (e)", function() { + expect(4); + + var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, 80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, -130); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (w)", function() { + expect(4); + + var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, -80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, 130); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (n)", function() { + expect(4); + + var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, 0, -80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, 0, 80); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (s)", function() { + expect(4); + + var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, 0, 80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, 0, -80); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (se)", function() { + expect(4); + + var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, 80, 80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, -80, -80); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (sw)", function() { + expect(4); + + var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, -80, 80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, 80, -80); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test("aspectRatio: 'preserve' (ne)", function() { + expect(4); + + var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + + TestHelpers.resizable.drag(handle, 80, -80); + equal( target.width(), 130, "compare maxWidth"); + equal( target.height(), 130, "compare maxHeight"); + + TestHelpers.resizable.drag(handle, -80, 80); + equal( target.width(), 70, "compare minWidth"); + equal( target.height(), 70, "compare minHeight"); +}); + +test( "containment", function() { + expect( 4 ); + var element = $( "#resizable1" ).resizable({ + containment: "#container" + }); + + TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 ); + equal( element.width(), 120, "unconstrained width within container" ); + equal( element.height(), 130, "unconstrained height within container" ); + + TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 ); + equal( element.width(), 300, "constrained width at containment edge" ); + equal( element.height(), 200, "constrained height at containment edge" ); +}); + +test("grid", function() { + expect(4); + + var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: [0, 20] }); + + TestHelpers.resizable.drag(handle, 3, 9); + equal( target.width(), 103, "compare width"); + equal( target.height(), 100, "compare height"); + + TestHelpers.resizable.drag(handle, 15, 11); + equal( target.width(), 118, "compare width"); + equal( target.height(), 120, "compare height"); +}); + +test("grid (min/max dimensions)", function() { + expect(4); + + var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 }); + + TestHelpers.resizable.drag(handle, 50, 50); + equal( target.width(), 120, "grid should respect maxWidth"); + equal( target.height(), 120, "grid should respect maxHeight"); + + TestHelpers.resizable.drag(handle, -100, -100); + equal( target.width(), 80, "grid should respect minWidth"); + equal( target.height(), 80, "grid should respect minHeight"); +}); + +test("grid (wrapped)", function() { + expect(4); + + var handle = ".ui-resizable-se", target = $("#resizable2").resizable({ handles: "all", grid: [0, 20] }); + + TestHelpers.resizable.drag(handle, 3, 9); + equal( target.width(), 103, "compare width"); + equal( target.height(), 100, "compare height"); + + TestHelpers.resizable.drag(handle, 15, 11); + equal( target.width(), 118, "compare width"); + equal( target.height(), 120, "compare height"); +}); + +test( "grid - Resizable: can be moved when grid option is set (#9611)", function() { + expect( 6 ); + + var oldPosition, + handle = ".ui-resizable-nw", + target = $( "#resizable1" ).resizable({ + handles: "all", + grid: 50 + }); + + TestHelpers.resizable.drag( handle, 50, 50 ); + equal( target.width(), 50, "compare width" ); + equal( target.height(), 50, "compare height" ); + + oldPosition = target.position(); + + TestHelpers.resizable.drag( handle, 50, 50 ); + equal( target.width(), 50, "compare width" ); + equal( target.height(), 50, "compare height" ); + equal( target.position().top, oldPosition.top, "compare top" ); + equal( target.position().left, oldPosition.left, "compare left" ); +}); + +test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect(4); + + var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + TestHelpers.resizable.drag(handle, -50, -50); + equal( target.width(), 60, "compare minWidth" ); + equal( target.height(), 60, "compare minHeight" ); + + TestHelpers.resizable.drag(handle, 70, 70); + equal( target.width(), 100, "compare maxWidth" ); + equal( target.height(), 100, "compare maxHeight" ); +}); + +test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect(4); + + var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + TestHelpers.resizable.drag(handle, 50, -50); + equal( target.width(), 60, "compare minWidth" ); + equal( target.height(), 60, "compare minHeight" ); + + TestHelpers.resizable.drag(handle, -70, 70); + equal( target.width(), 100, "compare maxWidth" ); + equal( target.height(), 100, "compare maxHeight" ); +}); + +test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect(4); + + var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + TestHelpers.resizable.drag(handle, -50, 50); + equal( target.width(), 60, "compare minWidth" ); + equal( target.height(), 60, "compare minHeight" ); + + TestHelpers.resizable.drag(handle, 70, -70); + equal( target.width(), 100, "compare maxWidth" ); + equal( target.height(), 100, "compare maxHeight" ); +}); + +test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect(4); + + var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + + TestHelpers.resizable.drag(handle, 70, 70); + equal( target.width(), 60, "compare minWidth" ); + equal( target.height(), 60, "compare minHeight" ); + + TestHelpers.resizable.drag(handle, -70, -70); + equal( target.width(), 100, "compare maxWidth" ); + equal( target.height(), 100, "compare maxHeight" ); +}); + +test("zIndex, applied to all handles", function() { + expect(8); + + var target = $("<div></div>").resizable({ handles: "all", zIndex: 100 }); + target.children( ".ui-resizable-handle" ).each( function( index, handle ) { + equal( $( handle ).css( "zIndex" ), 100, "compare zIndex" ); + }); +}); + +test( "alsoResize + containment", function() { + expect( 4 ); + var other = $( "<div>" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body" ), + element = $( "#resizable1" ).resizable({ + alsoResize: other, + containment: "#container" + }); + + TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 ); + equal( element.width(), 300, "resizable constrained width at containment edge" ); + equal( element.height(), 200, "resizable constrained height at containment edge" ); + equal( other.width(), 250, "alsoResize constrained width at containment edge" ); + equal( other.height(), 150, "alsoResize constrained height at containment edge" ); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/resizable/resizable_test_helpers.js b/apps/it/static/js/ui/tests/unit/resizable/resizable_test_helpers.js new file mode 100644 index 0000000..7ab5aa1 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/resizable/resizable_test_helpers.js @@ -0,0 +1,11 @@ +TestHelpers.resizable = { + drag: function( el, dx, dy ) { + // this mouseover is to work around a limitation in resizable + // TODO: fix resizable so handle doesn't require mouseover in order to be used + $( el ).simulate("mouseover").simulate( "drag", { + moves: 2, + dx: dx, + dy: dy + }); + } +};
\ No newline at end of file |
