root/public/javascripts/scriptaculous/test/unit/builder_test.html @ 3

Revision 1, 10.3 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
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 it's 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>
Note: See TracBrowser for help on using the browser.