QUnit Example

by Terrance Smith

HTML

<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css">
<script src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>QUnit Test Suite</title>  
        <!--<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">  
        <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>-->
        <!-- Your project file goes here -->  
        <!--<script type="text/javascript" src="myProject.js"></script>  -->
        <!-- Your tests file goes here -->  
        <!--<script type="text/javascript" src="myTests.js"></script>  -->
    </head>  
    <body>  
        <h1 id="qunit-header">QUnit Test Suite</h1>  
        <h2 id="qunit-banner"></h2>  
        <div id="qunit-testrunner-toolbar"></div>  
        <h2 id="qunit-userAgent"></h2>  
        <ol id="qunit-tests"></ol>  
    </body>  
    </html>

CSS

/**
 * QUnit v1.3.0pre - A JavaScript Unit Testing Framework
 *
 * http://docs.jquery.com/QUnit
 *
 * Copyright (c) 2011 John Resig, Jörn Zaefferer
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * or GPL (GPL-LICENSE.txt) licenses.
 */

/** Font Family and Sizes */

#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}

#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }


/** Resets */

#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
    margin: 0;
    padding: 0;
}


/** Header */

#qunit-header {
    padding: 0.5em 0 0.5em 1em;

    color: #8699a4;
    background-color: #0d3349;

    font-size: 1.5em;
    line-height: 1em;
    font-weight: normal;

    border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
}

#qunit-header a {
    text-decoration: none;
    color: #c2ccd1;
}

#qunit-header a:hover,
#qunit-header a:focus {
    color: #fff;
}

#qunit-banner {
    height: 5px;
}

#qunit-testrunner-toolbar {
    padding: 0.5em 0 0.5em 2em;
    color: #5E740B;
    background-color: #eee;
}

#qunit-userAgent {
    padding: 0.5em 0 0.5em 2.5em;
    background-color: #2b81af;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}


/** Tests: Pass/Fail */

#qunit-tests {
    list-style-position: inside;
}

#qunit-tests li {
    padding: 0.4em 0.5em 0.4em 2.5em;
    border-bottom: 1px solid #fff;
    list-style-position: inside;
}

#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
    display: none;
}

#qunit-tests li strong {
    cursor: pointer;
}

#qunit-tests li a {
    padding: 0.5em;
    color: #c2ccd1;
    text-decoration:...

JavaScript

// Let's test this function  
    function isEven(val) {  
        return val % 2 === 0;  
    }  
      
    test('isEven()', function() { 
        ok(isEven(0), 'Zero is an even number'); 
        ok(isEven(2), 'So is two'); 
        ok(isEven(-4), 'So is negative four'); 
        ok(!isEven(1), 'One is not an even number'); 
        ok(!isEven(-7), 'Neither is negative seven');  
    })