1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<div class="intro">
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <p>This example shows how to create an asynchronous test with the YUI Test framework for testing browser-based JavaScript code.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove A <code>Y.Test.Case</code></a> object is created to test the
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <code>Y.Anim</code> object. The test waits until the animation is complete
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove before checking the settings of the animated element.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<div class="example yui3-skin-sam" style="position: relative;">
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove {{>test-async-event-tests-source}}
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h2 class="first">Asynchronous Events Test Example</h2>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>This example begins by creating a namespace:</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>This namespace serves as the core object upon which others will be added (to prevent creating global objects).</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h3>Creating the TestCase</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The first step is to create a new <code>Y.Test.Case</code>object called <code>AsyncTestCase</code>.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove 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>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //name of the test case - if not provided, one is auto-generated
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove name : "Animation Tests",
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove // Test methods - names must begin with "test"
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testAnimation : function (){
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var myAnim = new Y.Anim({
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove node: '#testDiv',
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove duration: 3,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //assign oncomplete handler
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove myAnim.on("end", function(){
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //tell the TestRunner to resume
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove Y.Assert.areEqual(document.getElementById("testDiv").offsetWidth, 400, "Width of the DIV should be 400.");
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove }, this, true);
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //start the animation
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //wait until something happens
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The only test in the <code>Y.Test.Case</code>is called <code>testAnimation</code>. It begins by creating a new
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<code>Anim</code> object that will animate the width of a <code>div</code> to 400 pixels over three seconds. An
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Groveevent handler is assigned to the <code>Anim</code> object's <code>end</code> event, within which the
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<code>resume()</code> method is called. A function is passed into the <code>resume()</code> method to indicate
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grovethe code to run when the test resumes, which is a test to make sure the width is 400 pixels. After that, the
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<code>run()</code> method is called to begin the animation and the <code>wait()</code> method is called to
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grovetell the <code>Y.Test.Runner</code> to wait until it is told to resume testing again. When the animation completes,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grovethe <code>end</code> event is fired and the test resumes, assuring that the width is correct.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h3>Running the tests</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>With all of the tests defined, the last step is to run them:</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove//create the console
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove verbose : true,
1ac6d38f8eef642ee4f7191b863a986f4cb7571fDav Glass newestOnTop : false,
1ac6d38f8eef642ee4f7191b863a986f4cb7571fDav Glass}).render('#testLogger');
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove//create the logger
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove//run the tests
1ac6d38f8eef642ee4f7191b863a986f4cb7571fDav Glass<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
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove 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
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <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>,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove this example only adds one for simplicity). The very last step is to call <code>run()</code>, which begins executing the tests in its
1ac6d38f8eef642ee4f7191b863a986f4cb7571fDav Glass queue and displays the results in the <code>Y.Test.Console</code>.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h2>Complete Example Source</h2>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove{{>test-async-event-tests-source}}