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

It Is Time…

Hello everyone,

I’m sure some of you keeping up with my blog probably think it’s going to die off soon; that I’m not trying to update it. On the contrary, I want it to stay alive and well. I feel like I’ve learned a lot through writing it, and know at least a few of you have benefited from it. I don’t want to give either of those two things up. However, time and priority has changed for me lately, so I can only get a small post in weekly at this time.

This week, on Saturday, the 11th of October, at 11:30am, I will be presenting my first session on software development…ever…I’ll let that sink in.

For those who want to listen in, it’s at the always-free Columbus Code Camp (which, by the way, I find to be a very fitting place for my first session, considering that’s where I first was introduced to the development community). Lately, I’ve been preparing for that, so my time’s been pretty booked. Afterward, I plan on writing a post that will lay out the entire talk, along with slides and all resources.

In the meantime, I hope to see some of you there!

Thanks for reading!