NodeList-manipulate.html 11.4 KB

Raw Blame History Permalink

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html id="html">
	<head>
		<title>Testing dojo.NodeList-manipulate extensions to dojo.NodeList</title>
		<style type="text/css">
			@import "../resources/dojo.css";
		</style>
		<script type="text/javascript" src="../dojo.js"></script>
		<script type="text/javascript">
			require([
				"doh", "dojo/_base/array", "dojo/dom", "dojo/dom-construct",
				"dojo/query", "dojo/NodeList-manipulate", "dojo/domReady!"
			], function(doh, array, dom, domConstruct, query){

				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);
				}

				var divs = query("div.testDiv");

				doh.register("NodeList-manipulate", [
					function innerHTML(t){
						divs.innerHTML("<ul><li>Test</li></ul>");
						array.forEach(divs, function(node){
							doh.is(1, node.childNodes.length);
							doh.is("ul", node.childNodes[0].nodeName.toLowerCase());
						});

						doh.is("<ul><li>test</li></ul>", divs.innerHTML().toLowerCase().replace(/[\r\n]/g, ""));
						divs.innerHTML("");
						doh.is("", divs.innerHTML().toLowerCase().replace(/[\r\n]/g, ""));
					},

					function html(t){
						divs.html("<ul><li>Test</li></ul>");
						array.forEach(divs, function(node){
							doh.is(1, node.childNodes.length);
							doh.is("ul", node.childNodes[0].nodeName.toLowerCase());
						});

						doh.is("<ul><li>test</li></ul>", divs.html().toLowerCase().replace(/[\r\n]/g, ""));
					},

					function text(t){
						doh.is("TestTestTest", divs.text());

						divs.text("Hello World");

						array.forEach(divs, function(node){
							doh.is(1, node.childNodes.length);
							doh.is("Hello World", node.childNodes[0].nodeValue);
						});

						doh.is("Hello WorldHello WorldHello World", divs.text());
					},

					function val(t){
						//Input text test.
						query('[type="text"]').val("Hello");
						doh.is("Hello", dom.byId("inputText").value);

						//Textarea test.
						query('textarea', "inputForm").val("World");
						doh.is("World", dom.byId("inputTextArea").value);

						//Radio button test
						query('[type="radio"]').val("radio2");
						doh.f(dom.byId("inputRadio1").checked);
						doh.t(dom.byId("inputRadio2").checked);

						//Checkbox test
						query('[type="checkbox"]').val("checkbox2");
						doh.f(dom.byId("inputCheckBox1").checked);
						doh.t(dom.byId("inputCheckBox2").checked);

						var selects = query('select', 'inputForm');

						//Single select test.
						selects.at(0).val("two");
						doh.is(1, dom.byId("inputSelect1").selectedIndex);
						query("option", "inputSelect1").forEach(function(node){
							if(node.value == "two"){
								doh.t(node.selected);
							}else{
								doh.f(node.selected);
							}
						});

						//Multiple select test.
						selects.at(1).val(["four", "six"]);
						query("option", "inputSelect2").forEach(function(node){
							if(node.value == "four" || node.value == "six"){
								doh.t(node.selected);
							}else{
								doh.f(node.selected);
							}
						});

					},

					function append(t){
						//Test string content
						divs.append('<span class="foo">foo</span><span class="bar">bar</span>')
							.forEach(function(node){
								doh.is(3, node.childNodes.length);
								doh.is("foo", node.childNodes[1].className);
								doh.is("bar", node.childNodes[2].className);

							}
						);

						//Test DOMNode content
						divs.append(query("h1")[0]).forEach(function(node){
							doh.is(4, node.childNodes.length);
							doh.is("h1", node.childNodes[3].nodeName.toLowerCase());
						});

						var h1s = query("h1");
						doh.is(3, h1s.length);

						//Move all the h1s to one div to test NodeList content.
						query("#t, #yeah").append(document.getElementsByTagName("h1")).forEach(function(node){
							doh.is(6, node.childNodes.length);
							doh.is("h1", node.childNodes[3].nodeName.toLowerCase());
							doh.is("h1", node.childNodes[4].nodeName.toLowerCase());
							doh.is("h1", node.childNodes[5].nodeName.toLowerCase());
						});

						//clean up
						query("h1").remove();
					},

					function appendTo(t){
						//Create some new things.
						query("body").append('<p class="singer">bo</p><p class="singer">diddly</p>');

						var ret = query(".foo").appendTo(".singer");
						doh.is(6, ret.length);

						query(".singer").forEach(function(node){
							doh.is(4, node.childNodes.length);
							doh.is("foo", node.childNodes[1].className);
							doh.is("foo", node.childNodes[2].className);
							doh.is("foo", node.childNodes[3].className);
						});

						query("body").append('<p class="bands"></p><p class="drummer">john</p><p class="drummer">bonham</p>');
						var bands = query(".bands");
						query(".drummer").appendTo(bands);
						bands.forEach(function(node){
							doh.is(2, node.childNodes.length);
							doh.is("drummer", node.childNodes[0].className);
							doh.is("drummer", node.childNodes[1].className);
						});

						query("body").append('<p class="guitarist">jimmy</p><p class="guitarist">page</p>');
						query(".guitarist").appendTo(bands[0]);
						bands.forEach(function(node){
							doh.is(4, node.childNodes.length);
							doh.is("guitarist", node.childNodes[2].className);
							doh.is("guitarist", node.childNodes[3].className);
						});

						//Get rid of bands
						bands.remove();
					},

					function prepend(t){
						query(".singer").prepend('<span class="fry">layla</span>')
							.forEach(function(node){
								doh.is(5, node.childNodes.length);
								doh.is("fry", node.childNodes[0].className);
							}
						);
					},

					function prependTo(t){
						//Create some new things.
						query("body").append('<p class="actor">steve</p><p class="actor">martin</p>');

						var ret = query(".bar").prependTo(".actor");
						doh.is(6, ret.length);

						query(".actor").forEach(function(node){
							doh.is(4, node.childNodes.length);
							doh.is("bar", node.childNodes[0].className);
							doh.is("bar", node.childNodes[1].className);
							doh.is("bar", node.childNodes[2].className);
						});

						//Clean up
						query("p").remove();
					},

					function after(t){
						divs.after('<span class="after">after</span>')
							.forEach(function(node){
								doh.is("after", node.nextSibling.className);
							}
						);

						query("form").after(query(".after")).forEach(function(node){
							for(var i = 0; i < 3; i++){
								doh.is("after", node.nextSibling.className);
								node = node.nextSibling;
							}
						});
					},

					function insertAfter(t){
						query("body").prepend('<h1>testing dojo.NodeList-manipulate</h1>');
						var ret = query(".after").insertAfter("h1");
						doh.is(3, ret.length);

						query("h1").forEach(function(node){
							for(var i = 0; i < 3; i++){
								doh.is("after", node.nextSibling.className);
								node = node.nextSibling;
							}
						});
					},

					function before(t){
						divs.before('<span class="before">before</span>')
							.forEach(function(node){
								doh.is("before", node.previousSibling.className);
							}
						);

						query("form").before(query(".before")).forEach(function(node){
							for(var i = 0; i < 3; i++){
								doh.is("before", node.previousSibling.className);
								node = node.previousSibling;
							}
						});
					},

					function insertBefore(t){
						var ret = query(".before").insertBefore("h1");
						doh.is(3, ret.length);

						query("h1").forEach(function(node){
							for(var i = 0; i < 3; i++){
								doh.is("before", node.previousSibling.className);
								node = node.previousSibling;
							}
						});
					},

					function remove(t){
						//Already did some removes, make sure they are not still here.
						//This is also just an alias for orphan which has its own tests.
						doh.is(0, query("p").length);
					},

					function wrap(t){
						query(".before").wrap("<b><i></i></b>").forEach(function(node){
							doh.is("i", node.parentNode.nodeName.toLowerCase());
							doh.is("b", node.parentNode.parentNode.nodeName.toLowerCase());
						});

						query("b").wrap(query("h1")[0]).forEach(function(node){
							doh.is("h1", node.parentNode.nodeName.toLowerCase());
							doh.is(4, query("h1").length);
						});
					},

					function wrapAll(t){
						query("h1").wrapAll('<h4></h4>');
						var h4s = query("h4");
						doh.is(1, h4s.length);

						var h4 = h4s[0];
						doh.is(4, h4.childNodes.length);
						query("h1").forEach(function(node){
							doh.is("h4", node.parentNode.nodeName.toLowerCase());
						});

						//Complicated test that test for cloning of the wrap nodes in the right
						//situation.
						var div = domConstruct.create("div", {"class": "myClass"});
						query("#inputForm").query("select").wrapAll(div).end().query("input").wrapAll(div);
						var myClass = query(".myClass");

						doh.is(2, myClass.length);
						doh.is(5, query("input", myClass[0]).length);
						doh.is(2, query("select", myClass[1]).length);
					},

					function wrapInner(t){
						query("h4").wrapInner('<h3></h3>');
						var h3s = query("h3");
						doh.is(1, h3s.length);

						var h3 = h3s[0];
						doh.is(4, h3.childNodes.length);
						query("h1").forEach(function(node){
							doh.is("h3", node.parentNode.nodeName.toLowerCase());
						});
					},

					function replaceWith(t){
						query("h1").replaceWith('<span class="replace">replace</span><b>hello</b>');

						query("h3").forEach(function(node){
							doh.is(8, node.childNodes.length);
							doh.is("replace", node.childNodes[0].className);
							doh.is("b", node.childNodes[1].nodeName.toLowerCase());
						});
					},

					function replaceAll(t){
						query(".after").replaceAll("h4");

						doh.is(3, query(".after").length);
						doh.is(0, query("h4").length);

						query("body").append('<i class="italics">italics</i>');
						doh.is("i", query(".italics").replaceAll(".after")[0].nodeName.toLowerCase());
						doh.is(0, query(".after").length);
						doh.is(3, query(".italics").length);
					},

					function clone(t){
						query(".italics").clone().appendTo("body");
						doh.is(6, query(".italics").length);
					}
				]);

				doh.run();
			});
		</script>
	</head>
	<body id="body" class="classy">
		<h1>testing dojo.NodeList-manipulate</h1>
		<div id="sq100" class="testDiv">
			100px square, abs
		</div>
		<div id="t" class="testDiv">
			<span id="c1">c1</span>
		</div>
		<div id="third" class="third testDiv">
			<!-- This is the third top level div -->
			<span id="crass">Crass, baby</span>
			The third div
			<span id="classy" class="classy">Classy, baby</span>
			The third div, again
			<!-- Another comment -->
			<span id="yeah">Yeah, baby</span>
		</div>
		<form id="inputForm">
			<input type="text" id="inputText">
			<textarea id="inputTextArea"></textarea>
			<input type="radio" name="inputRadio" id="inputRadio1" value="radio1" checked>
			<input type="radio" name="inputRadio" id="inputRadio2" value="radio2">
			<input type="checkbox" id="inputCheckBox1" value="checkbox1" checked>
			<input type="checkbox" id="inputCheckBox2" value="checkbox2">
			<select id="inputSelect1">
				<option value="one">One</option>
				<option value="two">Two</option>
				<option value="three" selected>Three</option>
			</select>
			<select id="inputSelect2" multiple>
				<option value="four">Four</option>
				<option value="five" selected>Five</option>
				<option value="six">Six</option>
			</select>
		</form>
	</body>
</html>