Skip to content
Permalink
Browse files

Merge pull request #242 from gnarf37/effects-unit

Effects unit tests - Partial fix for #7353
  • Loading branch information...
scottgonzalez committed May 11, 2011
2 parents 3eda502 + 783f134 commit 8b8f5bff7606701d883dc8e94469407e0c07483f
@@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Core Test Suite</title>

<script src="../../../jquery-1.5.1.js"></script>
<script>
$.uiBackCompat = false;
</script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.blind.js"></script>
<script src="../../../ui/jquery.effects.bounce.js"></script>
<script src="../../../ui/jquery.effects.clip.js"></script>
<script src="../../../ui/jquery.effects.drop.js"></script>
<script src="../../../ui/jquery.effects.explode.js"></script>
<script src="../../../ui/jquery.effects.fade.js"></script>
<script src="../../../ui/jquery.effects.fold.js"></script>
<script src="../../../ui/jquery.effects.highlight.js"></script>
<script src="../../../ui/jquery.effects.pulsate.js"></script>
<script src="../../../ui/jquery.effects.scale.js"></script>
<script src="../../../ui/jquery.effects.shake.js"></script>
<script src="../../../ui/jquery.effects.slide.js"></script>
<script src="../../../ui/jquery.effects.transfer.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 src="effects_core.js"></script>

<script src="../swarminject.js"></script>

<style type="text/css">
.hidden {
display: none;
}
</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 class="hidden test"></div>
<div class="shown test"></div>
</div>

</body>
</html>
@@ -0,0 +1,46 @@
(function($) {

var animateTime = 15;

module( "effects.core" );

$.each( $.effects.effect, function( effect ) {
if ( effect === "transfer" ) {
return;
}
QUnit.reset();
module( "effect."+effect );
test( "show/hide", function() {
var hidden = $( "div.hidden" );
expect( 8 );
stop();

var count = 0,
test = 0;

function queueTest( fn ) {
count++;
var point = count;
return function( next ) {
test++;
equals( point, test, "Queue function fired in order" );
if ( fn ) {
fn ()
} else {
setTimeout( next, animateTime );
}
}
}

hidden.queue( queueTest() ).show( effect, animateTime, queueTest(function() {
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
})).queue( queueTest() ).hide( effect, animateTime, queueTest(function() {
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
})).queue( queueTest(function(next) {
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains")
start();
}));
});
});

})(jQuery);
@@ -59,6 +59,11 @@ <h2>Utilities</h2>
<li><a href="position/position.html">Position</a></li>
</ul>

<h2>Effects</h2>
<ul>
<li><a href="effects/effects.html">Effects</a></li>
</ul>

</body>

</html>
@@ -79,10 +79,8 @@ $.effects.effect.bounce = function(o) {
upAnim = {};
upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;

// add the finish callback to the last animation if we aren't hiding
el.animate( upAnim, speed, easing )
.animate( downAnim, speed, easing,
( ( i === times - 1 ) && !hide ) ? finish : undefined );
.animate( downAnim, speed, easing );

distance = hide ? distance * 2 : distance / 2;
}
@@ -92,24 +90,25 @@ $.effects.effect.bounce = function(o) {
upAnim = { opacity: 0 };
upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;

el.animate( upAnim, speed, easing, function(){
el.hide();
finish();
});
el.animate( upAnim, speed, easing );
}

function finish() {

el.queue( function( next ) {
if ( hide ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );
if ( o.complete ) {
o.complete.apply( el[ 0 ] );
}
}
next();
});

// inject all the animations we just queued to be first in line (after "inprogress")
if ( queuelen > 1) {
queue.splice.apply( queue,
[ 1, 0 ].concat( queue.splice( queuelen, anims ) ) );
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
}
next();

