jQuery UI Resizable Test Suite

") + .addClass("ui-resizable-handle") + .addClass("ui-resizable-w") + .append($("

")) + ); + + 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 = $("

").appendTo("#qunit-fixture"), + overflowed = $("

").appendTo( container ), + el = $("

").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("

").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( "

" ).parent(), + fixedContainer = absoluteContainer.wrap( "

" ).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 = $( "

" ) + .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 = $("

").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 = $( "

" ) + .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 -- cgit v1.2.3