Making your js testable

gistfile1.js

// From http://front-end-testing-talk.elabs.se/
// Seen at RailsConf 2011


// Typical jQuery
$('#whiskies li').each(function() {
  var li = $(this);
  var price = li.attr('data-price');
  var addLink = $('<a class="add-to-cart" href="#">Add to cart</a>');
  addLink.appendTo(li);

  addLink.click(function() {
    var item = $('<li>' + li.attr('data-name') + '</li>');
    item.appendTo('#cart .list');
    item.append('<span class="price">' + price + '</span>');
    var currentAmount = parseInt($('#cart .total .amount').text());
    var newAmount = currentAmount + parseInt(price);
    $('#cart .total .amount').text(newAmount);
    return false;
  });
});




// Refactored for more testability
var Cart = function(element) {
  this.element = $(element);
  this.list = this.element.find('.list');
  this.total = this.element.find('.total .amount');
  this.items = [];
};

Cart.prototype.addItem = function(item) {
  element = $('<li>' + item.name + '<span class="price">' +
    item.price + '</span></li>').appendTo(this.list);
  this.items.push({ name: item.name, price: item.price, });
  this.updateTotal();
};

Cart.prototype.updateTotal = function() {
  sum = 0;
  $(this.items).each(function() { sum += this.price });
  this.total.text(sum);
};




// In coffeescript
class Cart
  constructor: (element) ->
    @element = $(element)
    @list = @element.find('.list')
    @total = @element.find('.total .amount')
    @items = []

  addItem: (item) ->
    element = $("<li>#{item.name}<span class='price'>" +
      "#{item.price}</span></li>")
    element.appendTo(@list)
    @items.push(name: item.name, price: item.price)
    @updateTotal()

  updateTotal: ->
    sum = 0
    sum += item.price for item in @items
    @total.text(sum)