README.md

About

minimal example of using phantomjs with qunit

$ phantomjs run-qunit.js file://`pwd`/test.html
'waitFor()' finished in 200ms.
Tests completed in 21 milliseconds.
5 tests of 5 passed, 0 failed.

Installation

• brew install phantomjs
• git clone git://gist.github.com/1305062.git phantomjs-qunit && cd phantomjs-qunit

Run

• $ phantomjs run-qunit.js file://pwd/test.html

run-qunit.js

/**
 * Wait until the test condition is true or a timeout occurs. Useful for waiting
 * on a server response or for a ui change (fadeIn, etc.) to occur.
 *
 * @param testFx javascript condition that evaluates to a boolean,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param onReady what to do when testFx condition is fulfilled,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
 */
function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 30001, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function() {
            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if(!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 100); //< repeat check every 250ms
};

if (phantom.args.length === 0 || phantom.args.length > 2) {
    console.log('Usage: run-qunit.js URL');
    phantom.exit(1);
}

var URL = phantom.args[0].replace(/\\/g, "/");

if (['file', 'http'].indexOf(URL.substr(0, 4)) === -1) {
    URL = 'file:///' + URL;
}

var page = require('webpage').create();

// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.open(URL, function(status){
    if (status !== "success") {
        console.log("Unable to access network");
        phantom.exit(1);
    } else {
        waitFor(function(){
            return page.evaluate(function(){
                var el = document.getElementById('qunit-testresult');
                if (el && el.innerText.match('completed')) {
                    return true;
                }
                return false;
            });
        }, function(){
            var failedNum = page.evaluate(function(){
                var el = document.getElementById('qunit-testresult');
                console.log(el.innerText);

                // Get a list of errors
                var errors = document.querySelectorAll('#qunit-tests > li.fail');
                var errorsLength = errors.length;
                if(errorsLength > 0) {

                    for(var e=0; e < errorsLength; e++) {

                        var elm = errors[e];
                        var heading = "\n";

                        // Add module name
                        heading += 'Module: ';
                        heading += elm.getElementsByClassName('module-name')[0].innerText;

                        // Add test name
                        heading += ', Test: ' + elm.getElementsByClassName('test-name')[0].innerText;

                        // Get number of failed and passed tests
                        var failedTests = parseInt(elm.getElementsByClassName('failed')[0].innerText, 10);
                        var passedTests = parseInt(elm.getElementsByClassName('passed')[0].innerText, 10);

                        var testsum = failedTests + passedTests;
                        heading += ' - Failed: ' + failedTests;
                        heading += ' of ' + testsum + (testsum === 1 ? ' test' : ' tests');
                        heading += '. The following errors where encountered:';

                        // Output the heading
                        console.log(heading);

                        // Get the error messages
                        var errorNodes = elm.querySelectorAll('.qunit-assert-list .fail');
                        for(var nl=0, nll = errorNodes.length; nl < nll; nl++) {

                            var errorMsg = '';
                            var errorNode = errorNodes[nl];

                            // Build error message
                            var errorMsgArr = errorNode.querySelectorAll('.test-source td pre')[0].innerText.split("\n");
                            var errorStack = 'Unknown!';

                            if(errorMsgArr.length > 1) {
                                errorStack = errorMsgArr[1];
                            } else {
                                errorStack = errorMsgArr[0];
                            }

                            // Add the error message first
                            errorMsg += "\t* " + errorNode.getElementsByClassName('test-message')[0].innerText;
                            errorMsg += ' (' + errorStack.trim() + ')';

                            console.log(errorMsg);
                        } // end foreach error message
                    } // End foreach error node
                } // End errors present

                try {
                    return el.getElementsByClassName('failed')[0].innerHTML;
                } catch (e) {}

                return 0;
            });
            phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0);
        });
    }
});

test.html

<!DOCTYPE html>  
<html>  
<head>  
    <title>QUnit Test Suite</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.10.0/qunit-1.10.0.css" type="text/css" media="screen">  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.10.0/qunit-1.10.0.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>  

    <script>
      // 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');  
      })  
    </script>
</body>  
</html>