Running Jasmine Tests With PhantomJS

I finally got to mess around with PhantomJS and Jasmine, and couldn’t find a resource that gives clear, concise, accurate information, without language specific or build tool specific coupling, so I decided to write it myself.
Fortunately, it is way simpler than I thought.

PhantomJS

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS is a standalone, cross platform command line application which does not require any specific server environment or programming language support.

Running the Tests

In order to run our jasmine test suite on the command line, all we need is:

• PhantomJS
  Installing PhantomJS from phantomjs.org is fairly trivial (at least on a mac).
• A URL to our Jasmine test suite
  We already covered jasmine test suites, so we have a URL to a jasmine test suite.
• A script that loads our URL and parses the results
  Fortunately, PhantomJS provides a working jasmine runner example – all we have to do is download it and use it.

Once we got these, all we have to do is run the following command:
phantomjs /path/to/run-jasmine.js http://localhost/js/test/unit/
It doesn’t take more than a few seconds(!) and we are provided with the test results.

This is it.
Now, lets run it with our build tool.

* For the purpose of this article, lets assume PhantomJS is installed on the system, our jasmine runner is located at /path/to/run-jasmine.js and our jasmine test suite is located at http://localhost/js/test/unit/

Hooking with Build Tools

GNU Make

Adding the following target to Makefile and running `make js_unit_test` should do the trick:

js_unit_test:
	@phantomjs /path/to/run-jasmine.js http://localhost/js/test/unit/

Rake (Ruby Make)

Adding the following task to Rakefile and running `rake js_unit_test` should do the trick:

task :js_unit_test do
  exec 'phantomjs /path/to/run-jasmine.js http://localhost/js/test/unit/'
end

Apache Ant

Adding the following target to build.xml running `ant js_unit_test` should do the trick:

<target name="js_unit_test" description="Runs Javascript Unit Tests">
    <exec executable="phantomjs" failonerror="true">
       <arg line="/path/to/run-jasmine.js" />
       <arg line="http://localhost/js/test/unit/" />
    </exec>
</target>

Others

Adding this to any build tool should be as simple as it gets.
The script will exit with 0 code on success, and 1 on failure, which is what most build tools need to know.

Conclusions

Following three simple steps enables us run our unit tests on a real WebKit based browser from the command line – no programming required.
This method is NOT specific to AMD test suites. The URI could have a file:// scheme rather than http://

Uzi Kilon

Lead UI Engineer and a Software Architect.
Over 12 years of professional experience, writing complex web applications, and still learning something new every day.
Currently working for Okta in San Francisco