Writing Testable JavaScript

Writing
Testable
JavaScript
Rebecca Murphey • Full Frontal 2012
© brianUphoto http://www.flickr.com/photos/snype451/5752753663/in/photostream/
Friday, November 9, 12

View Slide

rmurphey.com • @rmurphey • bocoup.com

View Slide

Writing
Testable
JavaScript
Rebecca Murphey • Full Frontal 2012
© brianUphoto http://www.flickr.com/photos/snype451/5752753663/in/photostream/

View Slide


View Slide

you will design your code
you will test your code
you will refactor your code
other people will use your code
there will be bugs
facts of life

View Slide


View Slide

“do the pieces work together as expected?”
integration tests

View Slide

def test_no_results
fill_in('q', :with => 'foobarbazbimbop')
find('.btn').click

assert(
page.has_selector?('#results li.no-‐results'),
'No results is shown'
)

assert(
find('#results').has_content?('No results found'),
'No results message is shown'
)
end
selenium (via ruby)

View Slide


View Slide

“given input x, is the output y?”
unit tests

View Slide

e.preventDefault();
pending = true;
dataType : 'json',
);
}));
pending = false;
}
});
$('', {
});

View Slide

anonymous functions, lack of structure
complex, oversized functions
lack of con gurability
hidden or shared state
tightly coupled
difficult to test

View Slide

e.preventDefault();
pending = true;
dataType : 'json',
);
}));
pending = false;
}
});
$('', {
});
// ...
});

View Slide

e.preventDefault();
pending = true;
dataType : 'json',
);
}));
pending = false;
}
});
$('', {
});
dataType : 'json',
);
}));
pending = false;
}
});

View Slide


View Slide

setup
presentation
& interaction
application
state
data/server
communication

View Slide


View Slide

search data
application state
glue

View Slide

use constructors to create instances
support con gurability
keep methods simple
don’t intermingle responsibilities
guiding principles

View Slide

test rst.

View Slide

// ...
resultsList.on( 'click', '.like', function(e) {
e.preventDefault();
var name = $( this ).closest( 'li' ).find( 'h2' ).text();
liked.find( '.no-‐results' ).remove();
$( '', { text: name } ).appendTo( liked );
});

View Slide

test('create a likes view', function() {
var view = new app.Views.Likes({
el: '#likes'
});

ok( view );
});

View Slide

test('add a liked person', function() {
var view = new app.Views.Likes({
el: '#likes'
});

view.add( 'Brendan Eich' );

ok( $('#likes').html().match('Brendan Eich') );
});

View Slide

app.Views.Likes = (function() {
var Likes = function( settings ) {
this.$el = $( settings.el );
};
Likes.prototype.add = function( name ) {
this.$el.find( '.no-‐results' ).remove();
$( '', { html : name } ).appendTo( this.$el );
};
return Likes;
}());

View Slide

dataType : 'json',
var tmpl = _.template( $('#tmpl-‐people-‐detailed').text() );
resultsList.html( tmpl({ people : data.results }) );
pending = false;
}
});

View Slide

test('adding search results', function() {
var view = new app.Views.SearchResults({
el: '#results'
});

view.setData([
{ name: 'Rebecca', company: { name: 'Bocoup' }, email: 'rebecca@
{ name: 'Dan', company: { name: 'Bocoup' }, email: '[email protected]
]);

var html = $( '#results' ).html();

ok( html.match( 'Rebecca' ) );
ok( html.match( 'Dan' ) );
equal( $( '#results li' ).length, 2 );
});

View Slide

app.Views.SearchResults = (function() {
var SearchResults = function( settings ) {
this.app = settings.app;
this.$el = $( settings.el );
};
SearchResults.prototype.set = function( people ) {
var $el = this.$el.empty();
return app.loadTemplate( 'people-‐detailed.tmpl' )
.done(function( t ) {
$el.html( t( { people : people } ) );
});
};
return SearchResults;
}());

View Slide

test('search data URL', function() {
var search = new app.Search();
var result = search.fetch( 'cat' );
equal( requests[0].url, '/data/search.json?q=cat' );
});

View Slide

module('search data', {
setup : function() {
xhr = sinon.useFakeXMLHttpRequest();
requests = [];
xhr.onCreate = function( req ) {
requests.push( req );
};
},
teardown : function() {
xhr.restore();
}
});

View Slide

test('fetch returns a promise', function() {
ok( result.then );
});

View Slide

test('promise resolves with array', function() {
requests[0].respond(
200,
{ "Content-‐type" : "text/json" },
JSON.stringify( { results : [ 'cat' ] } )
);
result.done(function( data ) {
equal( data[0], 'cat' );
});
});

View Slide

app.Search = (function() {
var Search = function() {};
var processResults = function( resp ) {
return resp.results;
};
Search.prototype.fetch = function( query ) {
return $.getJSON( '/data/search.json', {
q : query
}).pipe( processResults );
};
return Search;
}());

View Slide

so.

View Slide

where to start?

View Slide

awesome tools
grunt + qunit + phantomjs
grunt-mocha
grunt-jasmine
sinon.js
chai.js

View Slide

$ grunt init:gruntfile

View Slide


View Slide

/*global module:false*/
var child_process = require('child_process');
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
lint: {
files: ['lib/**/*.js', 'test/**/*.js', '! test/lib/**/*.js', 'www/js/**/*.js']
},
qunit: {
files: ['test/**/test-‐*.html']
},
watch: {
files: [ '', 'www/templates/*.tmpl' ],
tasks: 'test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
$ : true,
_ : true,
RSVP : true,
app : true
}
},
uglify: {}
});
grunt.registerTask('default', 'lint qunit');
};

View Slide

/*global module:false*/
var child_process = require('child_process');
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
lint: {
files: ['lib/**/*.js', 'test/**/*.js', '! test/lib/**/*.js', 'www/js/**/*.js']
},
qunit: {
},
watch: {
files: [ '', 'www/templates/*.tmpl' ],
tasks: 'test'
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
$ : true,
_ : true,
RSVP : true,
app : true
}
},
uglify: {}
});
grunt.registerTask('default', 'lint qunit');
};
qunit: {
},

View Slide


View Slide

pinboard.in/u:rmurphey/t:testable-‐javascript/
bit.ly/WL0R8U

View Slide

rmurphey.com • @rmurphey • bocoup.com

View Slide

Writing Testable JavaScript

Writing Testable JavaScript

Rebecca Murphey

More Decks by Rebecca Murphey

Other Decks in Technology

Featured

Transcript