The story of Jasmine and the Headless Webkit
No, I’m not hitting Halloween early. There’s nothing about pumpkins involved here. I’m talking about testing your javascript.
I’m talking sane development practice, not ghost stories.
I’d been using jsTestDriver for a while, but got tired of the way it would take off and go navel-gazing without warning, so I looked for something else and found Jasmine. This was working well for me (I was using the standalone version of Jasmine, which required me to refresh the browser whenever I wanted to test in it) but I missed the convenience of kicking off the tests automagically, from a command line.
Then I found the Phantom.
PhantomJS is a project that creates a webkit-based browser in headless form, quite useful for running things that don’t require a UI, such as tests. And, best of all, it installs easily under OS/X, providing you use homebrew on your mac. (Installation instructions for OS/X and other systems can be found here.)
For me, it was as simple as:
brew update
brew install phantomjs
And phantom was installed.
Then I turned to phantom-jasmine to hook the Phantom up with jasmine 1.2 and I was ready to roll. It was a simple matter of cloning the phantom-jasmine repo down unto my system, then popping the TestRunner.html file in place and pointing its internals at the locations I’d placed the code.
Invoking the tests from within my development directory turned out to be a trifle tricky, but nothing extremely complex:
phantomjs ../phantom-jasmine/lib/run_jasmine_test.coffee TestRunner.html
To break this down, “phantomjs” is what I installed with homebrew, the “../phantom-jasmine/lib/run_jasmine_test.coffee” parameter is from the phantom-jasmine readme (strictly cargo-culted, er, copy/pasted from the readme, it is the coffeescript that actually loads and runs the specified page) while the TestRunner.html file is the page to be used to run the tests. It was placed in my project root so this command line was run as if from there.
For a more concrete example, have a look at my Marshall project. I didn’t include TestRunner in the repo (perhaps I should have) because it relied on the configuration of my dev system, specifically the location of the phantom-jasmine project, but I’ll reproduce it here for your benefit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Test Runner</title>
<link rel="stylesheet" type="text/css" href="../phantom-jasmine/vendor/jasmine-1.2.0/jasmine.css">
<script type="text/javascript" src="../phantom-jasmine/vendor/jasmine-1.2.0/jasmine.js"></script>
<script type="text/javascript" src="../phantom-jasmine/vendor/jasmine-1.2.0/jasmine-html.js"></script>
<script type="text/javascript" src="../phantom-jasmine/lib/console-runner.js"></script>
<!-- SOURCE FILES -->
<script src="js/src/Board.js"></script>
<script src="js/src/Game.js"></script>
<script src="js/src/MoveTree.js"></script>
<script src="js/src/NAG.js"></script>
<script src="js/src/Pgn.js"></script>
<script src="js/src/Piece.js"></script>
<script src="js/src/VBoard.js"></script>
<!-- TEST FILES -->
<script src="test/board.spec.js"></script>
<script src="test/game.spec.js"></script>
<script src="test/MoveTree.spec.js"></script>
<script src="test/Pgn.spec.js"></script>
<script src="test/Piece.spec.js"></script>
<script src="test/VBoard.spec.js"></script>
</head>
<body>
<div><div id="game1"></div><div id="game1_board"></div></div>
<script type="text/javascript">
var console_reporter = new jasmine.ConsoleReporter()
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().addReporter(console_reporter);
jasmine.getEnv().execute();
</script>
</body>
</html>
You’ll note the phantom-jasmine directory is located alongside the marshall project files in my dev directory on my dev machine. This isn’t necessary, just my custom.
Every other reference is based around the TestRunner being in the project root.
I’ll leave as an exercise for the reader the right way to integrate the command-line test execution into your chosen IDE.