Williammer/javascript.groupTest.html

## javascript.groupTest.html
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta property="wb:webmaster" content="edcf77ed05a8765f" />
	<meta name="viewport" content="width=device-width">

	<style>
	#result li.passed { color: blue; }
	#result li.failed { color: red; }
	</style>
</head>

<body>
	<ul id="result"></ul>
</body>
</html>
	<script>
	/* Appreciation on codes
		assert(), test() is defined in an immediate-invoked function(avoid global variables, good use of this, pointing to window)
	*/
	(function(){
		var results; // this variable might be the replacement for many ul#result
		this.assert = function(value, msg){
			var li = document.createElement('li');
			li.className = value? 'passed': 'failed';
			li.appendChild(document.createTextNode(msg));
			results.appendChild(li);
			if(!value){
				li.parentNode.parentNode.className = 'failed';
			}
			return li;
		};
		// test group
		this.test = function(name, fn){
			results = document.getElementById('result');
			results = assert(true, name).appendChild(document.createElement('ul'));// results turn sub
			fn();
		};
	})();

	// onload
	window.onload = function(){
		test('test1', function(){
			assert(true, 'test case1.');
			assert(false, 'test msg2.');
			assert(true, 'test case3.');
			assert(false, 'test msg4.');
		});
	};
	</script>
	<!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">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta property="wb:webmaster" content="edcf77ed05a8765f" />
	<meta name="viewport" content="width=device-width">

	<style>
	#result li.passed { color: blue; }
	#result li.failed { color: red; }
	</style>
	</head>

	<body>
	<ul id="result"></ul>
	</body>
	</html>
	<script>
	/* Appreciation on codes
	assert(), test() is defined in an immediate-invoked function(avoid global variables, good use of this, pointing to window)
	*/
	(function(){
	var results; // this variable might be the replacement for many ul#result
	this.assert = function(value, msg){
	var li = document.createElement('li');
	li.className = value? 'passed': 'failed';
	li.appendChild(document.createTextNode(msg));
	results.appendChild(li);
	if(!value){
	li.parentNode.parentNode.className = 'failed';
	}
	return li;
	};
	// test group
	this.test = function(name, fn){
	results = document.getElementById('result');
	results = assert(true, name).appendChild(document.createElement('ul'));// results turn sub
	fn();
	};
	})();

	// onload
	window.onload = function(){
	test('test1', function(){
	assert(true, 'test case1.');
	assert(false, 'test msg2.');
	assert(true, 'test case3.');
	assert(false, 'test msg4.');
	});
	};
	</script>