Instantly share code, notes, and snippets.

Embed
What would you like to do?
phantomjs qunit.js example

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
/**
* 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 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(phantom.args[0], 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);
try {
return el.getElementsByClassName('failed')[0].innerHTML;
} catch (e) { }
return 10000;
});
phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0);
});
}
});
<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="https://raw.github.com/jquery/qunit/master/qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="https://raw.github.com/jquery/qunit/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>
<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>
@fabiosantoscode

This comment has been minimized.

Copy link

fabiosantoscode commented Mar 11, 2014

Using this :)

Seems to work great with qunit-tap for tap output.

Thanks for sharing!

@fabiosantoscode

This comment has been minimized.

Copy link

fabiosantoscode commented Jul 2, 2014

When running async tests, qunit-testresult will contain text such as Running: [my slow test name]. If the test name contains the "completed" string, this fails. A better check would be to test whether it already has a span with the failed class.

@vadimshaporov

This comment has been minimized.

Copy link

vadimshaporov commented Aug 19, 2014

Hi! Is there a way to do the remote-debugging of a qUnit test? It fails only when using phantomJs and I can't figure out why.

@mgcam

This comment has been minimized.

Copy link

mgcam commented Apr 7, 2015

Hello

What's the licence for using run-qunit.js? Could https://github.com/gmarik/Vundle.vim/blob/master/LICENSE-MIT.txt be used as guidance?

Thanks in advance

Marina

@hiteshsardana99

This comment has been minimized.

Copy link

hiteshsardana99 commented Feb 14, 2017

after installing phantomjs , how to run this above code ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment