A visual and console implementation of a basic assert in JavaScript - assertions with a assertion panel in your browser window without intruding upon your other content.

assert.js

/* 

	assert.js 
	by keith rosenberg / netpoetica
	
	An assert function that will create a visual pane if browser is present. It will always
	output to console as well. The styling is configured to be position-fixed to the top
	right corner (hopefully in most situations, out of the way). I created this after viewing
        http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-quick-and-easy-javascript-testing-with-assert/
	
	How to Use
	----------
	In your own code, after this script has been loaded, you simply call 
		
		assert(true == false, 'True equals false');
		assert(4 === '4', '4 is equal to "4");
		assert(0 == false, '0 is false');
	
	The first argument is your test (must return a boolean variable), and the second argument
	is the description it will spit back at you to let you know which assertion to troubleshoot.
	
	Where is the JS file located?
	-----------------------------
	Copy and Paste the following code to dynamically load this script:
	
		// Dynamically load scripts
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'https://dl.dropbox.com/u/30820392/JS_Utils/assert.js';
		document.getElementsByTagName('head')[0].appendChild(script);
		
*/
var assert = (function(){
	if(document){	
		// We're in a browser, so set up some extras for viewing.
		var bBrowserEnv = true;
		
		// Setup the module container
		var assertViewer = document.createElement('div');
		assertViewer.style.backgroundColor = '#EEF';
		assertViewer.style.zIndex = '9999';
		assertViewer.style.position = 'fixed';
		assertViewer.style.width = 'auto';
		assertViewer.style.right = '25px';
		assertViewer.style.top = '25px';
		
		// Add a header
		var assertViewerHeader = document.createElement('h4');
		assertViewerHeader.appendChild(document.createTextNode('Assert Panel'));
		assertViewerHeader.style.marginLeft = '25px';
		assertViewer.appendChild(assertViewerHeader);
		
		// Setup the assertions container
		var assertContainer = document.createElement('ul');
		assertViewer.appendChild(assertContainer);
		document.body.appendChild(assertViewer);
		
		// Self Titled Function
		function addAssertItem(sDesc, bPass){
			var li = document.createElement('li');
			bPass ? li.style.color = '#0000AF' : li.style.color = '#FA0000';
			li.appendChild(document.createTextNode(sDesc));
			return li;
		}
	}
	
	return function(bExpected, sDescription){
		var output = '';
		
		if(bExpected){
			output += 'PASS: ';
		}
		else {
			output += 'FAIL: ';
		}
		
		output += String(sDescription);
		
		if(bBrowserEnv){ assertContainer.appendChild(addAssertItem(output, bExpected)) }
		
		console.log(output);
	}
})();