• Senior UI Developer at Hobsons, where we build cool stuff to help teachers, students, and school counselors
• Author of an upcoming book on Jasmine
• Publisher of A Drip of JavaScript, a weekly JavaScript newsletter

Like...

• What is unit testing?
• What is Test Driven Development?
• What is Jasmine?
• How can these things help me?
• How do I use Jasmine?

Raise your hands for yes.

• How many of you are primarily JS developers?
• How many of you know what unit testing is?
• How many of you write unit tests for your JS?
• How many of you know what Test Driven Development is?
• How many of you do TDD for your JS?
• How many of you have heard of Jasmine before this talk?
• How many of you use Jasmine?

• the practice of writing code
• which tests the correctness of
• small(ish) units of your code.

describe("Addition function", function() {
  it("should add numbers", function() {
    expect(add(1, 1)).toBe(2);
  });
});

The practice of writing your tests first, so that they can guide your implementation.

The steps of doing TDD are:

1. Write your test first, and see it fail. (Red)
2. Write your unit of code and see the test pass. (Green)
3. Make your code better, using the tests to keep you safe. (Refactor)

• A JavaScript testing library
• With an easy to use syntax
• That can be used in the browser
• Or on the command line

They're the same thing.

Jasmine uses the term "specs" to emphasize that they should be written before you start coding.

• At least one describe block (they can be nested)
• At least one it block which contains a spec
• At least one expectation, which consists of:
  • expect which is passed an expression (called the "actual" value)
  • A matcher with the expected value (toBe and toBeGreaterThan)

describe("Calculator", function() {
  describe("Addition function", function() {
    it("should add numbers", function() {
      expect(add(1, 1)).toBe(2);
      expect(add(2, 2)).toBeGreaterThan(3);
    });
  });
});

Is just an ordinary HTML file that you load in your browser.

Include the Jasmine library, your sources, your specs, and you have a test environment.

<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<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>

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

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

We're going to write a mini string library which has the following functions.

1. A "first word" function which returns the first word of a string.
2. An "nth word" function which returns any word n of a string.

• We're testing the stringUtil library.
• Specifically we're testing the firstWord function.

describe("stringUtil", function() {
  describe("firstWord", function() {
    // Specs go here.
  });
});

describe("stringUtil", function() {
  describe("firstWord", function() {
    it("should return the first word of a string", function () {
      expect(stringUtil.firstWord("one two")).toBe("one");
    });
  });
});

• Red -> Green -> Refactor
• If you don't get red after writing your specs first, then there is something wrong with your specs.
• Basically, that first red means you're doing the right thing.

var stringUtil = {};

var stringUtil = {
  firstWord: function() {
    // Not doing anything yet.
  }
};

var stringUtil = {
  firstWord: function(text) {
    var textWords = text.split(" ");
    return textWords[0];
  }
};

var stringUtil = {
  firstWord: function(text) {
    return text.split(" ")[0];
  }
};

describe("stringUtil", function() {
  describe("firstWord", function() {
    it("should return the first word of a string", function () {
      expect(stringUtil.firstWord("one two")).toBe("one");
    });
  });

  describe("nthWord", function() {
    it("should return the nth word of a string", function () {
      expect(stringUtil.nthWord("one two", 1)).toBe("one");
      expect(stringUtil.nthWord("one two", 2)).toBe("two");
    });
  });
});

var stringUtil = {
  firstWord: function(text) {
    return text.split(" ")[0];
  },

  nthWord: function(text, i) {
    return text.split(" ")[i - 1];
  }
};

• In this case our nthWord method is so simple that there isn't really anything to refactor in the method itself.
• But you might have noticed that we have some repetition going on between our two methods.
  • We could refactor that out now.
  • Or we could introduce another test that will help us catch this repetition.

var stringUtil = {
  firstWord: function(text) {
    return text.split(" ")[0];
  },

  nthWord: function(text, i) {
    return text.split(" ")[i - 1];
  }
};

• Normally when testing, you should only be testing the interface, not the implementation.
• But in certain cases, you may want to ensure that a method is implemented in a certain way.
  • If you are performance sensitive and need to delegate to a heavily optimized method.
  • If the logic is complicated to get right and you need to be absolutely sure that it is delegated to a dedicated method.
  • If you are delegating to an external library and need to ensure that the correct parameters are sent.

describe("firstWord", function() {
  it("should return the first word of a string", function () {
    expect(stringUtil.firstWord("one two")).toBe("one");
  });

  it("should delegate its logic to nthWord", function () {
    spyOn(stringUtil, "nthWord");
    stringUtil.firstWord("one two");

    expect(stringUtil.nthWord).toHaveBeenCalled();
  });
});

var stringUtil = {
  firstWord: function(text) {
    return this.nthWord(text, 1);
  },

  nthWord: function(text, i) {
    return text.split(" ")[i - 1];
  }
};

var stringUtil = {
  firstWord: function(text) {
    return this.nthWord(text, 1);
  },

  nthWord: function(text, i) {
    return text.split(" ")[i - 1];
  }
};

• Leads to better code design by encouraging smaller units of code which you can combine to achieve your larger goals.
• Having tests/specs lets you refactor with confidence.
• Writing the specs first means that they are going to be more complete, so you can have more confidence in them.
• Since you saw the specs fail, you know that they can fail. Which is a great thing.
• The more confidence you have in your tests/specs, the faster you can improve your existing code.
• Obviously, the bigger and more important a system you're building, the more helpful these techniques will be.

• Jasmine jQuery
  
  Provides matchers for jQuery objects, and an easy way to build HTML fixtures to test with.
  
  
• Underscore Matchers for Jasmine
  
  Provides matchers based on the methods in Underscore.js. Particularly useful for Backbone projects.
  
  
• AngularJS Matchers
  
  Provides matchers for working with the Angular JS framework.

This example checks the last element in an array to see if it matches the expected value.

this.addMatchers({
  toEndWith: function(expected) {
    return this.actual[this.actual.length - 1] === expected;
  }
});

• Spies:
  Are extremely powerful. Can be used to fake objects and functions in more ways than we have time to cover.
• Async testing:
  Is Jasmine's weak point. However, the next major version of Jasmine will have a revamped API for async testing.
• jasmine.any
  A helper utility that lets you match against a constructor or "class".
  
  

  expect(red).toBe(jasmine.any(Color));
  

• The Docs
  
  Are good, though they can be a little hard to follow if you're new to Jasmine.
  The cool thing about them is that they are a self-executing Jasmine spec describing Jasmine.
  
  
• Try Jasmine
  
  An interactive in-browser console for trying out Jasmine. It's a great way to learn.

• Specs can run as part of continuous integration test suite, just like your back-end code.
• You don't have to run a browser to see what's going on.
• You can automatically kick off your specs every time you save.
  Instant feedback makes it much easier to keep moving forward.

It depends on:

• Node
• Grunt (JavaScript based build tool)
• The Watch plugin for Grunt
• Jasmine plugin for Grunt
  (Uses the PhantomJS headless web browser)

• The book is still in-progress, but you can buy it now and you'll get each chapter as it is written.
• Regular price is $18, but you're getting a 75% discount!
• $4.50 is the same price as a sugary Starbucks drink. :-)
• The coupon code is novawebdev. It will be good for the next month.
• You can find the book at: jasminetesting.com.

You can find them at: joshuacc.github.com/tdd-with-jasmine/

Source code at: github.com/joshuacc/tdd-with-jasmine/

Feel free to use them to present at your company.

A link back would be nice. :-)