To get started with Jasmine is actually pretty simple. Open the Jasmine website at http://pivotal.github.io/jasmine/ and download the Standalone Release.

While at the Jasmine website, you might notice that it is actually a live page, executing the specs contained on it. This is made possible by the simplicity of the Jasmine framework, allowing it to be executed in the most diverse environments.

After you've downloaded the distribution and uncompressed it, you can open the SpecRunner.html file on your browser. It will show the results of a sample test suite (including the acceptance criterion we showed you earlier):

SpecRunner.html opened on the browser

This SpecRunner.html file is a Jasmine browser spec runner. It is a simple HTML file that references the Jasmine code, the source files, and the test files. For convention purposes we are going to refer to this file simply as runner.

You can see how simple it is by opening it on a text editor. It is a small HTML file that references the Jasmine source:

<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

References the source files:

<!-- include source files here... -->
<script type="text/javascript" src="src/Player.js"></script>
<script type="text/javascript" src="src/Song.js"></script>

References the spec files:

<script type="text/javascript" src="spec/PlayerSpec.js"></script>

And contains a small Jasmine boot code:

var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;

var htmlReporter = new jasmine.HtmlReporter();

jasmineEnv.addReporter(htmlReporter);

jasmineEnv.specFilter = function(spec) {
  return htmlReporter.specFilter(spec);
};

var currentWindowOnload = window.onload;

window.onload = function() {
  if (currentWindowOnload) {
    currentWindowOnload();
  }
  execJasmine();
};

function execJasmine() {
  jasmineEnv.execute();
}

In Chapter 8, Build Automation, we are going to get a deep understanding on how to customize this runner, but for now you can see that:

It is important that you take a glimpse at this code to understand the flexibility that Jasmine provides; you can see that it has no dependencies, and even though the results are being rendered on an HTML file, this can be easily changed by switching the reporter:

jasmineEnv.addReporter(new jasmine.TerminalReporter());

And then running the same code on a headless browser such as PhantomJS, and having the results written on the console.

A headless browser is a browser environment without its graphical user interface. It can either be an actual browser environment, such as PhantomJS, which uses the WebKit rendering engine, or a simulated browser environment, such as Envjs.

But Jasmine can also be used to test server code, using the same reporter on a Node.js runtime.

This Jasmine flexibility is amazing, because you can use the same tool to test all sorts of JavaScript code.