@@ -13,19 +13,26 @@
(function( $, undefined ) {

$.effects.effect.fade = function( o ) {
return this.queue( function() {
return this.queue( function( next ) {
var el = $( this ),
mode = $.effects.setMode( el, o.mode || 'hide' );
mode = $.effects.setMode( el, o.mode || 'toggle' ),
hide = mode === "hide";

el.show();
el.animate({
opacity: mode
opacity: hide ? 0 : 1
}, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
el.dequeue();
if ( hide ) {
el.hide();
}
if ( o.complete ) {
o.complete.call( this );
}
next();
}
});
});
@@ -15,19 +15,20 @@
$.effects.effect.pulsate = function( o ) {
return this.queue( function( next ) {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || "effect" ),
show = mode === "show" || elem.is( ":hidden" ),
mode = $.effects.setMode( elem, o.mode || "show" ),
show = mode === "show",
hide = mode === "hide",
showhide = ( show || mode === "hide" ),

// showing or hiding adds an extra "half" animation
// showing or hiding leaves of the "last" animation
anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ),
duration = o.duration / anims,
animateTo = 0,
queue = elem.queue(),
queuelen = queue.length,
i;

if ( show ) {
if ( show || !elem.is(':visible')) {
elem.css( "opacity", 0 ).show();
animateTo = 1;
}
@@ -42,19 +43,22 @@ $.effects.effect.pulsate = function( o ) {

elem.animate({
opacity: animateTo
}, duration, o.easing, function() {
if ( animateTo === 0 ) {
}, duration, o.easing);

elem.queue( function( next ) {
if ( hide ) {
elem.hide();
}
if ( o.complete ) {
o.complete.apply( this );
}
next();
});

// We just queued up "anims" animations, we need to put them next in the queue
if ( queuelen > 1) {
queue.splice.apply( queue,
[ 1, 0 ].concat( queue.splice( queuelen, anims ) ) );
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
}
next();
});
@@ -25,6 +25,7 @@ $.effects.effect.puff = function( o ) {

$.extend(o, {
effect: 'scale',
queue: false,
fade: true,
mode: mode,
percent: mode == 'hide' ? percent : 100,
@@ -36,13 +37,13 @@ $.effects.effect.puff = function( o ) {
}
});

elem.effect( o ).dequeue();
elem.effect( o );
});
};

$.effects.effect.scale = function( o ) {

return this.queue( function() {
return this[ o.queue === false ? "each" : "queue" ]( function() {

// Create element
var el = $( this ),
@@ -62,6 +63,7 @@ $.effects.effect.scale = function( o ) {

// We are going to pass this effect to the size effect:
options.effect = "size";
options.queue = false;

// Set default origin and restore for show/hide
if ( mode != 'effect' ) {
@@ -87,14 +89,14 @@ $.effects.effect.scale = function( o ) {
};

// Animate
el.effect(options).dequeue();
el.effect(options);
});

};

$.effects.effect.size = function( o ) {

return this.queue( function() {
return this[ o.queue === false ? "each" : "queue" ]( function() {
// Create element
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
@@ -17,46 +17,60 @@ $.effects.effect.shake = function( o ) {
return this.queue( function() {

var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
mode = $.effects.setMode( el, o.mode || 'effect' ),
direction = o.direction || 'left',
props = [ "position", "top", "bottom", "left", "right" ],
mode = $.effects.setMode( el, o.mode || "effect" ),
direction = o.direction || "left",
distance = o.distance || 20,
times = o.times || 3,
speed = o.duration || 140,
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
anims = times * 2 + 1,
speed = o.duration,
ref = (direction == "up" || direction == "down") ? "top" : "left",
motion = (direction == "up" || direction == "left") ? "pos" : "neg",
animation = {},
animation1 = {},
animation2 = {},
i;
i,

// Adjust
$.effects.save( el, props );
el.show();
$.effects.createWrapper( el ); // Create Wrapper
// we will need to re-assemble the queue to stack our animations in place
queue = el.queue(),
queuelen = queue.length;


$.effects.save( el, props );
el.show();
$.effects.createWrapper( el );

// Animation
animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance;
animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2;
animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2;
animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance;
animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2;
animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2;

// Animate
el.animate( animation, speed, o.easing );

// Shakes
for ( i = 1; i < times; i++ ) {
for ( i = 1; i < times; i++ ) {
el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
};
el
.animate( animation1, speed, o.easing )
.animate( animation, speed / 2, o.easing, function() {
.animate( animation, speed / 2, o.easing )
.queue( function( next ) {
if ( mode === "hide" ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
next();
});

// Last shake
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
})
.dequeue();
// inject all the animations we just queued to be first in line (after "inprogress")
if ( queuelen > 1) {
queue.splice.apply( queue,
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
}
el.dequeue();
});

};

0 comments on commit 8b8f5bf

Please sign in to comment.
You can’t perform that action at this time.