Testing JavaScript With Jasmine Part 1

Hello everyone,

At Columbus Code Camp 2014, I was given the opportunity to speak. The talk name is “Testing JavaScript 101”, which involves testing with Jasmine in a TDD and BDD fashion. This will be an overview of that talk, and will provide links to the materials for further study.

First, let’s talk about Jasmine itself. Jasmine is a testing framework for JavaScript that is primarily focused on BDD-style testing. This is especially beneficial in a world where one would want to show non-technical people what they are testing and prove that they pass in a way anyone could understand with relative ease. It’s also quite good in that it doesn’t rely on any browser, the DOM or any JavaScript framework. So, it can run wherever JavaScript can run.

In order to install Jasmine, there are three choices:
    1. Using Git: git clone https://github.com/pivotal/jasmine
    2. Using Ruby: add the Jasmine gem to your gemfile and bundle install
    3. Using Python: use pip or add it to your requirements.txt

For the sake of this post, I’ll be explaining the Git route. Once Jasmine is cloned, go to the directory you cloned it in and unzip the file. A few directories (lib, spec, src) and the SpecRunner.html file are the result of the unzipping.

Thankfully, the folks at Pivotal Labs made it pretty easy to jump into this, as they already populated the spec (tests) and src (code) folders with examples. You can immediately run the SpecRunner.html and see an example of passing tests. Which brings me to my next point: test runners. For the sake of this post, we’ll be using the SpecRunner. However, other test runners can be used. 😉

At some point, I’ll be using jQuery in this project. It’s quite easy to add that into this project as well. We edit the SpecRunner file in your favorite IDE or text editor (I’m partial to Sublime Text 2 for simple JavaScript work), and add this near the top of the file with the rest of the scripts:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

Now that we’ve gotten all the installation out of the way, let’s take a quick peek at the examples. You’ll notice all the tests are in the spec file (short for specifications) and the code is in the src file (short for source). If we look in the source files, there’s not much but some short functions that are used just for showing off the tests. They don’t do much but set values or throw errors. In the spec file, we first see a ‘describe’ keyword. The ‘describe’ block of code has a title and a function. The function will hold all the actual tests. So, in essence, ‘describe’ blocks are suites of tests (which we’ll see in more detail later).

The actual tests are in ‘it’ blocks. These also have a title and a function, with the exception that the testing happens in this function. The title traditionally follows an “it should do this” syntax, describing the behavior that the test is trying to flesh out. The ‘expect’ value is what is being tested, and that is followed by the matcher. Jasmine has many matchers that I’ll go into on the next post. For now, we’ll go over just one of the ones that’s in the example:

describe("Player", function() {
  var player;
  var song;
it("should be able to play a Song", function() {
    player.play(song);
    expect(player.currentlyPlayingSong).toEqual(song);

In this case, we have a test suite titled “Player” and a test called “should be able to play a Song”. This is calling to the play function in the player file, which is setting the currentlyPlayingSong variable to song. Our test expects that the player.currentlyPlayingSong variable will equal song. That is true, so we get a passed test:

Jasmine_Testing_example_1

Thus far, we’ve installed and ran a test, knocking the first crucial steps out. Next time, I’ll go into further detail on what’s possible with matchers, talk a bit on the more advanced features of Jasmine, and give some resources for further study and practice. Please feel free to comment if you have any questions or comments.

Thanks for reading!

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s