summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/tests/unit/effects
diff options
context:
space:
mode:
authorFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
committerFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
commit75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
treeeaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/tests/unit/effects
parentcfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
downloadpudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/tests/unit/effects')
-rw-r--r--apps/it/static/js/ui/tests/unit/effects/all.html30
-rw-r--r--apps/it/static/js/ui/tests/unit/effects/effects.html117
-rw-r--r--apps/it/static/js/ui/tests/unit/effects/effects_core.js274
-rw-r--r--apps/it/static/js/ui/tests/unit/effects/effects_scale.js68
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 );
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 02:19:48 +0000