|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Test Console</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>Test Console</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> |
|
|
32 |
Test Console is a specialized subclass of the Console widget that's pre-configured to display YUI Test output in an attractive, readable log with no extra configuration needed. Just drop it into your test page and run your tests! |
|
|
33 |
</p> |
|
|
34 |
</div> |
|
|
35 |
|
|
|
36 |
<h2 id="getting-started">Getting Started</h2> |
|
|
37 |
|
|
|
38 |
<p> |
|
|
39 |
To include the source files for Test Console and its dependencies, first load |
|
|
40 |
the YUI seed file if you haven't already loaded it. |
|
|
41 |
</p> |
|
|
42 |
|
|
|
43 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
44 |
|
|
|
45 |
|
|
|
46 |
<p> |
|
|
47 |
Next, create a new YUI instance for your application and populate it with the |
|
|
48 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
49 |
YUI will automatically load any dependencies required by the modules you |
|
|
50 |
specify. |
|
|
51 |
</p> |
|
|
52 |
|
|
|
53 |
<pre class="code prettyprint"><script> |
|
|
54 |
// Create a new YUI instance and populate it with the required modules. |
|
|
55 |
YUI().use('test-console', function (Y) { |
|
|
56 |
// Test Console is available and ready for use. Add implementation |
|
|
57 |
// code here. |
|
|
58 |
}); |
|
|
59 |
</script></pre> |
|
|
60 |
|
|
|
61 |
|
|
|
62 |
<p> |
|
|
63 |
For more information on creating YUI instances and on the |
|
|
64 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
65 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
66 |
</p> |
|
|
67 |
|
|
|
68 |
|
|
|
69 |
<h2 id="using-test-console">Using Test Console</h2> |
|
|
70 |
|
|
|
71 |
<p> |
|
|
72 |
First, create some tests using <a href="../test/index.html">YUI Test</a>. Next, create a Test Console instance on your test page and run your tests. |
|
|
73 |
</p> |
|
|
74 |
|
|
|
75 |
<pre class="code prettyprint"><div id="log" class="yui3-skin-sam"></div> |
|
|
76 |
|
|
|
77 |
<script> |
|
|
78 |
YUI().use('test-console', function (Y) { |
|
|
79 |
// ... set up your test cases here ... |
|
|
80 |
|
|
|
81 |
// Render the console inside the #log div, then run the tests. |
|
|
82 |
new Y.Test.Console().render('#log'); |
|
|
83 |
Y.Test.Runner.run(); |
|
|
84 |
}); |
|
|
85 |
</script></pre> |
|
|
86 |
|
|
|
87 |
|
|
|
88 |
<p> |
|
|
89 |
Test results will automatically be displayed in the test console. By default, only failing tests and the final summary info will be displayed to keep things readable. If you'd like to see an entry for passing tests as well, just click the "pass" checkbox at the bottom of the console. |
|
|
90 |
</p> |
|
|
91 |
|
|
|
92 |
<h3 id="category-filters">Category Filters</h3> |
|
|
93 |
|
|
|
94 |
<p> |
|
|
95 |
The Test Console supports filtering of the entries it displays. By default, failing tests and a final summary are always displayed, while passing tests and other status information are hidden to avoid clutter. |
|
|
96 |
</p> |
|
|
97 |
|
|
|
98 |
<p> |
|
|
99 |
You can change which categories are displayed or hidden by passing a custom configuration for the <code>filters</code> attribute. |
|
|
100 |
</p> |
|
|
101 |
|
|
|
102 |
<pre class="code prettyprint">// Show passing tests as well as failing tests by default. |
|
|
103 |
new Y.Test.Console({ |
|
|
104 |
filters: { |
|
|
105 |
pass: true, |
|
|
106 |
fail: true |
|
|
107 |
} |
|
|
108 |
}).render();</pre> |
|
|
109 |
|
|
|
110 |
|
|
|
111 |
<p> |
|
|
112 |
The following entry categories are available. |
|
|
113 |
</p> |
|
|
114 |
|
|
|
115 |
<table> |
|
|
116 |
<thead> |
|
|
117 |
<tr> |
|
|
118 |
<th>Category</th> |
|
|
119 |
<th>Default</th> |
|
|
120 |
<th>Description</th> |
|
|
121 |
</tr> |
|
|
122 |
</thead> |
|
|
123 |
<tbody> |
|
|
124 |
<tr> |
|
|
125 |
<td>fail</td> |
|
|
126 |
<td><code>true</code></td> |
|
|
127 |
<td> |
|
|
128 |
<p> |
|
|
129 |
A failing test. |
|
|
130 |
</p> |
|
|
131 |
</td> |
|
|
132 |
</tr> |
|
|
133 |
|
|
|
134 |
<tr> |
|
|
135 |
<td>info</td> |
|
|
136 |
<td><code>true</code></td> |
|
|
137 |
<td> |
|
|
138 |
<p> |
|
|
139 |
Summary information displayed after all tests have run, such as the total number of passing and failing tests. |
|
|
140 |
</p> |
|
|
141 |
</td> |
|
|
142 |
</tr> |
|
|
143 |
|
|
|
144 |
<tr> |
|
|
145 |
<td>pass</td> |
|
|
146 |
<td><code>false</code></td> |
|
|
147 |
<td> |
|
|
148 |
<p> |
|
|
149 |
A passing test. |
|
|
150 |
</p> |
|
|
151 |
</td> |
|
|
152 |
</tr> |
|
|
153 |
|
|
|
154 |
<tr> |
|
|
155 |
<td>status</td> |
|
|
156 |
<td><code>false</code></td> |
|
|
157 |
<td> |
|
|
158 |
<p> |
|
|
159 |
Status information displayed after each test case has run. This can be noisy when running a test suite with many test cases, so it's disabled by default. |
|
|
160 |
</p> |
|
|
161 |
</td> |
|
|
162 |
</tr> |
|
|
163 |
</tbody> |
|
|
164 |
</table> |
|
|
165 |
|
|
|
166 |
<h2 id="demo">Demo</h2> |
|
|
167 |
|
|
|
168 |
<p> |
|
|
169 |
Here's a working example you can play with. Try checking the "pass" checkbox to see passing tests. |
|
|
170 |
</p> |
|
|
171 |
|
|
|
172 |
<div id="log" class="yui3-skin-sam"> |
|
|
173 |
<style scoped> |
|
|
174 |
#log h4 { |
|
|
175 |
border: none; |
|
|
176 |
margin: default; |
|
|
177 |
padding: default; |
|
|
178 |
text-transform: none; |
|
|
179 |
} |
|
|
180 |
</style> |
|
|
181 |
</div> |
|
|
182 |
|
|
|
183 |
<script> |
|
|
184 |
YUI().use('test-console', function (Y) { |
|
|
185 |
var Assert = Y.Assert, |
|
|
186 |
suite; |
|
|
187 |
|
|
|
188 |
suite = new Y.Test.Suite('Test Console'); |
|
|
189 |
|
|
|
190 |
suite.add(new Y.Test.Case({ |
|
|
191 |
name: 'General', |
|
|
192 |
|
|
|
193 |
'this test should fail with a forced failure': function () { |
|
|
194 |
Assert.fail(); |
|
|
195 |
}, |
|
|
196 |
|
|
|
197 |
'this test should fail with an unexpected error': function () { |
|
|
198 |
throw new Error('OMG!'); |
|
|
199 |
}, |
|
|
200 |
|
|
|
201 |
'this test should pass': function () { |
|
|
202 |
Assert.areEqual(true, true); |
|
|
203 |
}, |
|
|
204 |
|
|
|
205 |
'this test should also pass': function () { |
|
|
206 |
Assert.areEqual('monkeys', 'monkeys'); |
|
|
207 |
} |
|
|
208 |
})); |
|
|
209 |
|
|
|
210 |
Y.Test.Runner.add(suite); |
|
|
211 |
new Y.Test.Console().render('#log'); |
|
|
212 |
Y.Test.Runner.run(); |
|
|
213 |
}); |
|
|
214 |
</script> |
|
|
215 |
</div> |
|
|
216 |
</div> |
|
|
217 |
</div> |
|
|
218 |
|
|
|
219 |
<div class="yui3-u-1-4"> |
|
|
220 |
<div class="sidebar"> |
|
|
221 |
|
|
|
222 |
<div id="toc" class="sidebox"> |
|
|
223 |
<div class="hd"> |
|
|
224 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
225 |
</div> |
|
|
226 |
|
|
|
227 |
<div class="bd"> |
|
|
228 |
<ul class="toc"> |
|
|
229 |
<li> |
|
|
230 |
<a href="#getting-started">Getting Started</a> |
|
|
231 |
</li> |
|
|
232 |
<li> |
|
|
233 |
<a href="#using-test-console">Using Test Console</a> |
|
|
234 |
<ul class="toc"> |
|
|
235 |
<li> |
|
|
236 |
<a href="#category-filters">Category Filters</a> |
|
|
237 |
</li> |
|
|
238 |
</ul> |
|
|
239 |
</li> |
|
|
240 |
<li> |
|
|
241 |
<a href="#demo">Demo</a> |
|
|
242 |
</li> |
|
|
243 |
</ul> |
|
|
244 |
</div> |
|
|
245 |
</div> |
|
|
246 |
|
|
|
247 |
|
|
|
248 |
|
|
|
249 |
|
|
|
250 |
|
|
|
251 |
</div> |
|
|
252 |
</div> |
|
|
253 |
</div> |
|
|
254 |
</div> |
|
|
255 |
|
|
|
256 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
257 |
<script>prettyPrint();</script> |
|
|
258 |
|
|
|
259 |
<script> |
|
|
260 |
YUI.Env.Tests = { |
|
|
261 |
examples: [], |
|
|
262 |
project: '../assets', |
|
|
263 |
assets: '../assets/test-console', |
|
|
264 |
name: 'test-console', |
|
|
265 |
title: 'Test Console', |
|
|
266 |
newWindow: '', |
|
|
267 |
auto: false |
|
|
268 |
}; |
|
|
269 |
|
|
|
270 |
</script> |
|
|
271 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
272 |
|
|
|
273 |
|
|
|
274 |
|
|
|
275 |
</body> |
|
|
276 |
</html> |