diff options
Diffstat (limited to 'tests/unit/resizable')
| -rw-r--r-- | tests/unit/resizable/resizable.html | 26 | ||||
| -rw-r--r-- | tests/unit/resizable/resizable_events.js | 46 | ||||
| -rw-r--r-- | tests/unit/resizable/resizable_options.js | 55 | ||||
| -rw-r--r-- | tests/unit/resizable/resizable_test_helpers.js | 18 |
4 files changed, 103 insertions, 42 deletions
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 0a27f2a80..255c98887 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -31,15 +31,19 @@ <script src="../swarminject.js"></script> <style> - #resizable1 { - background: green; - height: 100px; - width: 100px; - } - #resizable2 { - height: 100px; - width: 100px; - } + #container { + width: 300px; + height: 200px; + } + #resizable1 { + background: green; + height: 100px; + width: 100px; + } + #resizable2 { + height: 100px; + width: 100px; + } </style> </head> <body> @@ -51,7 +55,9 @@ <ol id="qunit-tests"></ol> <div id="qunit-fixture"> -<div id="resizable1">I'm a resizable.</div> +<div id="container"> + <div id="resizable1">I'm a resizable.</div> +</div> <img src="images/test.jpg" id="resizable2" alt="solid gray"> </div> diff --git a/tests/unit/resizable/resizable_events.js b/tests/unit/resizable/resizable_events.js index 14de76da6..ac222ec10 100644 --- a/tests/unit/resizable/resizable_events.js +++ b/tests/unit/resizable/resizable_events.js @@ -29,19 +29,19 @@ test("start", function() { }); -test("resize", function() { +test( "resize", function() { - expect(9); + expect( 9 ); var count = 0, handle = ".ui-resizable-se"; $("#resizable1").resizable({ handles: "all", - resize: function(event, ui) { - if (count === 0) { - equal( ui.size.width, 101, "compare width" ); - equal( ui.size.height, 101, "compare height" ); + 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 { @@ -54,15 +54,15 @@ test("resize", function() { } }); - TestHelpers.resizable.drag(handle, 50, 50); + TestHelpers.resizable.drag( handle, 50, 50 ); - equal(count, 2, "resize callback should happen exactly once per size adjustment"); + equal( count, 2, "resize callback should happen exactly once per size adjustment" ); }); -test("resize (min/max dimensions)", function() { +test( "resize (min/max dimensions)", function() { - expect(5); + expect( 5 ); var count = 0, handle = ".ui-resizable-se"; @@ -73,7 +73,7 @@ test("resize (min/max dimensions)", function() { minHeight: 60, maxWidth: 100, maxHeight: 100, - resize: function(event, ui) { + 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" ); @@ -82,15 +82,15 @@ test("resize (min/max dimensions)", function() { } }); - TestHelpers.resizable.drag(handle, -50, -50); + TestHelpers.resizable.drag( handle, -200, -200 ); - equal(count, 1, "resize callback should happen exactly once per size adjustment"); + equal( count, 1, "resize callback should happen exactly once per size adjustment" ); }); -test("resize (containment)", function() { +test( "resize (containment)", function() { - expect(5); + expect( 5 ); var count = 0, handle = ".ui-resizable-se", @@ -102,18 +102,22 @@ test("resize (containment)", function() { $("#resizable1").resizable({ handles: "all", containment: container, - resize: function(event, ui) { - equal( ui.size.width, 50, "compare width" ); - equal( ui.size.height, 50, "compare height" ); + 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++; } }); - TestHelpers.resizable.drag(handle, -50, -50); + // Prove you can't resize outside containment by dragging southeast corner southeast + TestHelpers.resizable.drag( handle, 100, 100 ); - equal(count, 1, "resize callback should happen exactly once per size adjustment"); + // 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" ); }); @@ -148,7 +152,7 @@ test("stop", function() { var count = 0, handle = ".ui-resizable-se"; - + $("#resizable1").resizable({ handles: "all", stop: function(event, ui) { diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 4b47762ab..d79523183 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -5,6 +5,26 @@ 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); @@ -103,6 +123,21 @@ test("aspectRatio: 'preserve' (ne)", function() { 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); @@ -210,4 +245,24 @@ test("zIndex, applied to all handles", function() { }); }); +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/tests/unit/resizable/resizable_test_helpers.js b/tests/unit/resizable/resizable_test_helpers.js index fe6c84900..7ab5aa1a5 100644 --- a/tests/unit/resizable/resizable_test_helpers.js +++ b/tests/unit/resizable/resizable_test_helpers.js @@ -1,15 +1,11 @@ TestHelpers.resizable = { - drag: function(el, dx, dy, complete) { - - // speed = sync -> Drag syncrhonously. - // speed = fast|slow -> Drag asyncrhonously - animated. - - //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"); - - return $(el).simulate("drag", { - dx: dx||0, dy: dy||0, speed: 'sync', complete: complete + 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 |