Testable Javascript

 function sum(a, b) {
    return a + b;
}

• A new Y.Test.Case is created
  
• Its given a name and set of test functions
• Each function is run in turn with the assumption
  that one or more Y.Assert functions are called
  to actually test something
• The test case is loaded into the local
  Y.Test.Runner and then all tests are executed
  

function buyNowClicked(event) {
    hub.fire('addToShoppingCart', { item: event.target.id });
}

Y.one('#products').delegate('click', buyNowClicked, '.buy-now-button');

 testAddToShoppingCart: function() {
    var hub = Y.Mock();
    Y.Mock.expect(hub,
         {
          method: "fire"
          , args: [ "addToShoppingCart" , Y.Mock.Value.String]
         }
    );
    Y.one('.buy-now-button').simulate('click');
    Y.Mock.verify(hub);

• This code tests the flow of a Buy Now button
  (an element that contains the
  buy-now-button CSS class)
  
• When that button is clicked, the
  addToShoppingCart event is expected to be
  fired with a string parameter
  
• The event hub is mocked out and the fire
  method is expected to be called with a
  single string parameter
  

function addToShoppingCart(item) {
    if (item.inStock()) {
        this.cart.push(item);
        return item;
    } else {
        return null;
    }
}

 testAddOk: function() {
    var shoppingCart = new ShoppingCart()
    , item = { inStock: function() { return true; } }
    , back = shoppingCart.addToShoppingCart(item)
    ;

    Y.Assert.areSame(back, item, "Item not returned");
    Y.ArrayAssert.contains(item, "Item not pushed into cart!");
}
, testAddNok: function() {
    var shoppingCart = new ShoppingCart()
        , item = { inStock: function() { return false; } }
        , back = shoppingCart.addToShoppingCart(item)
    ;

    Y.Assert.isNull(back, "Item returned is not null");
    Y.ArrayAssert.isEmpty(shoppingCart.cart, "Cart not empty!");
}

testAsync: function () {
    var test = this, myButton = Y.one('#button');
    myButton.on('click', function() {
         this.resume(function() {
              Y.Assert.isTrue(true, 'You sunk my battleship!');
         });
    }
    myButton.simulate('click');
    this.wait(2000);
}

• PhantomJS - headless WebKit browser that
  can be accessed programmatically
• Selenium - web browser automation tool
  (also works for mobile)

• Chrome - Developer Tools
• Firefox - Firebug
• Safari - Web Inspector
• Internet Explorer (8+) - F12 Developer Tools