1 |
(function($) { |
2 |
|
3 |
function present( value, array, message ) { |
4 |
QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message ); |
5 |
} |
6 |
|
7 |
function notPresent( value, array, message ) { |
8 |
QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message ); |
9 |
} |
10 |
|
11 |
// minDuration is used for "short" animate tests where we are only concerned about the final |
12 |
var minDuration = 15, |
13 |
|
14 |
// duration is used for "long" animates where we plan on testing properties during animation |
15 |
duration = 200; |
16 |
|
17 |
module( "effects.core" ); |
18 |
|
19 |
// TODO: test all signatures of .show(), .hide(), .toggle(). |
20 |
// Look at core's signatures and UI's signatures. |
21 |
asyncTest( ".hide() with step", function() { |
22 |
expect( 1 ); |
23 |
var element = $( "#elem" ), |
24 |
step = function() { |
25 |
ok( true, "step callback invoked" ); |
26 |
step = $.noop; |
27 |
}; |
28 |
|
29 |
element.hide({ |
30 |
step: function() { |
31 |
step(); |
32 |
}, |
33 |
complete: start |
34 |
}); |
35 |
}); |
36 |
|
37 |
test( "Immediate Return Conditions", function() { |
38 |
var hidden = $( "div.hidden" ), |
39 |
count = 0; |
40 |
expect( 3 ); |
41 |
hidden.hide( "blind", function() { |
42 |
equal( ++count, 1, "Hide on hidden returned immediately" ); |
43 |
}).show().show( "blind", function() { |
44 |
equal( ++count, 2, "Show on shown returned immediately" ); |
45 |
}); |
46 |
equal( ++count, 3, "Both Functions worked properly" ); |
47 |
}); |
48 |
|
49 |
test( ".hide() with hidden parent", function() { |
50 |
expect( 1 ); |
51 |
var element = $( "div.hidden" ).children(); |
52 |
element.hide( "blind", function() { |
53 |
equal( element.css( "display" ), "none", "display: none" ); |
54 |
}); |
55 |
}); |
56 |
|
57 |
asyncTest( "Parse of null for options", function() { |
58 |
var hidden = $( "div.hidden" ), |
59 |
count = 0; |
60 |
expect( 1 ); |
61 |
hidden.show( "blind", null, 1, function() { |
62 |
equal( ++count, 1, "null for options still works" ); |
63 |
start(); |
64 |
}); |
65 |
}); |
66 |
|
67 |
test( "removeClass", function() { |
68 |
expect( 3 ); |
69 |
|
70 |
var element = $( "<div>" ); |
71 |
equal( "", element[ 0 ].className ); |
72 |
element.addClass( "destroyed" ); |
73 |
equal( "destroyed", element[ 0 ].className ); |
74 |
element.removeClass(); |
75 |
equal( "", element[ 0 ].className ); |
76 |
}); |
77 |
|
78 |
|
79 |
/* TODO: Disabled - Can't figure out why this is failing in IE 6/7 |
80 |
test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { |
81 |
expect( 2 ); |
82 |
var test = $( "div.hidden" ).show(), |
83 |
input = $( "<input type='text'>" ).appendTo( test ).focus(); |
84 |
|
85 |
$.effects.createWrapper( test ); |
86 |
equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); |
87 |
$.effects.removeWrapper( test ); |
88 |
equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); |
89 |
}); |
90 |
*/ |
91 |
|
92 |
module( "effects.core: animateClass" ); |
93 |
|
94 |
asyncTest( "animateClass works with borderStyle", function() { |
95 |
var test = $("div.animateClass"); |
96 |
expect(3); |
97 |
test.toggleClass("testAddBorder", minDuration, function() { |
98 |
test.toggleClass("testAddBorder", minDuration, function() { |
99 |
equal( test.css("borderLeftStyle"), "none", "None border set" ); |
100 |
start(); |
101 |
}); |
102 |
equal( test.css("borderLeftStyle"), "solid", "None border not immedately set" ); |
103 |
}); |
104 |
equal( test.css("borderLeftStyle"), "solid", "Solid border immedately set" ); |
105 |
}); |
106 |
|
107 |
asyncTest( "animateClass works with colors", function() { |
108 |
var test = $("div.animateClass"), |
109 |
oldStep = jQuery.fx.step.backgroundColor; |
110 |
|
111 |
expect(2); |
112 |
|
113 |
// we want to catch the first frame of animation |
114 |
jQuery.fx.step.backgroundColor = function( fx ) { |
115 |
oldStep.apply( this, arguments ); |
116 |
|
117 |
// make sure it has animated somewhere we can detect |
118 |
if ( fx.pos > 255 / 2000 ) { |
119 |
jQuery.fx.step.backgroundColor = oldStep; |
120 |
notPresent( test.css("backgroundColor"), |
121 |
[ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ], |
122 |
"Color is not endpoints in middle." ); |
123 |
test.stop( true, true ); |
124 |
} |
125 |
}; |
126 |
|
127 |
test.toggleClass("testChangeBackground", { |
128 |
duration: 2000, |
129 |
complete: function() { |
130 |
present( test.css("backgroundColor"), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" ); |
131 |
start(); |
132 |
} |
133 |
}); |
134 |
}); |
135 |
|
136 |
asyncTest( "animateClass calls step option", 1, function() { |
137 |
var test = jQuery( "div.animateClass" ), |
138 |
step = function() { |
139 |
ok( true, "Step Function Called" ); |
140 |
test.stop(); |
141 |
start(); |
142 |
step = $.noop; |
143 |
}; |
144 |
test.toggleClass( "testChangeBackground", { |
145 |
step: function() { |
146 |
step(); |
147 |
} |
148 |
}); |
149 |
}); |
150 |
|
151 |
asyncTest( "animateClass works with children", 3, function() { |
152 |
var animatedChild, |
153 |
test = $("div.animateClass"), |
154 |
h2 = test.find("h2"); |
155 |
|
156 |
test.toggleClass("testChildren", { |
157 |
children: true, |
158 |
duration: duration, |
159 |
complete: function() { |
160 |
equal( h2.css("fontSize"), "20px", "Text size is final during complete"); |
161 |
test.toggleClass("testChildren", { |
162 |
duration: duration, |
163 |
complete: function() { |
164 |
equal( h2.css("fontSize"), "10px", "Text size revertted after class removed"); |
165 |
|
166 |
start(); |
167 |
}, |
168 |
step: function( val, fx ) { |
169 |
if ( fx.elem === h2[ 0 ] ) { |
170 |
ok( false, "Error - Animating property on h2" ); |
171 |
} |
172 |
} |
173 |
}); |
174 |
}, |
175 |
step: function( val, fx ) { |
176 |
if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) { |
177 |
equal( fx.end, 20, "animating font size on child" ); |
178 |
animatedChild = true; |
179 |
} |
180 |
} |
181 |
}); |
182 |
}); |
183 |
|
184 |
asyncTest( "animateClass clears style properties when stopped", function() { |
185 |
var test = $("div.animateClass"), |
186 |
style = test[0].style, |
187 |
orig = style.cssText; |
188 |
|
189 |
expect( 2 ); |
190 |
|
191 |
test.addClass( "testChangeBackground", duration ); |
192 |
notEqual( orig, style.cssText, "cssText is not the same after starting animation" ); |
193 |
|
194 |
test.stop( true, true ); |
195 |
equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" ); |
196 |
start(); |
197 |
}); |
198 |
|
199 |
asyncTest( "animateClass: css and class changes during animation are not lost (#7106)", function() { |
200 |
expect( 2 ); |
201 |
var test = $( "div.ticket7106" ); |
202 |
|
203 |
// ensure the class stays and that the css property stays |
204 |
function animationComplete() { |
205 |
ok( test.hasClass( "testClass" ), "class change during animateClass was not lost" ); |
206 |
equal( test.height(), 100, "css change during animateClass was not lost" ); |
207 |
start(); |
208 |
} |
209 |
|
210 |
// add a class and change a style property after starting an animated class |
211 |
test.addClass( "animate", minDuration, animationComplete ) |
212 |
.addClass( "testClass" ) |
213 |
.height( 100 ); |
214 |
}); |
215 |
|
216 |
|
217 |
$.each( $.effects.effect, function( effect ) { |
218 |
module( "effects." + effect ); |
219 |
|
220 |
// puff and size are defined inside scale |
221 |
if ( effect !== "puff" && effect !== "size" ) { |
222 |
TestHelpers.testJshint( "effect-" + effect ); |
223 |
} |
224 |
|
225 |
if ( effect === "transfer" ) { |
226 |
return; |
227 |
} |
228 |
asyncTest( "show/hide", function() { |
229 |
expect( 8 ); |
230 |
var hidden = $( "div.hidden" ), |
231 |
count = 0, |
232 |
test = 0; |
233 |
|
234 |
function queueTest( fn ) { |
235 |
count++; |
236 |
var point = count; |
237 |
return function( next ) { |
238 |
test++; |
239 |
equal( point, test, "Queue function fired in order" ); |
240 |
if ( fn ) { |
241 |
fn(); |
242 |
} else { |
243 |
setTimeout( next, minDuration ); |
244 |
} |
245 |
}; |
246 |
} |
247 |
|
248 |
hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { |
249 |
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" ); |
250 |
})).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { |
251 |
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" ); |
252 |
})).queue( queueTest(function() { |
253 |
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); |
254 |
start(); |
255 |
})); |
256 |
}); |
257 |
|
258 |
asyncTest( "relative width & height - properties are preserved", function() { |
259 |
var test = $("div.relWidth.relHeight"), |
260 |
width = test.width(), height = test.height(), |
261 |
cssWidth = test[0].style.width, cssHeight = test[0].style.height; |
262 |
|
263 |
expect( 4 ); |
264 |
test.toggle( effect, minDuration, function() { |
265 |
equal( test[0].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); |
266 |
equal( test[0].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); |
267 |
start(); |
268 |
}); |
269 |
equal( test.width(), width, "Width is the same px after animation started" ); |
270 |
equal( test.height(), height, "Height is the same px after animation started" ); |
271 |
}); |
272 |
}); |
273 |
|
274 |
})(jQuery); |