Skip to content

Instantly share code, notes, and snippets.

@netpoetica
Created September 24, 2012 02:22
Show Gist options
  • Save netpoetica/3773871 to your computer and use it in GitHub Desktop.
Save netpoetica/3773871 to your computer and use it in GitHub Desktop.
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
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);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment