Writing testable, scalable, maintainable, rock-solid JavaScript 

How this can be achieved? 

Hello I am @damian 

No content

uk.sageone.com 

Scale & high growth 

Sage One Platform 

Sage One Platform Ruby on Rails Sage One UK Sage One USA Sage One Spain Sage One Germany 

JavaScript + ? = Good code 

JavaScript + Unit testing = Good code Tip 1 

Good code is a natural byproduct 

Twitter 

$('form#tweet').on('submit', function(e) { e.preventDefault(); var _this = this, $tweets = $('#tweets'), $this = $(this), $textarea = $this.find('textarea'), tweet = $textarea.val(); $.ajax({ url: $this.attr('action'), type: $this.attr('method'), success: function() { $tweets.append('

' + tweet + '

'); _this.reset(); } }) }); 

How would I test this? 

I CAN’T! 

$('form#tweet').on('submit', function(e) { e.preventDefault(); var _this = this, $tweets = $('#tweets'), $this = $(this), $textarea = $this.find('textarea'), tweet = $textarea.val(); $.ajax({ url: $this.attr('action'), type: $this.attr('method'), success: function() { $tweets.append('

' + tweet + '

'); _this.reset(); } }) }); Anonymous function HTML templating Hitting the server Tight coupling Nested callback 

“jQuery way” 

1.AJAX 2.Event handling 3.DOM manipulation 

“If its hard to test its a good sign that you need to refactor your code” 

Anonymous function HTML templating Hitting the server Tight coupling $('form#tweet').on('submit', function(e) { e.preventDefault(); var _this = this, $tweets = $('#tweets'), $this = $(this), $textarea = $this.find('textarea'), tweet = $textarea.val(); $.ajax({ url: $this.attr('action'), type: $this.attr('method'), success: function() { $tweets.append('

' + tweet + '

'); _this.reset(); } }) }); Nested callback 

So whats the right way? 

Forces you to test through objects 

Leverage Objects to the max Tip 2 

No content

Single Responsibility Principle 

Decoupled and intuitive 

function AjaxForm($el) { this.$form = $el; this.form = $el[0]; this.$form.on('submit', $.proxy(this.submit, this)); }; AjaxForm.prototype = { submit: function(e) { e.preventDefault(); var _this = this; $.ajax({ url: _this.form.action, type: _this.form.method, success: $.proxy(this.onSuccess, _this) }); }, onSuccess: function(data) { $({}).trigger('save.success', data); this.reset(); }, reset: function() { this.form.reset(); } }; Loose coupling Single responsibility principle Named functions Internal state via properties 

describe("An AJAX form", function() { var inst, $el; beforeEach(function() { $el = $(''); spyOn($.fn, 'on').andCallThrough(); inst = new AjaxForm($el); }); describe("initialize", function() { it("should have a reference to the jQuery form object", function() { expect(inst.$form instanceof jQuery).toBeTruthy(); }); it("should have a reference to the form object", function() { expect(inst.form).toBe($el[0]); }); it("should set up a submit event handler on the form object", function() { expect($.fn.on.mostRecentCall.args[0]).toEqual('submit'); }); }); Assert against properties Assert on things being called 

describe("when the form is submitted", function() { var submitEv; beforeEach(function() { spyOn($, 'ajax'); submitEv = $.Event('submit'); inst.$form.trigger(submitEv); }); it("should prevent the default form submit action", function() { expect(submitEv.isDefaultPrevented()).toBeTruthy(); }); describe("the AJAX request", function() { it("should make a POST", function() { expect($.ajax.mostRecentCall.args[0].type).toEqual('post'); }); it("should go to /foo", function() { expect($.ajax.mostRecentCall.args[0].url.indexOf('/foo')).not.toBe(-1); }); }); }); Assert events Assert AJAX options 

How much time should I spend testing? 

“I get paid for code that works, not for tests, so my philosophy is to test as little as possible to reach a given level of confidence” 

What should I test? 

Your public API Tip 3 

How do I test my jQuery? 

By testing jQuery’s interface Tip 4 

describe("when the form is submitted", function() { var submitEv; beforeEach(function() { spyOn($, 'ajax'); submitEv = $.Event('submit'); inst.$form.trigger(submitEv); }); it("should prevent the default form submit action", function() { expect(submitEv.isDefaultPrevented()).toBeTruthy(); }); describe("the AJAX request", function() { it("should make a POST", function() { expect($.ajax.mostRecentCall.args[0].type).toEqual('post'); }); it("should go to /foo", function() { expect($.ajax.mostRecentCall.args[0].url.indexOf('/foo')).not.toBe(-1); }); }); }); 

1.Unit tests are a win 2.JS objects are a win 3.Only test your public API 

What next? 

Data-attributes 

var Form = function($el) { this.$el = $el; this.el = $el[0]; var isAJAX = this.$el.data('ajax'); if (isAJAX) { this.$el.on('submit', $.proxy(this.ajaxSubmit, this)); } }; 

Lifecycle hooks 

ajaxSuccess: function(data) { $({}).trigger(‘save.success’, data); this.reset(); } 

In action 

Wrap interface to plugins 

function Datepicker($el) { this.$el = $el; }; Datepicker.prototype = { hide: function() { this.$el.datepicker('hide'); }, show: function() { this.$el.datepicker('show'); } }; 

Leverage mixins 

var FormInputMixin = { getValue: function() { return this.$el.val(); }, setValue: function(val) { return this.$el.val(val); } }; var FormInputs = ['Textbox', 'Select', 'Checkbox']; $.each(FormInputs, function(input) { $.extend(input.prototype, FormInputMixin); }); 

{ mustache 

Members only 

(function(exports, $) { function Form($el) { this.$el = $el; this.form = $el[0]; var isAjax = isAjaxEnabled.call(this); if (isAjax) { this.$el.on('submit', $.proxy(this.ajaxSubmit, this)); } }; ... function isAjaxEnabled() { return this.$el.data('ajax'); } exports.Form = Form; })(window, jQuery); 

Thanks 

@damian damiannicholson.com 

Questions?