|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: Asynchronous 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 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> object is created with a test that waits for a |
|
33 few seconds before continuing. The <code>Y.Test.Runner</code> |
|
34 is then used to run the tests once the page has loaded.</p> |
|
35 </div> |
|
36 |
|
37 <div class="example yui3-skin-sam"> |
|
38 <div id="testLogger"></div> |
|
39 |
|
40 <script> |
|
41 YUI().use('node', 'test-console', 'test',function (Y) { |
|
42 |
|
43 Y.namespace("example.test"); |
|
44 |
|
45 Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
46 |
|
47 //name of the test case - if not provided, one is auto-generated |
|
48 name : "Asynchronous Tests", |
|
49 |
|
50 //--------------------------------------------------------------------- |
|
51 // setUp and tearDown methods - optional |
|
52 //--------------------------------------------------------------------- |
|
53 |
|
54 /* |
|
55 * Sets up data that is needed by each test. |
|
56 */ |
|
57 setUp : function () { |
|
58 this.data = { |
|
59 name: "test", |
|
60 year: 2007, |
|
61 beta: true |
|
62 }; |
|
63 }, |
|
64 |
|
65 /* |
|
66 * Cleans up everything that was created by setUp(). |
|
67 */ |
|
68 tearDown : function () { |
|
69 delete this.data; |
|
70 }, |
|
71 |
|
72 //--------------------------------------------------------------------- |
|
73 // Test methods - names must begin with "test" |
|
74 //--------------------------------------------------------------------- |
|
75 |
|
76 testWait : function (){ |
|
77 var Assert = Y.Assert; |
|
78 |
|
79 //do some assertions now |
|
80 Assert.isTrue(this.data.beta); |
|
81 Assert.isNumber(this.data.year); |
|
82 |
|
83 //wait five seconds and do some more |
|
84 this.wait(function(){ |
|
85 |
|
86 Assert.isString(this.data.name); |
|
87 |
|
88 }, 5000); |
|
89 |
|
90 } |
|
91 |
|
92 }); |
|
93 |
|
94 //create the console |
|
95 (new Y.Test.Console({ |
|
96 newestOnTop : false, |
|
97 filters: { |
|
98 pass: true, |
|
99 fail: true |
|
100 } |
|
101 })).render('#testLogger'); |
|
102 |
|
103 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
104 |
|
105 //run the tests |
|
106 Y.Test.Runner.run(); |
|
107 }); |
|
108 |
|
109 </script> |
|
110 |
|
111 </div> |
|
112 |
|
113 <h2 class="first" id="asynchronous-test-example">Asynchronous Test Example</h2> |
|
114 |
|
115 <p>This example begins by creating a namespace:</p> |
|
116 <pre class="code prettyprint">Y.namespace("example.test");</pre> |
|
117 |
|
118 <p>This namespace serves as the core object upon which others will be added (to prevent creating global objects).</p> |
|
119 |
|
120 <h3 id="creating-the-testcase">Creating the TestCase</h3> |
|
121 |
|
122 <p>The first step is to create a new <code>Y.Test.Case</code> object called <code>AsyncTestCase</code>. |
|
123 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> |
|
124 <pre class="code prettyprint">Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
125 |
|
126 //name of the test case - if not provided, one is auto-generated |
|
127 name : "Asynchronous Tests", |
|
128 |
|
129 //--------------------------------------------------------------------- |
|
130 // setUp and tearDown methods - optional |
|
131 //--------------------------------------------------------------------- |
|
132 |
|
133 /* |
|
134 * Sets up data that is needed by each test. |
|
135 */ |
|
136 setUp : function () { |
|
137 this.data = { |
|
138 name: "test", |
|
139 year: 2007, |
|
140 beta: true |
|
141 }; |
|
142 }, |
|
143 |
|
144 /* |
|
145 * Cleans up everything that was created by setUp(). |
|
146 */ |
|
147 tearDown : function () { |
|
148 delete this.data; |
|
149 }, |
|
150 |
|
151 //--------------------------------------------------------------------- |
|
152 // Test methods - names must begin with "test" |
|
153 //--------------------------------------------------------------------- |
|
154 |
|
155 testWait : function (){ |
|
156 var Assert = Y.Assert; |
|
157 |
|
158 //do some assertions now |
|
159 Assert.isTrue(this.data.beta); |
|
160 Assert.isNumber(this.data.year); |
|
161 |
|
162 //wait five seconds and do some more |
|
163 this.wait(function(){ |
|
164 |
|
165 Assert.isString(this.data.name); |
|
166 |
|
167 }, 5000); |
|
168 |
|
169 } |
|
170 |
|
171 });</pre> |
|
172 |
|
173 <p>The object literal passed into the constructor contains two different sections. The first section contains the <code>name</code> property, |
|
174 which is used to determine which <code>Y.Test.Case</code> is being executed. A name is necessary, so one is generated if it isn't specified.</p> |
|
175 <p>Next, the <code>setUp()</code> and <code>tearDown()</code> methods are included. The <code>setUp()</code> method is used in a <code>Y.Test.Case</code> |
|
176 to set up data that may be needed for tests to be completed. This method is called immediately before each test is executed. For this example, |
|
177 <code>setUp()</code> creates a data object. The <code>tearDown()</code> is responsible for undoing what was done in <code>setUp()</code>. It is |
|
178 run immediately after each test is run and, in this case, deletes the data object that was created by <code>setUp</code>. These methods are optional.</p> |
|
179 <p>The second section contains the actual tests to be run. The only test is <code>testWait()</code>, which demonstrates using |
|
180 the <code>wait()</code> method to delay test execution. There are two arguments passed in: a function to run once the test resumes |
|
181 and the number of milliseconds to wait before running this function (same basic format as <code>setTimeout()</code>). When |
|
182 the test resumes, the function is executed in the context of the <code>Y.Test.Case</code> object, meaning that it still has |
|
183 access to all of the same data as the test that called <code>wait()</code>, including properties and methods on the <code>Y.Test.Case</code> |
|
184 itself. This example shows the anonymous function using both the <code>Y.Assert</code> object and the <code>data</code> property |
|
185 of the <code>Y.Test.Case</code>.</p> |
|
186 |
|
187 <h3 id="running-the-tests">Running the tests</h3> |
|
188 |
|
189 <p>With all of the tests defined, the last step is to run them:</p> |
|
190 |
|
191 <pre class="code prettyprint">//create the console |
|
192 (new Y.Test.Console({ |
|
193 verbose : true, |
|
194 newestOnTop : false |
|
195 })).render('#testLogger'); |
|
196 |
|
197 //add the test suite to the runner's queue |
|
198 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
199 |
|
200 //run the tests |
|
201 Y.Test.Runner.run();</pre> |
|
202 |
|
203 |
|
204 <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 |
|
205 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 |
|
206 <code>add()</code> (any number of <code>Y.Test.Case</code> and <code>TestSuite</code> objects can be added to a <code>TestRunner</code>, |
|
207 this example only adds one for simplicity). The very last step is to call <code>run()</code>, which begins executing the tests in its |
|
208 queue and displays the results in the <code>Y.Test.Console</code>.</p> |
|
209 |
|
210 <h2 id="complete-example-source">Complete Example Source</h2> |
|
211 |
|
212 <pre class="code prettyprint"><div id="testLogger"></div> |
|
213 |
|
214 <script> |
|
215 YUI().use('node', 'test-console', 'test',function (Y) { |
|
216 |
|
217 Y.namespace("example.test"); |
|
218 |
|
219 Y.example.test.AsyncTestCase = new Y.Test.Case({ |
|
220 |
|
221 //name of the test case - if not provided, one is auto-generated |
|
222 name : "Asynchronous Tests", |
|
223 |
|
224 //--------------------------------------------------------------------- |
|
225 // setUp and tearDown methods - optional |
|
226 //--------------------------------------------------------------------- |
|
227 |
|
228 /* |
|
229 * Sets up data that is needed by each test. |
|
230 */ |
|
231 setUp : function () { |
|
232 this.data = { |
|
233 name: "test", |
|
234 year: 2007, |
|
235 beta: true |
|
236 }; |
|
237 }, |
|
238 |
|
239 /* |
|
240 * Cleans up everything that was created by setUp(). |
|
241 */ |
|
242 tearDown : function () { |
|
243 delete this.data; |
|
244 }, |
|
245 |
|
246 //--------------------------------------------------------------------- |
|
247 // Test methods - names must begin with "test" |
|
248 //--------------------------------------------------------------------- |
|
249 |
|
250 testWait : function (){ |
|
251 var Assert = Y.Assert; |
|
252 |
|
253 //do some assertions now |
|
254 Assert.isTrue(this.data.beta); |
|
255 Assert.isNumber(this.data.year); |
|
256 |
|
257 //wait five seconds and do some more |
|
258 this.wait(function(){ |
|
259 |
|
260 Assert.isString(this.data.name); |
|
261 |
|
262 }, 5000); |
|
263 |
|
264 } |
|
265 |
|
266 }); |
|
267 |
|
268 //create the console |
|
269 (new Y.Test.Console({ |
|
270 newestOnTop : false, |
|
271 filters: { |
|
272 pass: true, |
|
273 fail: true |
|
274 } |
|
275 })).render('#testLogger'); |
|
276 |
|
277 Y.Test.Runner.add(Y.example.test.AsyncTestCase); |
|
278 |
|
279 //run the tests |
|
280 Y.Test.Runner.run(); |
|
281 }); |
|
282 |
|
283 </script></pre> |
|
284 |
|
285 </div> |
|
286 </div> |
|
287 </div> |
|
288 |
|
289 <div class="yui3-u-1-4"> |
|
290 <div class="sidebar"> |
|
291 |
|
292 <div id="toc" class="sidebox"> |
|
293 <div class="hd"> |
|
294 <h2 class="no-toc">Table of Contents</h2> |
|
295 </div> |
|
296 |
|
297 <div class="bd"> |
|
298 <ul class="toc"> |
|
299 <li> |
|
300 <a href="#asynchronous-test-example">Asynchronous Test Example</a> |
|
301 <ul class="toc"> |
|
302 <li> |
|
303 <a href="#creating-the-testcase">Creating the TestCase</a> |
|
304 </li> |
|
305 <li> |
|
306 <a href="#running-the-tests">Running the tests</a> |
|
307 </li> |
|
308 </ul> |
|
309 </li> |
|
310 <li> |
|
311 <a href="#complete-example-source">Complete Example Source</a> |
|
312 </li> |
|
313 </ul> |
|
314 </div> |
|
315 </div> |
|
316 |
|
317 |
|
318 |
|
319 <div class="sidebox"> |
|
320 <div class="hd"> |
|
321 <h2 class="no-toc">Examples</h2> |
|
322 </div> |
|
323 |
|
324 <div class="bd"> |
|
325 <ul class="examples"> |
|
326 |
|
327 |
|
328 <li data-description="Demonstrates basic usage of YUI Test for setting up and running tests."> |
|
329 <a href="test-simple-example.html">Simple Testing Example</a> |
|
330 </li> |
|
331 |
|
332 |
|
333 |
|
334 <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."> |
|
335 <a href="test-advanced-test-options.html">Advanced Test Options</a> |
|
336 </li> |
|
337 |
|
338 |
|
339 |
|
340 <li data-description="Demonstrates how to use the ArrayAssert object to test array data."> |
|
341 <a href="test-array-tests.html">Array Processing</a> |
|
342 </li> |
|
343 |
|
344 |
|
345 |
|
346 <li data-description="Demonstrates basic asynchronous tests."> |
|
347 <a href="test-async-test.html">Asynchronous Testing</a> |
|
348 </li> |
|
349 |
|
350 |
|
351 |
|
352 <li data-description="Demonstrates using events with asynchronous tests."> |
|
353 <a href="test-async-event-tests.html">Asynchronous Event Testing</a> |
|
354 </li> |
|
355 |
|
356 |
|
357 </ul> |
|
358 </div> |
|
359 </div> |
|
360 |
|
361 |
|
362 |
|
363 </div> |
|
364 </div> |
|
365 </div> |
|
366 </div> |
|
367 |
|
368 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
369 <script>prettyPrint();</script> |
|
370 |
|
371 <script> |
|
372 YUI.Env.Tests = { |
|
373 examples: [], |
|
374 project: '../assets', |
|
375 assets: '../assets/test', |
|
376 name: 'test-async-test', |
|
377 title: 'Asynchronous Testing', |
|
378 newWindow: '', |
|
379 auto: false |
|
380 }; |
|
381 YUI.Env.Tests.examples.push('test-simple-example'); |
|
382 YUI.Env.Tests.examples.push('test-advanced-test-options'); |
|
383 YUI.Env.Tests.examples.push('test-array-tests'); |
|
384 YUI.Env.Tests.examples.push('test-async-test'); |
|
385 YUI.Env.Tests.examples.push('test-async-event-tests'); |
|
386 |
|
387 </script> |
|
388 <script src="../assets/yui/test-runner.js"></script> |
|
389 |
|
390 |
|
391 |
|
392 </body> |
|
393 </html> |