|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Asynchronous Event Testing</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 <a href="#toc" class="jump">Jump to Table of Contents</a> |
|
24 |
|
25 |
|
26 <h1>Example: Asynchronous Event Testing</h1> |
|
27 <div class="yui3-g"> |
|
28 <div class="yui3-u-3-4"> |
|
29 <div id="main"> |
|
30 <div class="content"><div class="intro"> |
|
31 <p>This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code. |
|
32 A <code>Y.Test.Case</code></a> object is created to test the |
|
33 <code>Y.Anim</code> object. The test waits until the animation is complete |
|
34 before checking the settings of the animated element.</p> |
|
35 </div> |
|
36 |
|
37 <div class="example yui3-skin-sam" style="position: relative;"> |
|
38 <div id="testLogger"></div> |
|
39 <div id="testDiv" style="left:0;position:absolute;width:10px;height:10px; background-color:red"></div> |
|
40 |
|
41 <script> |
|
42 YUI().use('anim', 'test-console', 'test', function (Y) { |
|
43 |
|
44 Y.namespace("example.test"); |
|
45 |
|
46 Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
47 |
|
48 //name of the test case - if not provided, one is auto-generated |
|
49 name : "Animation Tests", |
|
50 |
|
51 //--------------------------------------------------------------------- |
|
52 // Test methods - names must begin with "test" |
|
53 //--------------------------------------------------------------------- |
|
54 |
|
55 testAnimation : function (){ |
|
56 |
|
57 var myAnim = new Y.Anim({ |
|
58 node: '#testDiv', |
|
59 to: { |
|
60 width: 400 |
|
61 }, |
|
62 duration: 3, |
|
63 easing: Y.Easing.easeOut |
|
64 }); |
|
65 |
|
66 //assign oncomplete handler |
|
67 myAnim.on("end", function(){ |
|
68 |
|
69 //tell the TestRunner to resume |
|
70 this.resume(function(){ |
|
71 |
|
72 Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400."); |
|
73 |
|
74 }); |
|
75 |
|
76 }, this, true); |
|
77 |
|
78 //start the animation |
|
79 myAnim.run(); |
|
80 |
|
81 //wait until something happens |
|
82 this.wait(); |
|
83 |
|
84 } |
|
85 |
|
86 }); |
|
87 |
|
88 //create the console |
|
89 (new Y.Test.Console({ |
|
90 newestOnTop : false, |
|
91 filters: { |
|
92 pass: true, |
|
93 fail: true |
|
94 } |
|
95 })).render('#testLogger'); |
|
96 |
|
97 //create the logger |
|
98 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
99 |
|
100 //run the tests |
|
101 Y.Test.Runner.run(); |
|
102 }); |
|
103 |
|
104 </script> |
|
105 |
|
106 </div> |
|
107 |
|
108 <h2 class="first" id="asynchronous-events-test-example">Asynchronous Events Test Example</h2> |
|
109 |
|
110 <p>This example begins by creating a namespace:</p> |
|
111 <pre class="code prettyprint">Y.namespace("example.test");</pre> |
|
112 |
|
113 <p>This namespace serves as the core object upon which others will be added (to prevent creating global objects).</p> |
|
114 |
|
115 <h3 id="creating-the-testcase">Creating the TestCase</h3> |
|
116 |
|
117 <p>The first step is to create a new <code>Y.Test.Case</code>object called <code>AsyncTestCase</code>. |
|
118 To do so, using the <code>Y.Test.Case</code>constructor and pass in an object literal containing information about the tests to be run:</p> |
|
119 <pre class="code prettyprint">Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
120 |
|
121 //name of the test case - if not provided, one is auto-generated |
|
122 name : "Animation Tests", |
|
123 |
|
124 //--------------------------------------------------------------------- |
|
125 // Test methods - names must begin with "test" |
|
126 //--------------------------------------------------------------------- |
|
127 |
|
128 testAnimation : function (){ |
|
129 |
|
130 var myAnim = new Y.Anim({ |
|
131 node: '#testDiv', |
|
132 to: { |
|
133 width: 400 |
|
134 }, |
|
135 duration: 3, |
|
136 easing: Y.Easing.easeOut |
|
137 }); |
|
138 |
|
139 //assign oncomplete handler |
|
140 myAnim.on("end", function(){ |
|
141 |
|
142 //tell the TestRunner to resume |
|
143 this.resume(function(){ |
|
144 |
|
145 Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400."); |
|
146 |
|
147 }); |
|
148 |
|
149 }, this, true); |
|
150 |
|
151 //start the animation |
|
152 myAnim.run(); |
|
153 |
|
154 //wait until something happens |
|
155 this.wait(); |
|
156 |
|
157 } |
|
158 |
|
159 });</pre> |
|
160 |
|
161 <p>The only test in the <code>Y.Test.Case</code>is called <code>testAnimation</code>. It begins by creating a new |
|
162 <code>Anim</code> object that will animate the width of a <code>div</code> to 400 pixels over three seconds. An |
|
163 event handler is assigned to the <code>Anim</code> object's <code>end</code> event, within which the |
|
164 <code>resume()</code> method is called. A function is passed into the <code>resume()</code> method to indicate |
|
165 the code to run when the test resumes, which is a test to make sure the width is 400 pixels. After that, the |
|
166 <code>run()</code> method is called to begin the animation and the <code>wait()</code> method is called to |
|
167 tell the <code>Y.Test.Runner</code> to wait until it is told to resume testing again. When the animation completes, |
|
168 the <code>end</code> event is fired and the test resumes, assuring that the width is correct.</p> |
|
169 <h3 id="running-the-tests">Running the tests</h3> |
|
170 |
|
171 <p>With all of the tests defined, the last step is to run them:</p> |
|
172 |
|
173 <pre class="code prettyprint">//create the console |
|
174 (new Y.Test.Console({ |
|
175 verbose : true, |
|
176 newestOnTop : false, |
|
177 filters: { |
|
178 pass: true, |
|
179 fail: true |
|
180 } |
|
181 }).render('#testLogger'); |
|
182 |
|
183 //create the logger |
|
184 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
185 |
|
186 //run the tests |
|
187 Y.Test.Runner.run();</pre> |
|
188 |
|
189 |
|
190 <p>Before running the tests, it's necessary to create a <code>Y.Test.Console</code> object to display the results (otherwise the tests would run |
|
191 but you wouldn't see the results). After that, the <code>Y.Test.Runner</code> is loaded with the <code>Y.Test.Case</code>object by calling |
|
192 <code>add()</code> (any number of <code>Y.Test.Case</code>and <code>TestSuite</code> objects can be added to a <code>Y.Test.Runner</code>, |
|
193 this example only adds one for simplicity). The very last step is to call <code>run()</code>, which begins executing the tests in its |
|
194 queue and displays the results in the <code>Y.Test.Console</code>.</p> |
|
195 |
|
196 <h2 id="complete-example-source">Complete Example Source</h2> |
|
197 |
|
198 <pre class="code prettyprint"><div id="testLogger"></div> |
|
199 <div id="testDiv" style="left:0;position:absolute;width:10px;height:10px; background-color:red"></div> |
|
200 |
|
201 <script> |
|
202 YUI().use('anim', 'test-console', 'test', function (Y) { |
|
203 |
|
204 Y.namespace("example.test"); |
|
205 |
|
206 Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
207 |
|
208 //name of the test case - if not provided, one is auto-generated |
|
209 name : "Animation Tests", |
|
210 |
|
211 //--------------------------------------------------------------------- |
|
212 // Test methods - names must begin with "test" |
|
213 //--------------------------------------------------------------------- |
|
214 |
|
215 testAnimation : function (){ |
|
216 |
|
217 var myAnim = new Y.Anim({ |
|
218 node: '#testDiv', |
|
219 to: { |
|
220 width: 400 |
|
221 }, |
|
222 duration: 3, |
|
223 easing: Y.Easing.easeOut |
|
224 }); |
|
225 |
|
226 //assign oncomplete handler |
|
227 myAnim.on("end", function(){ |
|
228 |
|
229 //tell the TestRunner to resume |
|
230 this.resume(function(){ |
|
231 |
|
232 Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400."); |
|
233 |
|
234 }); |
|
235 |
|
236 }, this, true); |
|
237 |
|
238 //start the animation |
|
239 myAnim.run(); |
|
240 |
|
241 //wait until something happens |
|
242 this.wait(); |
|
243 |
|
244 } |
|
245 |
|
246 }); |
|
247 |
|
248 //create the console |
|
249 (new Y.Test.Console({ |
|
250 newestOnTop : false, |
|
251 filters: { |
|
252 pass: true, |
|
253 fail: true |
|
254 } |
|
255 })).render('#testLogger'); |
|
256 |
|
257 //create the logger |
|
258 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
259 |
|
260 //run the tests |
|
261 Y.Test.Runner.run(); |
|
262 }); |
|
263 |
|
264 </script></pre> |
|
265 |
|
266 </div> |
|
267 </div> |
|
268 </div> |
|
269 |
|
270 <div class="yui3-u-1-4"> |
|
271 <div class="sidebar"> |
|
272 |
|
273 <div id="toc" class="sidebox"> |
|
274 <div class="hd"> |
|
275 <h2 class="no-toc">Table of Contents</h2> |
|
276 </div> |
|
277 |
|
278 <div class="bd"> |
|
279 <ul class="toc"> |
|
280 <li> |
|
281 <a href="#asynchronous-events-test-example">Asynchronous Events Test Example</a> |
|
282 <ul class="toc"> |
|
283 <li> |
|
284 <a href="#creating-the-testcase">Creating the TestCase</a> |
|
285 </li> |
|
286 <li> |
|
287 <a href="#running-the-tests">Running the tests</a> |
|
288 </li> |
|
289 </ul> |
|
290 </li> |
|
291 <li> |
|
292 <a href="#complete-example-source">Complete Example Source</a> |
|
293 </li> |
|
294 </ul> |
|
295 </div> |
|
296 </div> |
|
297 |
|
298 |
|
299 |
|
300 <div class="sidebox"> |
|
301 <div class="hd"> |
|
302 <h2 class="no-toc">Examples</h2> |
|
303 </div> |
|
304 |
|
305 <div class="bd"> |
|
306 <ul class="examples"> |
|
307 |
|
308 |
|
309 <li data-description="Demonstrates basic usage of YUI Test for setting up and running tests."> |
|
310 <a href="test-simple-example.html">Simple Testing Example</a> |
|
311 </li> |
|
312 |
|
313 |
|
314 |
|
315 <li data-description="Demonstrates how to use advanced testing features such as defining tests that should fail, tests that should be ignored, and tests that should throw an error."> |
|
316 <a href="test-advanced-test-options.html">Advanced Test Options</a> |
|
317 </li> |
|
318 |
|
319 |
|
320 |
|
321 <li data-description="Demonstrates how to use the ArrayAssert object to test array data."> |
|
322 <a href="test-array-tests.html">Array Processing</a> |
|
323 </li> |
|
324 |
|
325 |
|
326 |
|
327 <li data-description="Demonstrates basic asynchronous tests."> |
|
328 <a href="test-async-test.html">Asynchronous Testing</a> |
|
329 </li> |
|
330 |
|
331 |
|
332 |
|
333 <li data-description="Demonstrates using events with asynchronous tests."> |
|
334 <a href="test-async-event-tests.html">Asynchronous Event Testing</a> |
|
335 </li> |
|
336 |
|
337 |
|
338 </ul> |
|
339 </div> |
|
340 </div> |
|
341 |
|
342 |
|
343 |
|
344 </div> |
|
345 </div> |
|
346 </div> |
|
347 </div> |
|
348 |
|
349 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
350 <script>prettyPrint();</script> |
|
351 |
|
352 <script> |
|
353 YUI.Env.Tests = { |
|
354 examples: [], |
|
355 project: '../assets', |
|
356 assets: '../assets/test', |
|
357 name: 'test-async-event-tests', |
|
358 title: 'Asynchronous Event Testing', |
|
359 newWindow: '', |
|
360 auto: false |
|
361 }; |
|
362 YUI.Env.Tests.examples.push('test-simple-example'); |
|
363 YUI.Env.Tests.examples.push('test-advanced-test-options'); |
|
364 YUI.Env.Tests.examples.push('test-array-tests'); |
|
365 YUI.Env.Tests.examples.push('test-async-test'); |
|
366 YUI.Env.Tests.examples.push('test-async-event-tests'); |
|
367 |
|
368 </script> |
|
369 <script src="../assets/yui/test-runner.js"></script> |
|
370 |
|
371 |
|
372 |
|
373 </body> |
|
374 </html> |