diff options
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/effects')
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/effects/all.html | 30 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/effects/effects.html | 117 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/effects/effects_core.js | 274 | ||||
| -rw-r--r-- | apps/it/static/js/ui/tests/unit/effects/effects_scale.js | 68 |
4 files changed, 489 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/unit/effects/all.html b/apps/it/static/js/ui/tests/unit/effects/all.html new file mode 100644 index 0000000..7448586 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/effects/all.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects 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( "effects" ); + </script> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Effects 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/effects/effects.html b/apps/it/static/js/ui/tests/unit/effects/effects.html new file mode 100644 index 0000000..4538ecb --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/effects/effects.html @@ -0,0 +1,117 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Effects 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({ + js: [ + "ui/jquery.ui.effect.js", + "ui/jquery.ui.effect-blind.js", + "ui/jquery.ui.effect-bounce.js", + "ui/jquery.ui.effect-clip.js", + "ui/jquery.ui.effect-drop.js", + "ui/jquery.ui.effect-explode.js", + "ui/jquery.ui.effect-fade.js", + "ui/jquery.ui.effect-fold.js", + "ui/jquery.ui.effect-highlight.js", + "ui/jquery.ui.effect-pulsate.js", + "ui/jquery.ui.effect-scale.js", + "ui/jquery.ui.effect-shake.js", + "ui/jquery.ui.effect-slide.js", + "ui/jquery.ui.effect-transfer.js" + ] + }); + </script> + + <script src="effects_core.js"></script> + <script src="effects_scale.js"></script> + + <script src="../swarminject.js"></script> + <style> + #qunit-fixture { + width: 1000px; + height: 1000px; + } + .hidden { + display: none; + } + .test { + background: #000; + border: 0; + width: 100px; + height: 100px; + } + .testAddBorder { + border: 10px solid #000; + } + .testChildren, + .testChangeBackground { + background: #fff; + } + .test h2 { + font-size: 10px; + } + .testChildren h2 { + font-size: 20px; + } + + .relWidth { + width: 50%; + } + + .relHeight { + height: 50%; + } + + .testScale { + border: 5px solid #000; + padding: 5px; + margin: 5px; + width: 50px; + height: 50px; + } + + .ticket7106 { + width: 50px; + height: 50px; + } + .ticket7106.animate { + width: 100px; + } + + </style> +</head> +<body> + +<h1 id="qunit-header">jQuery UI Effects 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="elem" class="test"> +</div> +<div class="hidden test"> + <div>.</div> +</div> +<div class="animateClass test"> + <h2>Child Element Test</h2> +</div> +<div class="relWidth relHeight testAddBorder"> + <h2>Slide with relative width</h2> +</div> +<div class="testScale"> +</div> +<div class="ticket7106"> +</div> + +</div> +</body> +</html> diff --git a/apps/it/static/js/ui/tests/unit/effects/effects_core.js b/apps/it/static/js/ui/tests/unit/effects/effects_core.js new file mode 100644 index 0000000..11e9d0b --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/effects/effects_core.js @@ -0,0 +1,274 @@ +(function($) { + +function present( value, array, message ) { + QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message ); +} + +function notPresent( value, array, message ) { + QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message ); +} + +// minDuration is used for "short" animate tests where we are only concerned about the final +var minDuration = 15, + + // duration is used for "long" animates where we plan on testing properties during animation + duration = 200; + +module( "effects.core" ); + +// TODO: test all signatures of .show(), .hide(), .toggle(). +// Look at core's signatures and UI's signatures. +asyncTest( ".hide() with step", function() { + expect( 1 ); + var element = $( "#elem" ), + step = function() { + ok( true, "step callback invoked" ); + step = $.noop; + }; + + element.hide({ + step: function() { + step(); + }, + complete: start + }); +}); + +test( "Immediate Return Conditions", function() { + var hidden = $( "div.hidden" ), + count = 0; + expect( 3 ); + hidden.hide( "blind", function() { + equal( ++count, 1, "Hide on hidden returned immediately" ); + }).show().show( "blind", function() { + equal( ++count, 2, "Show on shown returned immediately" ); + }); + equal( ++count, 3, "Both Functions worked properly" ); +}); + +test( ".hide() with hidden parent", function() { + expect( 1 ); + var element = $( "div.hidden" ).children(); + element.hide( "blind", function() { + equal( element.css( "display" ), "none", "display: none" ); + }); +}); + +asyncTest( "Parse of null for options", function() { + var hidden = $( "div.hidden" ), + count = 0; + expect( 1 ); + hidden.show( "blind", null, 1, function() { + equal( ++count, 1, "null for options still works" ); + start(); + }); +}); + +test( "removeClass", function() { + expect( 3 ); + + var element = $( "<div>" ); + equal( "", element[ 0 ].className ); + element.addClass( "destroyed" ); + equal( "destroyed", element[ 0 ].className ); + element.removeClass(); + equal( "", element[ 0 ].className ); +}); + + +/* TODO: Disabled - Can't figure out why this is failing in IE 6/7 +test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { + expect( 2 ); + var test = $( "div.hidden" ).show(), + input = $( "<input type='text'>" ).appendTo( test ).focus(); + + $.effects.createWrapper( test ); + equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); + $.effects.removeWrapper( test ); + equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); +}); +*/ + +module( "effects.core: animateClass" ); + +asyncTest( "animateClass works with borderStyle", function() { + var test = $("div.animateClass"); + expect(3); + test.toggleClass("testAddBorder", minDuration, function() { + test.toggleClass("testAddBorder", minDuration, function() { + equal( test.css("borderLeftStyle"), "none", "None border set" ); + start(); + }); + equal( test.css("borderLeftStyle"), "solid", "None border not immedately set" ); + }); + equal( test.css("borderLeftStyle"), "solid", "Solid border immedately set" ); +}); + +asyncTest( "animateClass works with colors", function() { + var test = $("div.animateClass"), + oldStep = jQuery.fx.step.backgroundColor; + + expect(2); + + // we want to catch the first frame of animation + jQuery.fx.step.backgroundColor = function( fx ) { + oldStep.apply( this, arguments ); + + // make sure it has animated somewhere we can detect + if ( fx.pos > 255 / 2000 ) { + jQuery.fx.step.backgroundColor = oldStep; + notPresent( test.css("backgroundColor"), + [ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ], + "Color is not endpoints in middle." ); + test.stop( true, true ); + } + }; + + test.toggleClass("testChangeBackground", { + duration: 2000, + complete: function() { + present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" ); + start(); + } + }); +}); + +asyncTest( "animateClass calls step option", 1, function() { + var test = jQuery( "div.animateClass" ), + step = function() { + ok( true, "Step Function Called" ); + test.stop(); + start(); + step = $.noop; + }; + test.toggleClass( "testChangeBackground", { + step: function() { + step(); + } + }); +}); + +asyncTest( "animateClass works with children", 3, function() { + var animatedChild, + test = $("div.animateClass"), + h2 = test.find("h2"); + + test.toggleClass("testChildren", { + children: true, + duration: duration, + complete: function() { + equal( h2.css("fontSize"), "20px", "Text size is final during complete"); + test.toggleClass("testChildren", { + duration: duration, + complete: function() { + equal( h2.css("fontSize"), "10px", "Text size revertted after class removed"); + + start(); + }, + step: function( val, fx ) { + if ( fx.elem === h2[ 0 ] ) { + ok( false, "Error - Animating property on h2" ); + } + } + }); + }, + step: function( val, fx ) { + if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) { + equal( fx.end, 20, "animating font size on child" ); + animatedChild = true; + } + } + }); +}); + +asyncTest( "animateClass clears style properties when stopped", function() { + var test = $("div.animateClass"), + style = test[0].style, + orig = style.cssText; + + expect( 2 ); + + test.addClass( "testChangeBackground", duration ); + notEqual( orig, style.cssText, "cssText is not the same after starting animation" ); + + test.stop( true, true ); + equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" ); + start(); +}); + +asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() { + expect( 2 ); + var test = $( "div.ticket7106" ); + + // ensure the class stays and that the css property stays + function animationComplete() { + ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" ); + equal( test.height(), 100, "css change during animateClass was not lost" ); + start(); + } + + // add a class and change a style property after starting an animated class + test.addClass( "animate", minDuration, animationComplete ) + .addClass( "testClass" ) + .height( 100 ); +}); + + +$.each( $.effects.effect, function( effect ) { + module( "effects." + effect ); + + // puff and size are defined inside scale + if ( effect !== "puff" && effect !== "size" ) { + TestHelpers.testJshint( "effect-" + effect ); + } + + if ( effect === "transfer" ) { + return; + } + asyncTest( "show/hide", function() { + expect( 8 ); + var hidden = $( "div.hidden" ), + count = 0, + test = 0; + + function queueTest( fn ) { + count++; + var point = count; + return function( next ) { + test++; + equal( point, test, "Queue function fired in order" ); + if ( fn ) { + fn(); + } else { + setTimeout( next, minDuration ); + } + }; + } + + hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { + equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" ); + })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { + equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" ); + })).queue( queueTest(function() { + deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); + start(); + })); + }); + + asyncTest( "relative width & height - properties are preserved", function() { + var test = $("div.relWidth.relHeight"), + width = test.width(), height = test.height(), + cssWidth = test[0].style.width, cssHeight = test[0].style.height; + + expect( 4 ); + test.toggle( effect, minDuration, function() { + equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); + equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); + start(); + }); + equal( test.width(), width, "Width is the same px after animation started" ); + equal( test.height(), height, "Height is the same px after animation started" ); + }); +}); + +})(jQuery); diff --git a/apps/it/static/js/ui/tests/unit/effects/effects_scale.js b/apps/it/static/js/ui/tests/unit/effects/effects_scale.js new file mode 100644 index 0000000..6abbcb5 --- /dev/null +++ b/apps/it/static/js/ui/tests/unit/effects/effects_scale.js @@ -0,0 +1,68 @@ +(function( $ ) { +module( "effect.scale: Scale" ); + +function run( position, v, h, vo, ho ) { + var desc = "End Position Correct: " + position + " (" + v + "," + h + ") - origin: (" + vo + "," + ho + ")"; + asyncTest( desc, function() { + expect( 2 ); + function complete() { + equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); + equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + start(); + } + var test = $( ".testScale" ), + css = { + position: position + }, + effect = { + effect: "scale", + mode: "effect", + percent: 200, + origin: [ vo, ho ], + complete: complete, + duration: 1 + }, + target = {}, + relative = position === "relative"; + + css[ h ] = 33; + css[ v ] = 33; + target[ h ] = h === ho ? css[ h ] : ho === "center" ? css[ h ] - 35 : css[ h ] - 70; + target[ v ] = v === vo ? css[ v ] : vo === "middle" ? css[ v ] - 35 : css[ v ] - 70; + if ( relative && h === "right" ) { + target[ h ] += 70; + } + if ( relative && v === "bottom" ) { + target[ v ] += 70; + } + test.css( css ); + test.effect( effect ); + }); +} + +function suite( position ) { + run( position, "top", "left", "top", "left" ); + run( position, "top", "left", "middle", "center" ); + run( position, "top", "left", "bottom", "right" ); + /* Firefox is currently not capable of supporting detection of bottom and right.... + run( position, "bottom", "right", "top", "left" ); + run( position, "bottom", "right", "middle", "center" ); + run( position, "bottom", "right", "bottom", "right" ); + */ +} + +$(function() { + suite( "absolute" ); + suite( "relative" ); + var fixedElem = $( "<div>" ) + .css({ + position: "fixed", + top: 10 + }) + .appendTo( "body" ); + if ( fixedElem.offset().top === 10 ) { + suite( "fixed" ); + } +}); + +})( jQuery ); |