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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<div class="intro">
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <p>This example shows basic usage of the YUI Test framework for testing browser-based JavaScript code.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove Two different <a href="index.html#testcase"><code>TestCase</code></a> objects are created and added to a
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <a href="index.html#testsuite"><code>TestSuite</code></a> object. The <a href="index.html#testrunner"><code>TestRunner</code></a>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove is then used to run the tests once the page has loaded.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<div class="example yui3-skin-sam">
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove {{>test-simple-example-source}}
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h2 class="first">Simple 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 first TestCase</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The first step is to create a new <code>Y.Test.Case</code> object called <code>DataTestCase</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 : "Data Tests",
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove // setUp and tearDown methods - optional
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove * Sets up data that is needed by each test.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove setUp : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove name: "test",
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove * Cleans up everything that was created by setUp().
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove tearDown : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove // Test methods - names must begin with "test"
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testName : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testYear : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testBeta : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The object literal passed into the constructor contains a number of different sections. The first section contains the <code>name</code> property,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove 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>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<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>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove 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,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <code>setUp()</code> creates a data object. The <code>tearDown()</code> is responsible for undoing what was done in <code>setUp()</code>. It is
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove 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>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The last section contains the actual tests to be run. Test method names must always begin with the word "test" (all lowercase) in order
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove to differentiate them from other methods that may be added to the object.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The first test in this object is <code>testName()</code>, which runs
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove various assertions on <code>data.name</code>. Inside of this method, a shortcut to <code>Y.Assert</code> is set up and used to run three
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove assertions: <code>isObject()</code> on <code>data</code>, <code>isString()</code> on <code>data.name</code> and <code>areEqual()</code> to compare
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <code>data.name</code> to the expected value, "test". These assertions are arranged in order from least-specific to most-specific,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove which is the recommended way to arrange your assertions. Basically, the third assertion is useless to run unless the second has passes and the second
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove can't possibly pass unless the first passed. Both <code>isObject()</code> and <code>isString()</code> accept a single argument, which is the value
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove to test (you could optionally include a failure message as a second argument, though this is not required). The <code>areEqual()</code> method
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove expects two arguments, the first being the expected value ("test") and the second being the actual value (<code>data.name</code>).</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The second and third tests follow the same pattern as the first with the exception that they work with different data types. The <code>testYear()</code>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove method works with <code>data.year</code>, which is a number and so runs tests specifically for numbers (<code>areEqual()</code> can be used with
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove all data types). The <code>testBeta()</code> method works with <code>data.beta</code>, which is a Boolean, and so it uses the <code>isTrue()</code>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove assertion instead of <code>areEqual()</code> (though it could also use <code>areEqual(true, this.data.beta)</code>).</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <h3>Creating the second TestCase</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <p>Although it's possible that you'll have only one <code>Y.Test.Case</code> object, typically there is more than one, and so this example includes
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove a second <code>Y.Test.Case</code>. This one tests some of the built-in functions of the <code>Array</code> object:</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //name of the test case - if not provided, one is auto-generated
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove name : "Array Tests",
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove // setUp and tearDown methods - optional
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove * Sets up data that is needed by each test.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove setUp : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove this.data = [0,1,2,3,4]
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove * Cleans up everything that was created by setUp().
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove tearDown : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove // Test methods - names must begin with "test"
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove //---------------------------------------------------------------------
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testPop : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var value = this.data.pop();
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testPush : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove testSplice : function () {
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove var Assert = Y.Assert;
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <p>As with the first <code>Y.Test.Case</code>, this one is split up into three sections: the name, the <code>setUp()</code> and <code>tearDown()</code>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove methods, and the test methods. The <code>setUp()</code> method in this <code>Y.Test.Case</code> creates an array of data to be used by the various
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove tests while the <code>tearDown()</code> method destroys the array. The test methods are very simple, testing the <code>pop()</code>, <code>push()</code>,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove and <code>splice()</code> methods. Each test method uses <code>areEqual()</code> exclusively, to show the different ways that it can be used.
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove The <code>testPop()</code> method calls <code>pop()</code> on the array of values, then verifies that the length of the array has changed and
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove that the value popped off is 4; the <code>testPush()</code> pushes a new value (5) onto the array and then verifies that the length of the array has
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove changed and that the value is included in the correct location; the <code>testSplice()</code> method tests <code>splice()</code> by removing one
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove value that's already in the array and inserting two in its place.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h3>Creating the TestSuite</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>To better organize the two <code>Y.Test.Case</code> objects, a <code>Y.Test.Suite</code> is created and those two <code>Y.Test.Case</code> objects are
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove added to it:</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan GroveY.example.test.ExampleSuite = new Y.Test.Suite("Example Suite");
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan GroveY.example.test.ExampleSuite.add(Y.example.test.DataTestCase);
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan GroveY.example.test.ExampleSuite.add(Y.example.test.ArrayTestCase);
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>The first line creates a new <code>Y.Test.Suite</code> object using its constructor, which accepts a single argument - the name of the suite. As with
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove the name of a <code>Y.Test.Case</code>, the <code>Y.Test.Suite</code> name is used to determine where execution is when tests are being executed. Although
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove not required (one is generated if it's not provided), it is recommended that you select a meaningful name to aid in debugging.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>Any number of <code>Y.Test.Case</code> and <code>Y.Test.Suite</code> objects can be added to a <code>Y.Test.Suite</code> by using the <code>add()</code>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove method. In this example, the two <code>Y.Test.Case</code> objects created earlier are added to the <code>Y.Test.Suite</code>.</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<h3>Running the tests</h3>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove<p>With all of the tests defined, the last step is to run them. This initialization is assigned to take place when all of the YUI
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove components have been loaded:</p>
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove//create the console
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove verbose : true,
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove newestOnTop : false
1ac6d38f8eef642ee4f7191b863a986f4cb7571fDav Glass})).render('#testLogger');
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.Suite</code> object by calling
1b7d9ee6f1128c8cb5e16c3a11ba045998296171Ryan Grove <code>add()</code> (any number of <code>Y.Test.Case</code> and <code>Y.Test.Suite</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-simple-example-source}}