Give Jasmine a try!

As part of our First Friday series of talks, I recently spoke about the Javascript-testing framework “Jasmine”.  Here’s the essence of what I had to say…

Jasmine?

Jasmine is a “behavior-driven development framework for testing JavaScript code”; you can find it at http://pivotal.github.io/jasmine/

This isn’t intended as a detailed Jasmine overview. Basically, I wanted to unit-test some Javascript I was planning on writing. And doing it from scratch with Jasmine wasn’t that hard. So I want to encourage you to try too!

What do you get?

The output from Jasmine is displayed in a simple static HTML page which shows you in detail which of your Javascript tests are passing and which are failing. For example…

Partial screenshot of a failure in Jasmine

Uh oh, something’s failing…

Partial screenshot of Jasmine, showing all tests passing

Wahey, all tests passed!

How do you use it?

Apart from the Jasmine library, which I’ll come to later, you basically need three files:

  • SpecRunner.html – this is the file that you actually browse to and which shows the results. Just adapt the template that comes with Jasmine. It simply needs to reference the other two files you create, and there are nice comments in the file to show you what to do.  I won’t include a sample file here, as you should just check out the template that Jasmine gives you!
  • The Javascript file you’re testing.
  • A “spec file”, which specifies how your Javascript should work.

Once you’ve got all these, simply open your SpecRunner.html file in a browser to see the results. You don’t have to host it anywhere, serve it with Apache or anything like that – just open the file in a browser!

The format of the spec file is pretty simple. Here’s a very simple example:

describe('JavaScript addition operator', function () { 
    it('adds two numbers together', function () { 
        expect(1 + 2).toEqual(3); 
    }); 
});

(Thanks to this tutorial for the above example. If you’re wondering what to read next after this blog post, that’s tutorial would be a great place to go!)

That’s enough for a working test – it really is that simple! In practice, your spec files will have a bit more to them. Here’s a slightly more elaborate example, adapted and simplified from what my project needed:

describe( "Amount Validator", function(){
    describe( "Message generator and status indicator", function() {
        //                                  min, max, multiple, unit cost
        var unitCost = 1.25;
        var validator = new AmountValidator(50,  500, 25,       unitCost);

        it("warns you about the minimum", function () {
            expect(validator.generateMessageAndStatus('0')).toEqual(
                {
                    'isValid': false,
                    'message': 'You must order at least 50 shares'
                }
            );
            expect(validator.generateMessageAndStatus('49')).toEqual(
                {
                    'isValid': false,
                    'message': 'You must order at least 50 shares'
                }
            );
        })
});

As you can see, this example sets up a couple of different tests against the AmountValidator.  Call it something like AmountValidatorSpec.js and reference it from your SpecRunner.html file.

How to install

Aside from just grabbing a zip file, there are basically two options for installing the Jasmine library itself that I know of: Use a Gem or use Composer.

Jasmine Gem

(see https://github.com/pivotal/jasmine-gem)

gem install jasmine

You can then run jasmine with:

rake jasmine # then browse to localhost:8888
rake jasmine:ci # for Continuous Integration server - uses selenium

 

Jasmine and Composer

Firing up a temporary webserver and using a Ruby gem might seem a bit too much hassle given that Jasmine’s actually all static files.

Or, like me, you might find that it errors when when you try it (although we have used it successfully on other projects).

Either way, I thought it would be cool to get it integrated with Composer.  It’s not available in Packagist at the time of writing, but you can still do it.  To see how it’s done, look at this sample composer.json file that installs Jasmine.

You then need to update your SpecRunner.html to point to the Jasmine lib files in your vendor directory as appropriate.

The downside of this approach is that it doesn’t have the Continuous Integration option of that the Gem gives you, but other than that I think it’s quite nifty.

In short

In short, once Jasmine is installed you only need 3 files.  One of them you were going to make anyway, one of them only requires 2 lines modifying, and the syntax for the third one is super easy.

So give it a go!

Post a Comment

Your email address is never published nor shared. Required fields are marked *

Ready to talk?

Whether you want to create a new digital product or make an existing one even better, we'd love to talk it through.

Get in touch