Brief intro to unit testing JavaScript presentation

UnitTestingJS

#Unit Testing your JavaScript

##About Me

* University of Bath Computer Science student
* Placement at [Kainos](http://www.kainos.com)
* [JavaScript Playground](http://www.javascriptplayground.com)
* @Jack_Franklin

## Why Test at all?

* Write tests first = step by step guide of how to implement your functionality.
* Refactor / upgrade libraries with confidence that nothing's broken
* Regression bugs making it into release = thing of the past!


## 3 Options

* [Mocha](http://visionmedia.github.com/mocha/)
* [Jasmine](http://pivotal.github.com/jasmine/)
* [QUnit](http://docs.jquery.com/QUnit)


## Jasmine

* BDD for JavaScript
* Inspired by RSpec (Ruby on Rails testing)
* Does not require a DOM
* Typically used for testing JS libraries


## Jasmine

```javascript
describe("my test suite", function() {
  it("is able to add 1+1 to get 2", function() {
    expect(myLibAdd(1, 1)).toEqual(2);
  })
});
```

## Jasmine

* nest `describe` blocks for clearer & tidier tests:

```javascript
descibe("my test suite", function() {
  describe("a bit of functionality", function() {
    it()
  });
});
```


## Jasmine

![](http://cl.ly/152Z1k3v0m2q3U220o2P/Screen%20Shot%202012-07-07%20at%2013.43.15.png)


## QUnit

* Official testing library of jQuery
* Better for testing applications with heavy DOM interaction (eg jQuery plugins)
* Good support for Fixtures

## QUnit

* give QUnit fixtures - sample HTML structure to test on:

```html
<div id="qunit-fixture">
  <p>this is some text <span>with a totally awesome quote</span></p>
  <div><h2>Quote</h2></div>
</div>
```

## QUnit

* then test by running your plugin on this code:

```javascript
test("functionality", function() {
  $("p span").pullQuote({
    insertAfter: "div h2"
  });
  ok($("div blockquote").length, "the blockquote has been created");
  equal($("div blockquote").text(), "with a totally awesome quote", "it gets the right text");
  ok($("div blockquote").hasClass("pullquote"), "applies class correctly");

});
```

## Mocha

* used more for Node.js testing
* can also test CoffeeScript without having to compile it to JS first
* `npm install mocha`

## Mocha

* two syntax styles
* BDD syntax: `someVal.should.equal(2)`
* TDD syntax: 'expect(someVal).to.equal(2)'


## Mocha

```coffeescript
describe 'isSubscribed', ->
  myApp = new Pubsub
  it 'should return false if evt is not in subs', ->
    expect(myApp._isSubscribed("event1")).to.equal false
    myApp.sub "elem2", "myEvent", someFn
    expect(myApp._isSubscribed("event1")).to.equal false
  it 'should return true if evt is in subs', ->
    sub1 = myApp.sub "elem1", "myEvent", someFn
    expect(myApp._isSubscribed("myEvent")).to.equal true
```

## Mocha

* Run on command line:

```
mocha
```
or for CoffeeScript:
```
mocha --compilers coffee:coffee-script
```


## Mocha

![](http://cl.ly/3Z0G0A1b2l0T2V2f150N/Screen%20Shot%202012-07-07%20at%2014.06.29.png)


## Mocha

![](http://cl.ly/3l0m3X052E0y2B1A2x17/Screen%20Shot%202012-07-07%20at%2014.07.22.png)


## Mocha

Demo time!


## To conclude

* Unit testing might take a while to get into and seem worthless at first, but it's really not
* the ability to refactor & add new functionality without fear is fantastic
* many other options outside of the three I've shown you


## Q & A?

* ( feel free to grab me this evening )

## Thanks

* I've been @Jack_Franklin
* I write lots about JavaScript at [JavaScriptPlayground.com](http://javascriptplayground.com)
* this presentation is available as a Gist at: https://gist.github.com/3066403
* find many examples of JS testing in my Github repos: github.com/jackfranklin