1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/builder_test.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,258 @@
1.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1.5 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.6 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
1.7 +<head>
1.8 + <title>script.aculo.us Unit test file</title>
1.9 + <meta http-equiv="content-type" content="text/html; charset=utf-8" />
1.10 + <script src="../../lib/prototype.js" type="text/javascript"></script>
1.11 + <script src="../../src/scriptaculous.js" type="text/javascript"></script>
1.12 + <script src="../../src/unittest.js" type="text/javascript"></script>
1.13 + <link rel="stylesheet" href="../test.css" type="text/css" />
1.14 +</head>
1.15 +<body>
1.16 +<h1>script.aculo.us Unit test file</h1>
1.17 +<p>
1.18 + Tests for builder.js
1.19 +</p>
1.20 +
1.21 +<!-- Log output -->
1.22 +<div id="testlog"> </div>
1.23 +
1.24 +<div id="result"></div>
1.25 +
1.26 +<!-- Tests follow -->
1.27 +<script type="text/javascript" language="javascript" charset="utf-8">
1.28 +// <![CDATA[
1.29 +
1.30 + // Serializes a node and its contents to plain old HTML
1.31 + // IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
1.32 + // so the contents of style attributes must match what IE thinks is correct
1.33 + function serializeNode(node){
1.34 + if(node.nodeType == 3) return node.nodeValue;
1.35 + node = $(node);
1.36 + var tag = node.tagName.toLowerCase();
1.37 + return '<' + ([tag].concat($A(node.attributes).map(function(attr){
1.38 + // Filter out stuff that we don't need
1.39 + if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
1.40 + typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
1.41 + // remove trailing ; in style attributes on Firefox
1.42 + var value = node.readAttribute(attr.nodeName);
1.43 + if(attr.nodeName == 'style' && value.endsWith(';'))
1.44 + value = value.substr(0, value.length-1);
1.45 + return attr.nodeName + '="' + value + '"'
1.46 + }).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
1.47 + '</' + tag + '>';
1.48 + }
1.49 +
1.50 + new Test.Unit.Runner({
1.51 +
1.52 + setup: function() {
1.53 + $('result').innerHTML = '';
1.54 + },
1.55 +
1.56 + testBuilderBasics: function() { with(this) {
1.57 + var element = Builder.node('div');
1.58 + assertEqual('DIV', element.nodeName);
1.59 +
1.60 + var element = Builder.node('div',{id:'mydiv'})
1.61 + assertEqual('mydiv', element.id);
1.62 +
1.63 + var element = Builder.node('div',{id:'mydiv',className:'one two'})
1.64 + assertEqual('mydiv', element.id);
1.65 + assertEqual('one two', element.className);
1.66 +
1.67 + var element = Builder.node('span','text 123 <blah>');
1.68 + assertEqual('SPAN', element.nodeName);
1.69 + assertEqual('text 123 <blah>', element.innerHTML);
1.70 +
1.71 + var element = Builder.node('span',123);
1.72 + assertEqual('SPAN', element.nodeName);
1.73 + assertEqual('123', element.innerHTML);
1.74 +
1.75 + var element = Builder.node('span',['test']);
1.76 + assertEqual('SPAN', element.nodeName);
1.77 + assertEqual('test', element.innerHTML);
1.78 +
1.79 + var element = Builder.node('span',['test',123]);
1.80 + assertEqual('SPAN', element.nodeName);
1.81 + assertEqual('test123', element.innerHTML);
1.82 +
1.83 + var element = Builder.node('span',{},['test',123]);
1.84 + assertEqual('SPAN', element.nodeName);
1.85 + assertEqual('test123', element.innerHTML);
1.86 +
1.87 + var element = Builder.node('span',{id:'myspan'},['test',123]);
1.88 + assertEqual('SPAN', element.nodeName);
1.89 + assertEqual('myspan', element.id);
1.90 + assertEqual('test123', element.innerHTML);
1.91 +
1.92 + var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
1.93 + assertEqual('1234567890',element.innerHTML);
1.94 +
1.95 + var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
1.96 + assertEqual('1234567890',element.innerHTML);
1.97 +
1.98 + var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
1.99 + assertEqual('1234567890',element.innerHTML);
1.100 +
1.101 + var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
1.102 + assertEqual('1234567890',element.innerHTML);
1.103 + assertEqual(10, element.childNodes.length);
1.104 +
1.105 + var element = Builder.node('div', Builder.node('span'));
1.106 + assertEqual(1, element.childNodes.length);
1.107 + assertEqual('SPAN', element.childNodes[0].tagName);
1.108 +
1.109 + var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
1.110 + assertEqual(1, element.childNodes.length);
1.111 + assertEqual('mydiv', element.id);
1.112 + assertEqual('SPAN', element.childNodes[0].tagName);
1.113 + }},
1.114 +
1.115 + testBuilderClassAndFor: function() { with(this) {
1.116 + var elt = Builder.node('div', { className: 'demoClass' });
1.117 + assertEqual('demoClass', elt.className);
1.118 + var elt = Builder.node('label', { htmlFor: 'mydiv' });
1.119 + assertEqual('mydiv', elt.htmlFor);
1.120 + }},
1.121 +
1.122 + testBuilderAllXHTMLTags: function() { with(this) {
1.123 + var XHTML_TAGS = [
1.124 + 'a','abbr','acronym','address','applet','area',
1.125 + 'b','bdo','big','blockquote','br','button',
1.126 + 'caption','cite','code','col','colgroup',
1.127 + 'dd','del','dfn','div','dl','dt',
1.128 + 'em',
1.129 + 'fieldset','form',
1.130 + 'h1','h2','h3','h4','h5','h6','hr',
1.131 + 'i','iframe','img','input','ins',
1.132 + 'kbd',
1.133 + 'label','legend','li',
1.134 + 'map',
1.135 + 'object','ol','optgroup','option',
1.136 + 'p','param','pre',
1.137 + 'q',
1.138 + 'samp','script','select','small','span','strong','style','sub','sup',
1.139 + 'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
1.140 + 'ul','var']
1.141 +
1.142 + XHTML_TAGS.each(function(tag) {
1.143 + try {
1.144 + var element = Builder.node(tag);
1.145 + assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
1.146 + assertEqual(tag.toUpperCase(), element.nodeName);
1.147 +
1.148 + var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
1.149 + assertEqual(tag.toUpperCase(), element.nodeName);
1.150 + assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
1.151 + } catch(e) {
1.152 + 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.');
1.153 + }
1.154 + });
1.155 + }},
1.156 +
1.157 + // special case, because requires workarounds on IE and Firefox < 1.5
1.158 + testBuilderOptionTag: function() { with(this) {
1.159 + assertEqual('', Builder.node('option').innerHTML);
1.160 + assertEqual('test', Builder.node('option','test').innerHTML);
1.161 + assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
1.162 + assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
1.163 + assertEqual('test', Builder.node('option',{},'test').innerHTML);
1.164 +
1.165 + var selectElement = Builder.node('select');
1.166 + var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
1.167 + selectElement.appendChild(optionElement);
1.168 + document.body.appendChild(selectElement);
1.169 + assertEqual('123', $('option_123').innerHTML);
1.170 + }},
1.171 +
1.172 + testBuilderContatenation: function() { with(this) {
1.173 + var element = Builder.node('div', [Builder.node('span')]);
1.174 + assertEqual('DIV', element.nodeName);
1.175 + assertEqual(1, element.childNodes.length);
1.176 + assertEqual('SPAN', element.firstChild.nodeName);
1.177 +
1.178 + var element = Builder.node('div', [Builder.node('span'),'text']);
1.179 + assertEqual(2, element.childNodes.length);
1.180 + assertEqual(0, element.firstChild.childNodes.length);
1.181 + assertEqual('DIV', element.nodeName);
1.182 + assertEqual('SPAN', element.firstChild.nodeName);
1.183 + assertEqual(3, element.firstChild.nextSibling.nodeType);
1.184 +
1.185 + var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
1.186 + assertEqual(2, element.childNodes.length);
1.187 + assertEqual(1, element.firstChild.childNodes.length);
1.188 + assertEqual('DIV', element.nodeName);
1.189 + assertEqual('SPAN', element.firstChild.nodeName);
1.190 + assertEqual('STRONG', element.firstChild.firstChild.nodeName);
1.191 + assertEqual('blah', element.firstChild.firstChild.innerHTML);
1.192 + assertEqual(3, element.firstChild.nextSibling.nodeType);
1.193 + }},
1.194 +
1.195 + testBuilderComplexExample: function() { with(this) {
1.196 + var element = Builder.node('div',{id:'ghosttrain'},[
1.197 + Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
1.198 + Builder.node('h1','Ghost Train'),
1.199 + "testtext", 2, 3, 4,
1.200 + Builder.node('ul',[
1.201 + Builder.node('li',{onclick:'alert(\'test\')'},'click me')
1.202 + ]),
1.203 + ]),
1.204 + ]);
1.205 + assertEqual('DIV', element.nodeName);
1.206 +
1.207 + $('result').appendChild(element);
1.208 +
1.209 + // browsers aren't sure about upper and lower case on elements
1.210 + assertEqual(
1.211 + '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
1.212 + '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
1.213 + serializeNode($('result').childNodes[0]));
1.214 + }},
1.215 +
1.216 + testBuilderShortcuts: function() { with(this) {
1.217 + Builder.dump();
1.218 +
1.219 + var element = DIV(SPAN());
1.220 + assertEqual('SPAN', element.childNodes[0].tagName);
1.221 +
1.222 + var element = DIV({id:'test'},SPAN());
1.223 + assertEqual('SPAN', element.childNodes[0].tagName);
1.224 +
1.225 + var element = DIV({id:'ghosttrain'},[
1.226 + DIV({style:'font-weight: bold; font-size: 11px'},[
1.227 + H1('Ghost Train'),
1.228 + "testtext", 2, 3, 4,
1.229 + UL([
1.230 + LI({onclick:'alert(\'test\')'},'click me')
1.231 + ]),
1.232 + ]),
1.233 + ]);
1.234 + assertEqual('DIV', element.nodeName);
1.235 +
1.236 + $('result').appendChild(element);
1.237 +
1.238 + assertEqual(
1.239 + '<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
1.240 + '<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
1.241 + serializeNode($('result').childNodes[0]));
1.242 + }},
1.243 +
1.244 + testBuilderBuild: function() { with(this) {
1.245 + ['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
1.246 + function(html){
1.247 + var node = Builder.build(html);
1.248 + assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
1.249 + });
1.250 + }},
1.251 +
1.252 + testBuilderAttributeEscaping: function() { with(this) {
1.253 + var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
1.254 + assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
1.255 + }}
1.256 +
1.257 + });
1.258 +// ]]>
1.259 +</script>
1.260 +</body>
1.261 +</html>
