dom/tests/mochitest/ajax/scriptaculous/test/unit/builder_test.html

branch
TOR_BUG_9701
changeset 8
97036ab72558
equal deleted inserted replaced
-1:000000000000 0:f98ff8bf4e01
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <title>script.aculo.us Unit test file</title>
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7 <script src="../../lib/prototype.js" type="text/javascript"></script>
8 <script src="../../src/scriptaculous.js" type="text/javascript"></script>
9 <script src="../../src/unittest.js" type="text/javascript"></script>
10 <link rel="stylesheet" href="../test.css" type="text/css" />
11 </head>
12 <body>
13 <h1>script.aculo.us Unit test file</h1>
14 <p>
15 Tests for builder.js
16 </p>
17
18 <!-- Log output -->
19 <div id="testlog"> </div>
20
21 <div id="result"></div>
22
23 <!-- Tests follow -->
24 <script type="text/javascript" language="javascript" charset="utf-8">
25 // <![CDATA[
26
27 // Serializes a node and its contents to plain old HTML
28 // IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
29 // so the contents of style attributes must match what IE thinks is correct
30 function serializeNode(node){
31 if(node.nodeType == 3) return node.nodeValue;
32 node = $(node);
33 var tag = node.tagName.toLowerCase();
34 return '<' + ([tag].concat($A(node.attributes).map(function(attr){
35 // Filter out stuff that we don't need
36 if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
37 typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
38 // remove trailing ; in style attributes on Firefox
39 var value = node.readAttribute(attr.nodeName);
40 if(attr.nodeName == 'style' && value.endsWith(';'))
41 value = value.substr(0, value.length-1);
42 return attr.nodeName + '="' + value + '"'
43 }).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
44 '</' + tag + '>';
45 }
46
47 new Test.Unit.Runner({
48
49 setup: function() {
50 $('result').innerHTML = '';
51 },
52
53 testBuilderBasics: function() { with(this) {
54 var element = Builder.node('div');
55 assertEqual('DIV', element.nodeName);
56
57 var element = Builder.node('div',{id:'mydiv'})
58 assertEqual('mydiv', element.id);
59
60 var element = Builder.node('div',{id:'mydiv',className:'one two'})
61 assertEqual('mydiv', element.id);
62 assertEqual('one two', element.className);
63
64 var element = Builder.node('span','text 123 <blah>');
65 assertEqual('SPAN', element.nodeName);
66 assertEqual('text 123 &lt;blah&gt;', element.innerHTML);
67
68 var element = Builder.node('span',123);
69 assertEqual('SPAN', element.nodeName);
70 assertEqual('123', element.innerHTML);
71
72 var element = Builder.node('span',['test']);
73 assertEqual('SPAN', element.nodeName);
74 assertEqual('test', element.innerHTML);
75
76 var element = Builder.node('span',['test',123]);
77 assertEqual('SPAN', element.nodeName);
78 assertEqual('test123', element.innerHTML);
79
80 var element = Builder.node('span',{},['test',123]);
81 assertEqual('SPAN', element.nodeName);
82 assertEqual('test123', element.innerHTML);
83
84 var element = Builder.node('span',{id:'myspan'},['test',123]);
85 assertEqual('SPAN', element.nodeName);
86 assertEqual('myspan', element.id);
87 assertEqual('test123', element.innerHTML);
88
89 var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
90 assertEqual('1234567890',element.innerHTML);
91
92 var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
93 assertEqual('1234567890',element.innerHTML);
94
95 var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
96 assertEqual('1234567890',element.innerHTML);
97
98 var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
99 assertEqual('1234567890',element.innerHTML);
100 assertEqual(10, element.childNodes.length);
101
102 var element = Builder.node('div', Builder.node('span'));
103 assertEqual(1, element.childNodes.length);
104 assertEqual('SPAN', element.childNodes[0].tagName);
105
106 var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
107 assertEqual(1, element.childNodes.length);
108 assertEqual('mydiv', element.id);
109 assertEqual('SPAN', element.childNodes[0].tagName);
110 }},
111
112 testBuilderClassAndFor: function() { with(this) {
113 var elt = Builder.node('div', { className: 'demoClass' });
114 assertEqual('demoClass', elt.className);
115 var elt = Builder.node('label', { htmlFor: 'mydiv' });
116 assertEqual('mydiv', elt.htmlFor);
117 }},
118
119 testBuilderAllXHTMLTags: function() { with(this) {
120 var XHTML_TAGS = [
121 'a','abbr','acronym','address','applet','area',
122 'b','bdo','big','blockquote','br','button',
123 'caption','cite','code','col','colgroup',
124 'dd','del','dfn','div','dl','dt',
125 'em',
126 'fieldset','form',
127 'h1','h2','h3','h4','h5','h6','hr',
128 'i','iframe','img','input','ins',
129 'kbd',
130 'label','legend','li',
131 'map',
132 'object','ol','optgroup','option',
133 'p','param','pre',
134 'q',
135 'samp','script','select','small','span','strong','style','sub','sup',
136 'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
137 'ul','var']
138
139 XHTML_TAGS.each(function(tag) {
140 try {
141 var element = Builder.node(tag);
142 assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
143 assertEqual(tag.toUpperCase(), element.nodeName);
144
145 var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
146 assertEqual(tag.toUpperCase(), element.nodeName);
147 assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
148 } catch(e) {
149 assert(false, 'Error while creating node of type '+tag+'. Note: Firefox bug in 1.0.X on option and optgroup, fixed in 1.5b1. Internet Explorer 6 doesn\'t support the ABBR tag and has no standard DOM implementation for tables.');
150 }
151 });
152 }},
153
154 // special case, because requires workarounds on IE and Firefox < 1.5
155 testBuilderOptionTag: function() { with(this) {
156 assertEqual('', Builder.node('option').innerHTML);
157 assertEqual('test', Builder.node('option','test').innerHTML);
158 assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
159 assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
160 assertEqual('test', Builder.node('option',{},'test').innerHTML);
161
162 var selectElement = Builder.node('select');
163 var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
164 selectElement.appendChild(optionElement);
165 document.body.appendChild(selectElement);
166 assertEqual('123', $('option_123').innerHTML);
167 }},
168
169 testBuilderContatenation: function() { with(this) {
170 var element = Builder.node('div', [Builder.node('span')]);
171 assertEqual('DIV', element.nodeName);
172 assertEqual(1, element.childNodes.length);
173 assertEqual('SPAN', element.firstChild.nodeName);
174
175 var element = Builder.node('div', [Builder.node('span'),'text']);
176 assertEqual(2, element.childNodes.length);
177 assertEqual(0, element.firstChild.childNodes.length);
178 assertEqual('DIV', element.nodeName);
179 assertEqual('SPAN', element.firstChild.nodeName);
180 assertEqual(3, element.firstChild.nextSibling.nodeType);
181
182 var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
183 assertEqual(2, element.childNodes.length);
184 assertEqual(1, element.firstChild.childNodes.length);
185 assertEqual('DIV', element.nodeName);
186 assertEqual('SPAN', element.firstChild.nodeName);
187 assertEqual('STRONG', element.firstChild.firstChild.nodeName);
188 assertEqual('blah', element.firstChild.firstChild.innerHTML);
189 assertEqual(3, element.firstChild.nextSibling.nodeType);
190 }},
191
192 testBuilderComplexExample: function() { with(this) {
193 var element = Builder.node('div',{id:'ghosttrain'},[
194 Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
195 Builder.node('h1','Ghost Train'),
196 "testtext", 2, 3, 4,
197 Builder.node('ul',[
198 Builder.node('li',{onclick:'alert(\'test\')'},'click me')
199 ]),
200 ]),
201 ]);
202 assertEqual('DIV', element.nodeName);
203
204 $('result').appendChild(element);
205
206 // browsers aren't sure about upper and lower case on elements
207 assertEqual(
208 '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
209 '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
210 serializeNode($('result').childNodes[0]));
211 }},
212
213 testBuilderShortcuts: function() { with(this) {
214 Builder.dump();
215
216 var element = DIV(SPAN());
217 assertEqual('SPAN', element.childNodes[0].tagName);
218
219 var element = DIV({id:'test'},SPAN());
220 assertEqual('SPAN', element.childNodes[0].tagName);
221
222 var element = DIV({id:'ghosttrain'},[
223 DIV({style:'font-weight: bold; font-size: 11px'},[
224 H1('Ghost Train'),
225 "testtext", 2, 3, 4,
226 UL([
227 LI({onclick:'alert(\'test\')'},'click me')
228 ]),
229 ]),
230 ]);
231 assertEqual('DIV', element.nodeName);
232
233 $('result').appendChild(element);
234
235 assertEqual(
236 '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
237 '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
238 serializeNode($('result').childNodes[0]));
239 }},
240
241 testBuilderBuild: function() { with(this) {
242 ['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
243 function(html){
244 var node = Builder.build(html);
245 assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
246 });
247 }},
248
249 testBuilderAttributeEscaping: function() { with(this) {
250 var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
251 assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
252 }}
253
254 });
255 // ]]>
256 </script>
257 </body>
258 </html>

mercurial