builder_test.html (10529B)
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>