|
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 <blah>', 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> |