123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>script.aculo.us Unit test file</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <script src="../../lib/prototype.js" type="text/javascript"></script>
- <script src="../../src/scriptaculous.js" type="text/javascript"></script>
- <script src="../../src/unittest.js" type="text/javascript"></script>
- <link rel="stylesheet" href="../test.css" type="text/css" />
- </head>
- <body>
- <h1>script.aculo.us Unit test file</h1>
- <p>
- Tests for builder.js
- </p>
- <!-- Log output -->
- <div id="testlog"> </div>
- <div id="result"></div>
- <!-- Tests follow -->
- <script type="text/javascript" language="javascript" charset="utf-8">
- // <![CDATA[
- // Serializes a node and it's contents to plain old HTML
- // IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
- // so the contents of style attributes must match what IE thinks is correct
- function serializeNode(node){
- if(node.nodeType == 3) return node.nodeValue;
- node = $(node);
- var tag = node.tagName.toLowerCase();
- return '<' + ([tag].concat($A(node.attributes).map(function(attr){
- // Filter out stuff that we don't need
- if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
- typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
- // remove trailing ; in style attributes on Firefox
- var value = node.readAttribute(attr.nodeName);
- if(attr.nodeName == 'style' && value.endsWith(';'))
- value = value.substr(0, value.length-1);
- return attr.nodeName + '="' + value + '"'
- }).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
- '</' + tag + '>';
- }
- new Test.Unit.Runner({
- setup: function() {
- $('result').innerHTML = '';
- },
- testBuilderBasics: function() { with(this) {
- var element = Builder.node('div');
- assertEqual('DIV', element.nodeName);
- var element = Builder.node('div',{id:'mydiv'})
- assertEqual('mydiv', element.id);
-
- var element = Builder.node('div',{id:'mydiv',className:'one two'})
- assertEqual('mydiv', element.id);
- assertEqual('one two', element.className);
-
- var element = Builder.node('span','text 123 <blah>');
- assertEqual('SPAN', element.nodeName);
- assertEqual('text 123 <blah>', element.innerHTML);
-
- var element = Builder.node('span',123);
- assertEqual('SPAN', element.nodeName);
- assertEqual('123', element.innerHTML);
-
- var element = Builder.node('span',['test']);
- assertEqual('SPAN', element.nodeName);
- assertEqual('test', element.innerHTML);
-
- var element = Builder.node('span',['test',123]);
- assertEqual('SPAN', element.nodeName);
- assertEqual('test123', element.innerHTML);
-
- var element = Builder.node('span',{},['test',123]);
- assertEqual('SPAN', element.nodeName);
- assertEqual('test123', element.innerHTML);
-
- var element = Builder.node('span',{id:'myspan'},['test',123]);
- assertEqual('SPAN', element.nodeName);
- assertEqual('myspan', element.id);
- assertEqual('test123', element.innerHTML);
-
- var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
- assertEqual('1234567890',element.innerHTML);
-
- var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
- assertEqual('1234567890',element.innerHTML);
-
- var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
- assertEqual('1234567890',element.innerHTML);
-
- var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
- assertEqual('1234567890',element.innerHTML);
- assertEqual(10, element.childNodes.length);
-
- var element = Builder.node('div', Builder.node('span'));
- assertEqual(1, element.childNodes.length);
- assertEqual('SPAN', element.childNodes[0].tagName);
-
- var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
- assertEqual(1, element.childNodes.length);
- assertEqual('mydiv', element.id);
- assertEqual('SPAN', element.childNodes[0].tagName);
- }},
- testBuilderClassAndFor: function() { with(this) {
- var elt = Builder.node('div', { className: 'demoClass' });
- assertEqual('demoClass', elt.className);
- var elt = Builder.node('label', { htmlFor: 'mydiv' });
- assertEqual('mydiv', elt.htmlFor);
- }},
-
- testBuilderExtendsElement: function() { with(this) {
- assertRespondsTo('hide', Builder.node('div'));
- }},
-
- testBuilderAllXHTMLTags: function() { with(this) {
- var XHTML_TAGS = [
- 'a','abbr','acronym','address','applet','area',
- 'b','bdo','big','blockquote','br','button',
- 'caption','cite','code','col','colgroup',
- 'dd','del','dfn','div','dl','dt',
- 'em',
- 'fieldset','form',
- 'h1','h2','h3','h4','h5','h6','hr',
- 'i','iframe','img','input','ins',
- 'kbd',
- 'label','legend','li',
- 'map',
- 'object','ol','optgroup','option',
- 'p','param','pre',
- 'q',
- 'samp','script','select','small','span','strong','style','sub','sup',
- 'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
- 'ul','var']
-
- XHTML_TAGS.each(function(tag) {
- try {
- var element = Builder.node(tag);
- assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
- assertEqual(tag.toUpperCase(), element.nodeName);
-
- var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
- assertEqual(tag.toUpperCase(), element.nodeName);
- assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
- } catch(e) {
- 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.');
- }
- });
- }},
-
- // special case, because requires workarounds on IE and Firefox < 1.5
- testBuilderOptionTag: function() { with(this) {
- assertEqual('', Builder.node('option').innerHTML);
- assertEqual('test', Builder.node('option','test').innerHTML);
- assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
- assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
- assertEqual('test', Builder.node('option',{},'test').innerHTML);
-
- var selectElement = Builder.node('select');
- var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
- selectElement.appendChild(optionElement);
- document.body.appendChild(selectElement);
- assertEqual('123', $('option_123').innerHTML);
- }},
-
- testBuilderContatenation: function() { with(this) {
- var element = Builder.node('div', [Builder.node('span')]);
- assertEqual('DIV', element.nodeName);
- assertEqual(1, element.childNodes.length);
- assertEqual('SPAN', element.firstChild.nodeName);
-
- var element = Builder.node('div', [Builder.node('span'),'text']);
- assertEqual(2, element.childNodes.length);
- assertEqual(0, element.firstChild.childNodes.length);
- assertEqual('DIV', element.nodeName);
- assertEqual('SPAN', element.firstChild.nodeName);
- assertEqual(3, element.firstChild.nextSibling.nodeType);
-
- var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
- assertEqual(2, element.childNodes.length);
- assertEqual(1, element.firstChild.childNodes.length);
- assertEqual('DIV', element.nodeName);
- assertEqual('SPAN', element.firstChild.nodeName);
- assertEqual('STRONG', element.firstChild.firstChild.nodeName);
- assertEqual('blah', element.firstChild.firstChild.innerHTML);
- assertEqual(3, element.firstChild.nextSibling.nodeType);
- }},
-
- testBuilderComplexExample: function() { with(this) {
- var element = Builder.node('div',{id:'ghosttrain'},[
- Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
- Builder.node('h1','Ghost Train'),
- "testtext", 2, 3, 4,
- Builder.node('ul',[
- Builder.node('li',{onclick:'alert(\'test\')'},'click me')
- ]),
- ]),
- ]);
- assertEqual('DIV', element.nodeName);
-
- $('result').appendChild(element);
-
- // browsers aren't sure about upper and lower case on elements
- assertEqual(
- '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
- '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
- serializeNode($('result').childNodes[0]));
- }},
-
- testBuilderShortcuts: function() { with(this) {
- Builder.dump();
-
- var element = DIV(SPAN());
- assertEqual('SPAN', element.childNodes[0].tagName);
-
- var element = DIV({id:'test'},SPAN());
- assertEqual('SPAN', element.childNodes[0].tagName);
-
- var element = DIV({id:'ghosttrain'},[
- DIV({style:'font-weight: bold; font-size: 11px'},[
- H1('Ghost Train'),
- "testtext", 2, 3, 4,
- UL([
- LI({onclick:'alert(\'test\')'},'click me')
- ]),
- ]),
- ]);
- assertEqual('DIV', element.nodeName);
-
- $('result').appendChild(element);
-
- assertEqual(
- '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
- '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
- serializeNode($('result').childNodes[0]));
- }},
-
- testBuilderBuild: function() { with(this) {
- ['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
- function(html){
- var node = Builder.build(html);
- assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
- });
- }},
-
- testBuilderAttributeEscaping: function() { with(this) {
- var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
- assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
- }}
- });
- // ]]>
- </script>
- </body>
- </html>
|