Jasmine: starting out

Get the Jasmine download. If you don’t want to use GitHub… and I don’t, go here , and download the most recent jasmine-standalone-(version).zip, and expand it. You can then make that the start of a template for your file/folder structure:



By convention, the spec folder contains your tests… or checks, as the fashion might be starting to have it. The Jasmine folks have done a great job of giving you a basic JavaScript application and Jasmine test application that you can use. SpecRunner.html is the file you execute to run the tests, giving you this:


Schweeeet. I did no editing, and no compilation (well, ref the latter, of course not).

In fact the Jasmine folks have gone 1 better: even though when you look at the spec and src folders, and at SpecRunner.html, it’s all pretty much self-documenting, they also have a good documentation section:


As a final action, I changed a test expectation in the delivered set from false to true, just so you can see what failure looks like:


If you are not using Karma as the test-runner (and this setup does not assume Karma), then it is worth emphasising that the SpecRunner.html is what you execute, or can execute, in a manual situation, with importantly, its references to the Spec files (that is the unit test files), and the JavaScript source files under test:


<!DOCTYPE html>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.2.0</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.2.0/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-2.2.0/jasmine.css">

  <script src="lib/jasmine-2.2.0/jasmine.js"></script>
  <script src="lib/jasmine-2.2.0/jasmine-html.js"></script>
  <script src="lib/jasmine-2.2.0/boot.js"></script>

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

  <!-- include spec files here... -->
  <script src="spec/SpecHelper.js"></script>
  <script src="spec/PlayerSpec.js"></script>



or if you prefer…



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s