Unit Testing a modular Backbone Application 

About Us Me: A humble student of the trade! You: 1. Understand Javascript 2. Understand MVC 3. Want to test your code 

What are we going to talk about? ● Namespaces ● Modularity ■ AMD ■ A modular Backbone Application ● Unit Testing with QUnit ● Patterns in Testing Client Side MVC 

No Deep Diving 

No content

"Let me tell you why I love javascript, it's a thing called stockholm syndrome" - Alex Gaynor ● Namespaces are big issues ● Lacks Maintainability & Patterns 

Namespaces ● JS does not have a built in support for them ● but Closures can help achieve similar effect ● which leads to Preventing Pollution of Global Scope 

Namespaces - Prefix namespacing for global variables ● Single Global variables work fine. ● Wisdom lies in avoiding conflict. var myApplication_listView = Backbone.View.extend({}); 

Namespaces - Object Literals ● Assist in organizing code and parameters logically var myApp = myApp || {}; 

Namespaces - Nested Namespacing ● Extension of Object Literal Pattern ● Reduces Chances of Collisions (different parents won't have same children) YAHOO.util.Dom. getElementsByClassName ('namespace'); 

Modularity in a BackBone App highly decoupled, distinct, that enforces maintainability & dependency minimization ● How do I declare & invoke? ● How do I organize my code? ● How do I organize my code? ● What should be my project Structure? 

AMD with RequireJS 

The only not so good thing about tests is writing them. 

About Testing 

Why Unit, then Integration then ..? ● Code of scale n, will have unit tests of scale n ● Exhaustive Correctness can't be tested ○ BackBone.js has 1477 LOC, with 201 ifs ○ From Basic Combinatorics, for exhaustive testing NTC = 2 ^ 201 = 32138760885179805510839241 84682325205044405987565585 670602752 

What & When 

Introducing & Running QUnit 

Simple Test function isPalin( str ){ return (str.reverse() == str) ? true : false } module( 'Module One' ); test( 'isPalin()', function() { expect( 2 ); equal( isPalin('madam'), 'true', 'Test a true palindrome' ); notEqual( isPalin('world'), 'fasle', 'Test a false palindrome'); }); 

Sample Test module( "Module One", { setup: function() { // run before }, teardown: function() { // run after } }); test("first test", function() { // run the first test }); http://siliconforks.com/jscoverage/ 

QUnit Demo 

TDD Backbone - Models 1. New instances can be created with the expected default values 2. Attributes can be set and retrieved correctly 3. Changes to state correctly fire off custom events where needed 4. Validation rules are correctly enforced 

TDD Backbone - Collections 1. New model instances can be added as both objects and arrays 2. Changes to models result in any necessary custom events being fired 3. A url property for defining the URL structure for models is correctly defined 

TDD Backbone Views 1. They are being correctly tied to a DOM element when created 2. They support wiring up view methods to DOM elements 

TakeAways ● Namespaces are a great honking ideas, lets do more of those. ● There should be one-- and preferably only one --obvious way to do it. ● Explicit is better than Implicit. ● Now is better than never. ● Although practicality beats purity. 

Introducing HackBookPro 

Questions ● Contact: ○ at gamebit07 (twitter) ○ gamebit07 at gmail dot com