Skip to content

Commit 8b8f5bf

Browse files
scottgonzalezscottgonzalez
committed
Merge pull request jquery#242 from gnarf37/effects-unit
Effects unit tests - Partial fix for #7353
2 parents 3eda502 + 783f134 commit 8b8f5bf

File tree

8 files changed

+181
-49
lines changed

8 files changed

+181
-49
lines changed

‎tests/unit/effects/effects.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Core Test Suite</title>
6+
7+
<script src="../../../jquery-1.5.1.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
11+
<script src="../../../ui/jquery.effects.core.js"></script>
12+
<script src="../../../ui/jquery.effects.blind.js"></script>
13+
<script src="../../../ui/jquery.effects.bounce.js"></script>
14+
<script src="../../../ui/jquery.effects.clip.js"></script>
15+
<script src="../../../ui/jquery.effects.drop.js"></script>
16+
<script src="../../../ui/jquery.effects.explode.js"></script>
17+
<script src="../../../ui/jquery.effects.fade.js"></script>
18+
<script src="../../../ui/jquery.effects.fold.js"></script>
19+
<script src="../../../ui/jquery.effects.highlight.js"></script>
20+
<script src="../../../ui/jquery.effects.pulsate.js"></script>
21+
<script src="../../../ui/jquery.effects.scale.js"></script>
22+
<script src="../../../ui/jquery.effects.shake.js"></script>
23+
<script src="../../../ui/jquery.effects.slide.js"></script>
24+
<script src="../../../ui/jquery.effects.transfer.js"></script>
25+
26+
<link rel="stylesheet" href="../../../external/qunit.css">
27+
<script src="../../../external/qunit.js"></script>
28+
<script src="../../jquery.simulate.js"></script>
29+
<script src="../testsuite.js"></script>
30+
<script src="effects_core.js"></script>
31+
32+
<script src="../swarminject.js"></script>
33+
34+
<style type="text/css">
35+
.hidden {
36+
display: none;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
42+
<h1 id="qunit-header">jQuery UI Effects Test Suite</h1>
43+
<h2 id="qunit-banner"></h2>
44+
<div id="qunit-testrunner-toolbar"></div>
45+
<h2 id="qunit-userAgent"></h2>
46+
<ol id="qunit-tests">
47+
</ol>
48+
49+
<div id="qunit-fixture">
50+
<div class="hidden test"></div>
51+
<div class="shown test"></div>
52+
</div>
53+
54+
</body>
55+
</html>

‎tests/unit/effects/effects_core.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
(function($) {
2+
3+
var animateTime = 15;
4+
5+
module( "effects.core" );
6+
7+
$.each( $.effects.effect, function( effect ) {
8+
if ( effect === "transfer" ) {
9+
return;
10+
}
11+
QUnit.reset();
12+
module( "effect."+effect );
13+
test( "show/hide", function() {
14+
var hidden = $( "div.hidden" );
15+
expect( 8 );
16+
stop();
17+
18+
var count = 0,
19+
test = 0;
20+
21+
function queueTest( fn ) {
22+
count++;
23+
var point = count;
24+
return function( next ) {
25+
test++;
26+
equals( point, test, "Queue function fired in order" );
27+
if ( fn ) {
28+
fn ()
29+
} else {
30+
setTimeout( next, animateTime );
31+
}
32+
}
33+
}
34+
35+
hidden.queue( queueTest() ).show( effect, animateTime, queueTest(function() {
36+
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
37+
})).queue( queueTest() ).hide( effect, animateTime, queueTest(function() {
38+
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
39+
})).queue( queueTest(function(next) {
40+
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains")
41+
start();
42+
}));
43+
});
44+
});
45+
46+
})(jQuery);

‎tests/unit/index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ <h2>Utilities</h2>
5959
<li><a href="position/position.html">Position</a></li>
6060
</ul>
6161

62+
<h2>Effects</h2>
63+
<ul>
64+
<li><a href="effects/effects.html">Effects</a></li>
65+
</ul>
66+
6267
</body>
6368

6469
</html>

‎ui/jquery.effects.bounce.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,8 @@ $.effects.effect.bounce = function(o) {
7979
upAnim = {};
8080
upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance;
8181

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

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

95-
el.animate( upAnim, speed, easing, function(){
96-
el.hide();
97-
finish();
98-
});
93+
el.animate( upAnim, speed, easing );
9994
}
100-
101-
function finish() {
95+
96+
el.queue( function( next ) {
97+
if ( hide ) {
98+
el.hide();
99+
}
102100
$.effects.restore( el, props );
103101
$.effects.removeWrapper( el );
104102
if ( o.complete ) {
105103
o.complete.apply( el[ 0 ] );
106104
}
107-
}
105+
next();
106+
});
108107

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

‎ui/jquery.effects.fade.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,26 @@
1313
(function( $, undefined ) {
1414

1515
$.effects.effect.fade = function( o ) {
16-
return this.queue( function() {
16+
return this.queue( function( next ) {
1717
var el = $( this ),
18-
mode = $.effects.setMode( el, o.mode || 'hide' );
18+
mode = $.effects.setMode( el, o.mode || 'toggle' ),
19+
hide = mode === "hide";
1920

21+
el.show();
2022
el.animate({
21-
opacity: mode
23+
opacity: hide ? 0 : 1
2224
}, {
2325
queue: false,
2426
duration: o.duration,
2527
easing: o.easing,
2628
complete: function() {
27-
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
28-
el.dequeue();
29+
if ( hide ) {
30+
el.hide();
31+
}
32+
if ( o.complete ) {
33+
o.complete.call( this );
34+
}
35+
next();
2936
}
3037
});
3138
});

‎ui/jquery.effects.pulsate.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,20 @@
1515
$.effects.effect.pulsate = function( o ) {
1616
return this.queue( function( next ) {
1717
var elem = $( this ),
18-
mode = $.effects.setMode( elem, o.mode || "effect" ),
19-
show = mode === "show" || elem.is( ":hidden" ),
18+
mode = $.effects.setMode( elem, o.mode || "show" ),
19+
show = mode === "show",
20+
hide = mode === "hide",
2021
showhide = ( show || mode === "hide" ),
2122

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

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

4344
elem.animate({
4445
opacity: animateTo
45-
}, duration, o.easing, function() {
46-
if ( animateTo === 0 ) {
46+
}, duration, o.easing);
47+
48+
elem.queue( function( next ) {
49+
if ( hide ) {
4750
elem.hide();
4851
}
4952
if ( o.complete ) {
5053
o.complete.apply( this );
5154
}
55+
next();
5256
});
5357

5458
// We just queued up "anims" animations, we need to put them next in the queue
5559
if ( queuelen > 1) {
5660
queue.splice.apply( queue,
57-
[ 1, 0 ].concat( queue.splice( queuelen, anims ) ) );
61+
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
5862
}
5963
next();
6064
});

‎ui/jquery.effects.scale.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ $.effects.effect.puff = function( o ) {
2525

2626
$.extend(o, {
2727
effect: 'scale',
28+
queue: false,
2829
fade: true,
2930
mode: mode,
3031
percent: mode == 'hide' ? percent : 100,
@@ -36,13 +37,13 @@ $.effects.effect.puff = function( o ) {
3637
}
3738
});
3839

39-
elem.effect( o ).dequeue();
40+
elem.effect( o );
4041
});
4142
};
4243

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

45-
return this.queue( function() {
46+
return this[ o.queue === false ? "each" : "queue" ]( function() {
4647

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

6364
// We are going to pass this effect to the size effect:
6465
options.effect = "size";
66+
options.queue = false;
6567

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

8991
// Animate
90-
el.effect(options).dequeue();
92+
el.effect(options);
9193
});
9294

9395
};
9496

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

97-
return this.queue( function() {
99+
return this[ o.queue === false ? "each" : "queue" ]( function() {
98100
// Create element
99101
var el = $( this ),
100102
props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],

‎ui/jquery.effects.shake.js

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,46 +17,60 @@ $.effects.effect.shake = function( o ) {
1717
return this.queue( function() {
1818

1919
var el = $( this ),
20-
props = [ 'position', 'top', 'bottom', 'left', 'right' ],
21-
mode = $.effects.setMode( el, o.mode || 'effect' ),
22-
direction = o.direction || 'left',
20+
props = [ "position", "top", "bottom", "left", "right" ],
21+
mode = $.effects.setMode( el, o.mode || "effect" ),
22+
direction = o.direction || "left",
2323
distance = o.distance || 20,
2424
times = o.times || 3,
25-
speed = o.duration || 140,
26-
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
27-
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
25+
anims = times * 2 + 1,
26+
speed = o.duration,
27+
ref = (direction == "up" || direction == "down") ? "top" : "left",
28+
motion = (direction == "up" || direction == "left") ? "pos" : "neg",
2829
animation = {},
2930
animation1 = {},
3031
animation2 = {},
31-
i;
32+
i,
3233

33-
// Adjust
34-
$.effects.save( el, props );
35-
el.show();
36-
$.effects.createWrapper( el ); // Create Wrapper
34+
// we will need to re-assemble the queue to stack our animations in place
35+
queue = el.queue(),
36+
queuelen = queue.length;
37+
38+
39+
$.effects.save( el, props );
40+
el.show();
41+
$.effects.createWrapper( el );
3742

3843
// Animation
39-
animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance;
40-
animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2;
41-
animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2;
44+
animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance;
45+
animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2;
46+
animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2;
4247

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

4651
// Shakes
47-
for ( i = 1; i < times; i++ ) {
52+
for ( i = 1; i < times; i++ ) {
4853
el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
4954
};
5055
el
5156
.animate( animation1, speed, o.easing )
52-
.animate( animation, speed / 2, o.easing, function() {
57+
.animate( animation, speed / 2, o.easing )
58+
.queue( function( next ) {
59+
if ( mode === "hide" ) {
60+
el.hide();
61+
}
62+
$.effects.restore( el, props );
63+
$.effects.removeWrapper( el );
64+
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
65+
next();
66+
});
5367

54-
// Last shake
55-
$.effects.restore( el, props );
56-
$.effects.removeWrapper( el );
57-
$.isFunction( o.complete ) && o.complete.apply( this, arguments );
58-
})
59-
.dequeue();
68+
// inject all the animations we just queued to be first in line (after "inprogress")
69+
if ( queuelen > 1) {
70+
queue.splice.apply( queue,
71+
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
72+
}
73+
el.dequeue();
6074
});
6175

6276
};

0 commit comments

Comments
 (0)