Unit Testing a Backbone Modular Application

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

"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 <link rel="stylesheet" href="css/qunit.css"> <script src="js/lib/qunit.js"></script> <body>
<div id="qunit"></div> </body> <script src="js/lib/test.js"></script>

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

Unit Testing a Backbone Modular Application

Unit Testing a Backbone Modular Application

Saket Bhushan

More Decks by Saket Bhushan

Other Decks in Programming

Featured

Transcript

Unit Testing a modular Backbone Application

About Us Me: A humble student of the trade! You:

What are we going to talk about? • Namespaces •

No Deep Diving

"Let me tell you why I love javascript, it's a

Namespaces • JS does not have a built in support

Namespaces - Prefix namespacing for global variables • Single Global

Namespaces - Object Literals • Assist in organizing code and

Namespaces - Nested Namespacing • Extension of Object Literal Pattern

Modularity in a BackBone App highly decoupled, distinct, that enforces

AMD with RequireJS

The only not so good thing about tests is writing

About Testing

Why Unit, then Integration then ..? • Code of scale

What & When

Introducing & Running QUnit <link rel="stylesheet" href="css/qunit.css"> <script src="js/lib/qunit.js"></script> <body>

Simple Test function isPalin( str ){ return (str.reverse() == str)

Sample Test module( "Module One", { setup: function() { //

QUnit Demo

TDD Backbone - Models 1. New instances can be created

TDD Backbone - Collections 1. New model instances can be

TDD Backbone Views 1. They are being correctly tied to

TakeAways • Namespaces are a great honking ideas, lets do

Introducing HackBookPro

Questions • Contact: ◦ at gamebit07 (twitter) ◦ gamebit07 at