DailyJS

JSpec

2010-01-05 00:00:00 +0000 by Alex R. Young

We recently posted a unit test
roundup
, so I noticed that
JSpec has been updated to version 3. This version introduces several interesting updates (see the full
change list):

JSpec is now version 3.0 and currently has over 200 followers on GitHub,
so it's worth checking out.

Syntax Examples

JSpec tests can be written using a custom DSL or a grammar-less
JavaScript syntax. When using the DSL in browser-based tests, be sure to
use JSpec.exec() to run tests rather than including the
code in script tags (more details are in the README).

Tests written with the DSL look like this:

describe 'ShoppingCart'
  before_each
    cart = new ShoppingCart
  end

  describe 'addProducts'
    it 'should add several products'
      cart.addProduct('cookie')
      cart.addProduct('icecream')
      cart.should.have 2, 'products'
    end
  end

  describe 'checkout'
    it 'should throw an error when checking out with no products'
      -{ cart.clear().checkout() }.should.throw_error EmptyCart
    end
  end
end

JavaScript equivalent:

JSpec.describe('ShoppingCart', function(){
  before_each(function{
    cart = new ShoppingCart
  })

  describe('addProducts', function(){
    it ('should add several products', function(){
      cart.addProducts('cookie')
      cart.addProducts('icecream')
      expect(cart).to(have, 2, 'products')
    })
  })

  describe('checkout', function(){
    it ('should throw an error when checking out with no products', function(){
      expect(function(){ cart.clear().checkout() }).to(throw_error, EmptyCart)
    })
  })
})

Custom Matchers

Custom matchers can be defined using JSpec.addMatchers.
It's possible to control the error messages. It's also possible to
create sets of macros with similar names:

JSpec.addMatchers({
  'be disabled selected checked' : function(attr) {
    return 'jQuery(actual).attr("' + attr + '")'
  },

  'have type id title alt href src sel rev name target' : function(attr) {
    return function(actual, value) {
      return value ? jQuery(actual).attr(attr) ## value:
                     jQuery(actual).attr(attr)
    }
  }
})

Other Features

JSpec includes a command-line tool that can initialise project
templates, as well as auto-testing when files are changed. It can also
work with Growl in Mac OS X. It includes lots of familiar matchers and
works well in a browser and console.

Installation

To try JSpec out, you can install it with
RubyGems -- gem install jspec and read the docs on
github.com/visionmedia/jspec.