NodeList.html 19.6 KB

Raw Blame History Permalink

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<!--
	we use a strict-mode DTD to ensure that the box model is the same for these
	basic tests
-->
<html>
	<head>
		<style type="text/css">
			@import "../../resources/dojo.css";
			html, body {
				padding: 0px;
				margin: 0px;
				border: 0px;
			}

			#sq100 {
				background-color: black;
				color: white;
				position: absolute;
				left: 100px;
				top: 100px;
				width: 100px;
				height: 100px;
				border: 0px;
				padding: 0px;
				margin: 0px;
				overflow: hidden;
			}

		</style>
		<title>testing dojo.NodeList</title>
		<script type="text/javascript" src="../../dojo.js"></script>
		<script type="text/javascript">
		require(["dojo", "doh", "dojo/query", "dojo/on", "dojo/string", "dojo/parser", "dojo/domReady!"], function(dojo, doh, query, listen){
			function registerForNodeList(name, query, NodeList){
				var tn;
				var c = dojo.byId("c1");
				var t = dojo.byId("t");
				var s = dojo.byId("sq100");
				var fourElementNL = new NodeList(c, t, c, t);

				function verify(/*dojo.NodeList*/nl, /*Array*/ids){
					for(var i = 0, node; node = nl[i]; i++){
						doh.is(ids[i], node.id);
					}
					//Make sure lengths are equal.
					doh.is(ids.length, i);
				}

				doh.register(name,
					[
						// constructor tests
						function ctor(){
							var nl = new NodeList();
							nl.push(c);
							doh.is(1, nl.length);
						},
						function ctorArgs(){
							var nl = new NodeList(4);
							nl.push(c);
							doh.is(5, nl.length);
						},
						function ctorArgs2(){
							var nl = new NodeList(c, t);
							doh.is(2, nl.length);
							doh.is(c, nl[0]);
							doh.is(t, nl[1]);
						},
						// iteration and array tests
						function forEach(){
							var lastItem;
							var nl = new NodeList(c, t);
							nl.forEach(function(i){ lastItem = i; });
							doh.is(t, lastItem);

							var r = nl.forEach(function(i, idx, arr){
								doh.t(arr.constructor == dojo.NodeList);
								doh.is(2, arr.length);
							});
							doh.t(r.constructor == dojo.NodeList);
							doh.is(r, nl);
						},

						function indexOf(){
							doh.is(0, fourElementNL.indexOf(c));
							doh.is(1, fourElementNL.indexOf(t));
							doh.is(-1, fourElementNL.indexOf(null));
						},

						function lastIndexOf(){
							doh.is(2, fourElementNL.lastIndexOf(c));
							doh.is(3, fourElementNL.lastIndexOf(t));
							doh.is(-1, fourElementNL.lastIndexOf(null));
						},

						function every(){
							var ctr = 0;
							var ret = fourElementNL.every(function(){
								ctr++;
								return true;
							});
							doh.is(4, ctr);
							doh.t(ret);

							ctr = 0;
							var ret = fourElementNL.every(function(){
								ctr++;
								return false;
							});
							doh.is(1, ctr);
							doh.f(ret);
						},

						function some(){
							var ret = fourElementNL.some(function(){
								return true;
							});
							doh.t(ret);

							var ret = fourElementNL.some(function(i){
								return (i.id == "t");
							});
							doh.t(ret);
						},

						function map(){
							var ret = fourElementNL.map(function(){
								return true;
							});

							doh.is(ret, [true, true, true, true]);

							verify(ret.end(), ["c1", "t", "c1", "t"]);

							var cnt = 0;
							var ret = fourElementNL.map(function(){
								return cnt++;
							});
							// doh.is(ret, [0, 1, 2, 3]);

							doh.t(ret.constructor == dojo.NodeList);

							// make sure that map() returns a NodeList
							var sum = 0;
							fourElementNL.map(function(){ return 2; }).forEach( function(x){ sum += x; } );
							doh.is(sum, 8);
						},

						function slice(){
							var pnl = new NodeList(t, t, c);
							doh.is(2, pnl.slice(1).length);
							doh.is(3, pnl.length);
							doh.is(c, pnl.slice(-1)[0]);
							doh.is(2, pnl.slice(-2).length);
							verify(pnl.slice(1).end(), ["t", "t", "c1"]);
						},

						function splice(){
							var pnl = new NodeList(t, t, c);
							console.debug(pnl.splice(1));

							/*
							doh.is(2, pnl.splice(1).length);
							doh.is(1, pnl.length);
							pnl = new NodeList(t, t, c);
							doh.is(c, pnl.splice(-1)[0]);
							doh.is(2, pnl.length);
							pnl = new NodeList(t, t, c);
							doh.is(2, pnl.splice(-2).length);
							*/
						},

						function spliceInsert(){
							// insert 1
							var pnl = new NodeList(t, t, c);
							pnl.splice(0, 0, c);
							doh.is(4, pnl.length);
							doh.is(c, pnl[0]);

							// insert multiple
							pnl = new NodeList(t, t, c);
							pnl.splice(0, 0, c, s);
							doh.is(5, pnl.length);
							doh.is(c, pnl[0]);
							doh.is(s, pnl[1]);
							doh.is(t, pnl[2]);

							// insert multiple at offset
							pnl = new NodeList(t, t, c);
							pnl.splice(1, 0, c, s);
							doh.is(5, pnl.length);
							doh.is(t, pnl[0]);
							doh.is(c, pnl[1]);
							doh.is(s, pnl[2]);
							doh.is(t, pnl[3]);
						},

						function spliceDel(){
							// clobbery 1
							var pnl = new NodeList(c, t, s);
							pnl.splice(0, 1);
							doh.is(2, pnl.length);
							doh.is(t, pnl[0]);

							// clobber multiple
							pnl = new NodeList(c, t, s);
							pnl.splice(0, 2);
							doh.is(1, pnl.length);
							doh.is(s, pnl[0]);

							// ...at an offset
							pnl = new NodeList(c, t, s);
							pnl.splice(1, 1);
							doh.is(2, pnl.length);
							doh.is(c, pnl[0]);
							doh.is(s, pnl[1]);

						},

						function spliceInsertDel(){
							// clobbery 1
							var pnl = new NodeList(c, t, s);
							pnl.splice(1, 1, s);
							doh.is(3, pnl.length);
							doh.is(new NodeList(c, s, s), pnl);

							pnl = new NodeList(c, t, s);
							pnl.splice(1, 2, s);
							doh.is(2, pnl.length);
							doh.is(new NodeList(c, s), pnl);
						},

						// sub-search
						function queryTest(){
							var pnl = new NodeList(t);
							doh.is(c, pnl.query("span")[0]);
							if(name != "t"){
							// this gets messed up by new DOM nodes the second time around
								doh.is(t, query("body").query(":last-child")[0]);
								doh.is(c, query("body").query(":last-child")[1]);
								doh.is(1, pnl.query().length);
								verify(pnl.query("span").end(), ["t"]);
							}
						},

						function filter(){
							if(name != "t"){
							// this gets messed up by new DOM nodes the second time around
								doh.is(query("body :first-child").filter(":last-child")[0], c);
								doh.is(1, query("*").filter(function(n){ return (n.nodeName.toLowerCase() == "span"); }).length);

								var filterObj = {
									filterFunc: function(n){
										return (n.nodeName.toLowerCase() == "span");
									}
								};
								doh.is(1, query("*").filter(filterObj.filterFunc).length);
								doh.is(1, query("*").filter(filterObj.filterFunc, filterObj).length);
								verify((new NodeList(t)).filter("span").end(), ["t"]);
							}
						},

						// layout DOM functions
						function coords(){
							var tnl = new NodeList(dojo.byId('sq100'));
							doh.t(dojo.isArray(tnl));
							doh.is(100, tnl.coords()[0].w);
							doh.is(100, tnl.coords()[0].h);
							doh.is(100, tnl.position()[0].w);
							doh.is(100, tnl.position()[0].h);
							doh.is(document.body.getElementsByTagName("*").length, query("body *").coords().length);
							doh.is(document.body.getElementsByTagName("*").length, query("body *").position().length);
						},

						function styleGet(){
							// test getting
							var tnl = new NodeList(s);
							doh.is(1, tnl.style("opacity")[0]);
							tnl.push(t);
							dojo.style(t, "opacity", 0.5);
							doh.is(0.5, tnl.style("opacity").slice(-1)[0]);
							tnl.style("opacity", 1);
						},

						function styleSet(){
							// test setting
							var tnl = new NodeList(s, t);
							tnl.style("opacity", 0.5);
							doh.is(0.5, dojo.style(tnl[0], "opacity"));
							doh.is(0.5, dojo.style(tnl[1], "opacity"));
							// reset
							tnl.style("opacity", 1);
						},

						function style(){
							var tnl = new NodeList(s, t);
							tnl.style("opacity", 1);
							doh.is(1, tnl.style("opacity")[0]);
							dojo.style(t, "opacity", 0.5);
							doh.is(1.0, tnl.style("opacity")[0]);
							doh.is(0.5, tnl.style("opacity")[1]);
							// reset things
							tnl.style("opacity", 1);
						},

						function addRemoveClass(){
							var tnl = new NodeList(s, t);
							tnl.addClass("a");
							doh.is("a", s.className);
							doh.is("a", t.className);
							tnl.addClass("a b");
							doh.is("a b", s.className);
							doh.is("a b", t.className);
							tnl.addClass(["a", "c"]);
							doh.is("a b c", s.className);
							doh.is("a b c", t.className);
							tnl.removeClass();
							doh.is("", s.className);
							doh.is("", t.className);
							tnl.addClass("    a");
							doh.is("a", s.className);
							doh.is("a", t.className);
							tnl.addClass(" a  b ");
							doh.is("a b", s.className);
							doh.is("a b", t.className);
							tnl.addClass(" c  b a ");
							doh.is("a b c", s.className);
							doh.is("a b c", t.className);
							tnl.removeClass(" b");
							doh.is("a c", s.className);
							doh.is("a c", t.className);
							tnl.removeClass("a b ");
							doh.is("c", s.className);
							doh.is("c", t.className);
							tnl.removeClass(["a", "c"]);
							doh.is("", s.className);
							doh.is("", t.className);
							tnl.addClass("a b c");
							tnl.replaceClass("d e", "a b");
							doh.is("c d e", s.className, "class is c d e after replacing a b with d e");
							doh.is("c d e", t.className, "class is c d e after replacing a b with d e");
							tnl.replaceClass("f", "d");
							doh.is("c e f", s.className, "class is c e f after replacing d with f");
							doh.is("c e f", t.className, "class is c e f after replacing d with f");
							tnl.replaceClass("d");
							doh.is("d", s.className);
							doh.is("d", t.className);
							tnl.removeClass();
							doh.is("", s.className, "empty class");
							doh.is("", t.className, "empty class");
						},

						function concat(){
							if(name != "t"){
								// this isn't supported in the new query method
								var spans = query("span");
								var divs = query("div");
								var cat = spans.concat(divs);
								console.debug(cat);
								doh.t(cat.constructor == dojo.NodeList || cat.constructor == dojo.NodeList);
								doh.is((divs.length + spans.length), cat.length);
								verify(cat.end(), ["c1"]);
							}
						},

						function concat2(){
							var spans = query("span");
							var divs = query("div");
							doh.is(spans.concat([]).constructor, dojo.NodeList);
						},

						function concat3(){
							var spans = query("span");
							var divs = query("div");
							var cat = spans.concat(divs);

							doh.t(typeof NodeList != "undefined" && cat.constructor === dojo.NodeList
								|| cat.constructor === dojo.NodeList);
						},
						function concat4(){
							var res = (new dojo.NodeList()).concat([]);
							doh.is(0, res.length);
						},
						function place(){
							var ih = "<div><span></span></div><span class='thud'><b>blah</b></span>";

							var tn = document.createElement("div");
							tn.innerHTML = ih;
							dojo.body().appendChild(tn);
							var nl = query("b", tn).place(tn, "first");
							doh.t(nl.constructor == dojo.NodeList || nl.constructor == dojo.NodeList);
							doh.is(1, nl.length);
							doh.is("b", nl[0].nodeName.toLowerCase());
							doh.is(tn, nl[0].parentNode);
							doh.is(tn.firstChild, nl[0]);
						},

						function orphan(){
							var ih = "<div><span></span></div><span class='thud'><b>blah</b></span>";

							var tn = document.createElement("div");
							tn.innerHTML = ih;
							dojo.body().appendChild(tn);
							var nl = query("span", tn).orphan();
							doh.t(nl.constructor == dojo.NodeList || nl.constructor == dojo.NodeList);

							doh.is(2, nl.length);
							doh.is(1, tn.getElementsByTagName("*").length);

							tn.innerHTML = ih;
							var nl = query("*", tn).orphan("b");
							doh.is(1, nl.length);
							doh.is("blah", nl[0].innerHTML);
						},

						function adopt(){
							var div = query(dojo.create("div"));
							div.adopt(dojo.create("span"));
							div.adopt(dojo.create("em"), "first");
							doh.is(2, query("*", div[0]).length);
							doh.is("em", div[0].firstChild.tagName.toLowerCase());
							doh.is("span", div[0].lastChild.tagName.toLowerCase());
						},

						function addContent(){
							//text content
							var tn = document.createElement("div");
							var nl = query(tn).addContent("some text content");

							doh.is(1, nl[0].childNodes.length);
							doh.is("some text content", nl[0].firstChild.nodeValue);

							//move a node
							var mNode = document.createElement("span");
							mNode.id = "addContent1";
							mNode.innerHTML = "hello";
							dojo.body().appendChild(mNode);
							doh.t(dojo.byId("addContent1"));

							nl.addContent(mNode);
							doh.f(dojo.byId("addContent1"));
							doh.is("addContent1", nl[0].lastChild.id);

							//put in multiple content/clone node
							tn.innerHTML = '<select><option name="second"  value="second" selected>second</option></select>';
							nl = query("select", tn).addContent('<option name="first" value="first">first</option>', "first");
							nl.forEach(function(node){
								doh.is("first", node.options[0].value);
								doh.f(node.options[0].selected);
							});

							//Some divs to use for addContent template actions.
							var templs = dojo._toDom('<div class="multitemplate"></div><div class="multitemplate"></div>');
							dojo.body().appendChild(templs);
							templs = query(".multitemplate");

							//templateFunc test
							templs.addContent({
								template: '<b>[name]</b>',
								templateFunc: function(str, obj){ return str.replace(/\[name\]/g, obj.name); },
								name: "bar"
							});

							var bolds = templs.query("b");
							doh.is(2, bolds.length);
							bolds.forEach(function(node){
								doh.is("bar", node.innerHTML);
							});

							//template with dojo.string.substitute used.
							templs.addContent({
								template: "<p>${name}</p>",
								name: "baz"
							});

							var ps = templs.query("p");
							doh.is(2, ps.length);
							ps.forEach(function(node){
								doh.is("baz", node.innerHTML);
							});

							//Try a dojo.declared thing.
							dojo.declare("dojo.tests.Mini", null, {
								constructor: function(args, node){
									dojo.mixin(this, args);
									node.innerHTML = this.name;
									this.domNode = node;
								},
								name: ""
							});

							templs.addContent({
								template: '<i dojoType="dojo.tests.Mini" name="cool"></i>',
								parse: true
							});


							var declaredNodes = templs.query("[dojoType]");

							doh.is(2, declaredNodes.length);
							dojo.forEach(declaredNodes, function(node){
								doh.is("cool", node.innerHTML);
							});

							//Get rid of the junk used for template testing.
							templs.orphan();
						},

						function connect(){
							var ih = "<div><span></span></div><span class='thud'><button>blah</button></span>";

							tn = document.createElement("div");
							tn.innerHTML = ih;
							dojo.body().appendChild(tn);

							var ctr = 0;
							var nl = query("button", tn).connect("onclick", function(){
								ctr++;
							});
							nl[0].click();
							doh.is(1, ctr);
							nl[0].click();
							nl[0].click();
							doh.is(3, ctr);
						},
						function on(){
							var ctr = 0;
							dojo.body().appendChild(tn);
							var nl = query("button", tn);
							var handle = nl.on("click", function(){
								ctr++;
							});
							nl[0].click();
							doh.is(1, ctr);
							var inButton = nl[0].appendChild(document.createElement("span"));
							listen.emit(nl[0], "click", {
							});
							listen.emit(inButton, "click", {
								bubbles: true
							});
							listen.emit(inButton, "click", {
								bubbles: false
							});
							doh.is(3, ctr);
							handle.remove();
							listen.emit(nl[0], "click", {
							});
							doh.is(3, ctr);
						},
						function onDelegate(){
							var ctr = 0;
							dojo.body().appendChild(tn);
							var nl = query(".thud", tn);
							var bl = query("button", tn);
							var handle = nl.on("button:click", function(){
								doh.is(this, bl[0]);
								ctr++;
							});
							doh.is(0, ctr);
							listen.emit(nl[0], "click", {
							});
							listen.emit(bl[0], "click", {
								bubbles: true
							});
							doh.is(1, ctr);
							handle.remove();
							listen.emit(bl[0], "click", {
								bubbles: true
							});
							doh.is(1, ctr);
							// listen and on should behave the same
							query(tn).on(".thud:click, .thud button:custom", function(){
								ctr++;
							});
							listen.emit(bl[0], "click", {
								bubbles: true
							});
							doh.is(2, ctr);
							listen.emit(bl[0], "click", {
								bubbles: false
							});
							doh.is(2, ctr);
							listen.emit(bl[0], "custom", {
								bubbles: true
							});
							doh.is(3, ctr);
							listen.emit(bl[0], "mouseout", {
								bubbles: true
							});
							doh.is(3, ctr);
							bl[0].click();
							doh.is(4, ctr);
						},

						function at(){
							var divs = query("body div");
							var at0 = divs.at(0);
							doh.is(divs[0], at0[0]);
							if(name != "t"){
								// this gets messed up by new DOM nodes the second time around

								var at1 = divs.at(1,3,5);
								doh.is(divs[1], at1[0]);
								doh.is(divs[3], at1[1]);
								doh.is(divs[5], at1[2]);

								var at2 = divs.at(3,6,9);
								doh.is(at2.length, 2);

								var at3 = divs.at(3,6).at(1);
								doh.is(divs[6], at3[0]);

								var ending = divs.at(0).end();
								verify([ending[0], ending[1]], ["sq100", "t"]);

								var at4 = divs.at(-1);
								doh.is(divs[divs.length - 1], at4[0]);

								var at5 = divs.at(1, -1);
								doh.is(at5[0], divs[1]);
								doh.is(at5[1], divs[divs.length - 1]);
							}

						},

						function attr(){
							var divs = query("div");
							var ids = divs.attr("id");
						},

						function _adaptAsForEach(t){
							var passes = false;
							var count = 0;
							var i = {
								setTrue: function(node){
									count++;
									passes = true;
								}
							};
							dojo.NodeList.prototype.setTrue = dojo.NodeList._adaptAsForEach(i.setTrue, i);
							var divs = query("div").setTrue();
							doh.t(passes);
							doh.is(count, divs.length);
						},

						function instantiate(){
							//Insert some divs to use for test
							dojo.place('<p id="thinger">Hi</p><p id="thinger2">Hi</p>', dojo.body());

							var test = 0;
							dojo.declare("tests._base.NodeList.some.Thing", null, {
								foo:"baz",
								constructor: function(props, node){
									dojo.mixin(this, props);
									doh.is("bar", this.foo, test++);
								}
							});

							query("#thinger").instantiate(tests._base.NodeList.some.Thing, {
								foo:"bar"
							});

							query("#thinger2").instantiate("tests._base.NodeList.some.Thing", {
								foo:"bar"
							});

							doh.is(2, test);

							//clean up the divs inserted for the test.
							query("#thinger, #thinger2").orphan();
						},

						function removeAttr(){
							// buildup
							dojo.place('<p id="attr" title="Foobar">Hi</p>', dojo.body());

							var n = query("#attr");

							doh.t(dojo.hasAttr(n[0], "title"));

							var t = n.attr("title");
							doh.is(t, "Foobar");

							n.removeAttr("title");

							t = dojo.hasAttr(n[0], "title");
							doh.f(t);

							// cleanup
							n.orphan();
						}
					]
				);
			}
			registerForNodeList("t-backcompat", dojo.query, function(){
				return dojo.NodeList.apply(dojo.NodeList, arguments);
			});
			registerForNodeList("t", query, dojo.NodeList);

			doh.run();
		});
		</script>
	</head>
	<body>
		<h1>testing dojo.NodeList</h1>
		<div id="sq100">
			100px square, abs
		</div>
		<div id="t">
			<span id="c1">c1</span>
		</div>
	</body>
</html>