builder_test.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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. <!-- Log output -->
  18. <div id="testlog"> </div>
  19. <div id="result"></div>
  20. <!-- Tests follow -->
  21. <script type="text/javascript" language="javascript" charset="utf-8">
  22. // <![CDATA[
  23. // Serializes a node and it's contents to plain old HTML
  24. // IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
  25. // so the contents of style attributes must match what IE thinks is correct
  26. function serializeNode(node){
  27. if(node.nodeType == 3) return node.nodeValue;
  28. node = $(node);
  29. var tag = node.tagName.toLowerCase();
  30. return '<' + ([tag].concat($A(node.attributes).map(function(attr){
  31. // Filter out stuff that we don't need
  32. if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
  33. typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
  34. // remove trailing ; in style attributes on Firefox
  35. var value = node.readAttribute(attr.nodeName);
  36. if(attr.nodeName == 'style' && value.endsWith(';'))
  37. value = value.substr(0, value.length-1);
  38. return attr.nodeName + '="' + value + '"'
  39. }).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
  40. '</' + tag + '>';
  41. }
  42. new Test.Unit.Runner({
  43. setup: function() {
  44. $('result').innerHTML = '';
  45. },
  46. testBuilderBasics: function() { with(this) {
  47. var element = Builder.node('div');
  48. assertEqual('DIV', element.nodeName);
  49. var element = Builder.node('div',{id:'mydiv'})
  50. assertEqual('mydiv', element.id);
  51. var element = Builder.node('div',{id:'mydiv',className:'one two'})
  52. assertEqual('mydiv', element.id);
  53. assertEqual('one two', element.className);
  54. var element = Builder.node('span','text 123 <blah>');
  55. assertEqual('SPAN', element.nodeName);
  56. assertEqual('text 123 &lt;blah&gt;', element.innerHTML);
  57. var element = Builder.node('span',123);
  58. assertEqual('SPAN', element.nodeName);
  59. assertEqual('123', element.innerHTML);
  60. var element = Builder.node('span',['test']);
  61. assertEqual('SPAN', element.nodeName);
  62. assertEqual('test', element.innerHTML);
  63. var element = Builder.node('span',['test',123]);
  64. assertEqual('SPAN', element.nodeName);
  65. assertEqual('test123', element.innerHTML);
  66. var element = Builder.node('span',{},['test',123]);
  67. assertEqual('SPAN', element.nodeName);
  68. assertEqual('test123', element.innerHTML);
  69. var element = Builder.node('span',{id:'myspan'},['test',123]);
  70. assertEqual('SPAN', element.nodeName);
  71. assertEqual('myspan', element.id);
  72. assertEqual('test123', element.innerHTML);
  73. var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
  74. assertEqual('1234567890',element.innerHTML);
  75. var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
  76. assertEqual('1234567890',element.innerHTML);
  77. var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
  78. assertEqual('1234567890',element.innerHTML);
  79. var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
  80. assertEqual('1234567890',element.innerHTML);
  81. assertEqual(10, element.childNodes.length);
  82. var element = Builder.node('div', Builder.node('span'));
  83. assertEqual(1, element.childNodes.length);
  84. assertEqual('SPAN', element.childNodes[0].tagName);
  85. var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
  86. assertEqual(1, element.childNodes.length);
  87. assertEqual('mydiv', element.id);
  88. assertEqual('SPAN', element.childNodes[0].tagName);
  89. }},
  90. testBuilderClassAndFor: function() { with(this) {
  91. var elt = Builder.node('div', { className: 'demoClass' });
  92. assertEqual('demoClass', elt.className);
  93. var elt = Builder.node('label', { htmlFor: 'mydiv' });
  94. assertEqual('mydiv', elt.htmlFor);
  95. }},
  96. testBuilderExtendsElement: function() { with(this) {
  97. assertRespondsTo('hide', Builder.node('div'));
  98. }},
  99. testBuilderAllXHTMLTags: function() { with(this) {
  100. var XHTML_TAGS = [
  101. 'a','abbr','acronym','address','applet','area',
  102. 'b','bdo','big','blockquote','br','button',
  103. 'caption','cite','code','col','colgroup',
  104. 'dd','del','dfn','div','dl','dt',
  105. 'em',
  106. 'fieldset','form',
  107. 'h1','h2','h3','h4','h5','h6','hr',
  108. 'i','iframe','img','input','ins',
  109. 'kbd',
  110. 'label','legend','li',
  111. 'map',
  112. 'object','ol','optgroup','option',
  113. 'p','param','pre',
  114. 'q',
  115. 'samp','script','select','small','span','strong','style','sub','sup',
  116. 'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
  117. 'ul','var']
  118. XHTML_TAGS.each(function(tag) {
  119. try {
  120. var element = Builder.node(tag);
  121. assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
  122. assertEqual(tag.toUpperCase(), element.nodeName);
  123. var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
  124. assertEqual(tag.toUpperCase(), element.nodeName);
  125. assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
  126. } catch(e) {
  127. 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.');
  128. }
  129. });
  130. }},
  131. // special case, because requires workarounds on IE and Firefox < 1.5
  132. testBuilderOptionTag: function() { with(this) {
  133. assertEqual('', Builder.node('option').innerHTML);
  134. assertEqual('test', Builder.node('option','test').innerHTML);
  135. assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
  136. assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
  137. assertEqual('test', Builder.node('option',{},'test').innerHTML);
  138. var selectElement = Builder.node('select');
  139. var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
  140. selectElement.appendChild(optionElement);
  141. document.body.appendChild(selectElement);
  142. assertEqual('123', $('option_123').innerHTML);
  143. }},
  144. testBuilderContatenation: function() { with(this) {
  145. var element = Builder.node('div', [Builder.node('span')]);
  146. assertEqual('DIV', element.nodeName);
  147. assertEqual(1, element.childNodes.length);
  148. assertEqual('SPAN', element.firstChild.nodeName);
  149. var element = Builder.node('div', [Builder.node('span'),'text']);
  150. assertEqual(2, element.childNodes.length);
  151. assertEqual(0, element.firstChild.childNodes.length);
  152. assertEqual('DIV', element.nodeName);
  153. assertEqual('SPAN', element.firstChild.nodeName);
  154. assertEqual(3, element.firstChild.nextSibling.nodeType);
  155. var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
  156. assertEqual(2, element.childNodes.length);
  157. assertEqual(1, element.firstChild.childNodes.length);
  158. assertEqual('DIV', element.nodeName);
  159. assertEqual('SPAN', element.firstChild.nodeName);
  160. assertEqual('STRONG', element.firstChild.firstChild.nodeName);
  161. assertEqual('blah', element.firstChild.firstChild.innerHTML);
  162. assertEqual(3, element.firstChild.nextSibling.nodeType);
  163. }},
  164. testBuilderComplexExample: function() { with(this) {
  165. var element = Builder.node('div',{id:'ghosttrain'},[
  166. Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
  167. Builder.node('h1','Ghost Train'),
  168. "testtext", 2, 3, 4,
  169. Builder.node('ul',[
  170. Builder.node('li',{onclick:'alert(\'test\')'},'click me')
  171. ]),
  172. ]),
  173. ]);
  174. assertEqual('DIV', element.nodeName);
  175. $('result').appendChild(element);
  176. // browsers aren't sure about upper and lower case on elements
  177. assertEqual(
  178. '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
  179. '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
  180. serializeNode($('result').childNodes[0]));
  181. }},
  182. testBuilderShortcuts: function() { with(this) {
  183. Builder.dump();
  184. var element = DIV(SPAN());
  185. assertEqual('SPAN', element.childNodes[0].tagName);
  186. var element = DIV({id:'test'},SPAN());
  187. assertEqual('SPAN', element.childNodes[0].tagName);
  188. var element = DIV({id:'ghosttrain'},[
  189. DIV({style:'font-weight: bold; font-size: 11px'},[
  190. H1('Ghost Train'),
  191. "testtext", 2, 3, 4,
  192. UL([
  193. LI({onclick:'alert(\'test\')'},'click me')
  194. ]),
  195. ]),
  196. ]);
  197. assertEqual('DIV', element.nodeName);
  198. $('result').appendChild(element);
  199. assertEqual(
  200. '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
  201. '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
  202. serializeNode($('result').childNodes[0]));
  203. }},
  204. testBuilderBuild: function() { with(this) {
  205. ['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
  206. function(html){
  207. var node = Builder.build(html);
  208. assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
  209. });
  210. }},
  211. testBuilderAttributeEscaping: function() { with(this) {
  212. var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
  213. assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
  214. }}
  215. });
  216. // ]]>
  217. </script>
  218. </body>
  219. </html>