TDD for JavaScript developers

What is TDD?

● TODO list (navigation map)● Test first● Assert first● Fail first● Continuous integration

Red > Green > Refactor

What about TDD?

● Unit tests coverage● Increases assurance of correctness● More complete explorations of requirements● Improved code● Code as documentation● Safe refactoring● No extra code

Pair programming

Baby steps

Emergency design

Broken Window Theory

Build Breakers

How to start with TDD?

● Trainings● Management support● Skills sharing● Perseverance ● Mentors● Metrics● Coding dojo

How to start with TDD?

● Start new project with TDD/BDD practice● Start new task with unit tests● Start to fix bugs with unit tests

Where is my test?

● Developers● CI● Deployment

Behavior-driven Development

● Given ...● When ...● Then ...

● describe ...● it ...

JavaScript programming

Tools for JavaScript

Runners: ● jsTestDriver● PhantomJS● Node.js● Browser

Tasks for JavaScript

● gruntjs● grunt plugins

Tasks for JavaScript

● gulp.js

Bootstrap project

● Yeoman● Brunch.io

Package managers

● npmjs● bower.io● volojs

Tools for JavaScript

IDE: ● WebStorm● Netbeans● Eclipse● Sublime Text● c9.io

Tools for JavaScript

Continuous integration: ● Jenkins/Hudson● TeamCity● Cruise Control● Travis-ci

Tools for JavaScript

Code analyze: ● jslint● jshint● JSCoverage● jscpd

Tests

● mocha● chai● buster.js● nodeunit● qunit● jasmine● sinon.js

Tests

cucumber.js

Mocha - getting started

<div id="mocha"></div>

... include js ...

<script src="mocha.js"></script>

<script>mocha.setup('bdd')</script>

... include tests ...

<script>

mocha.checkLeaks();

mocha.globals(['jQuery']);

mocha.run();

</script>

Mocha - suites and cases

describe("Test Suite", function() {

it("test case/spec", function() {

//BDD style

});

});

suite('Test Suite', function(){

test('test case', function(){

//TDD style

});

});

Mocha - setUp and tearDown

beforeEach(function() { //code here call every time at start of test });

afterEach(function() { //code here call every time at after test });

Mocha - docs

http://visionmedia.github.io/mocha/

Chai - assert

var assert = require('chai').assert , foo = 'bar' , beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };

assert.typeOf(foo, 'string', 'foo is a string');assert.equal(foo, 'bar', 'foo equal `bar`');assert.notEqual(foo, 'barz', 'foo not equal `barz`');assert.lengthOf(foo, 3, 'foo`s value has a length of 3');assert.lengthOf(beverages.tea, 3, 'beverages has 3 types of tea');

Chai - expect

var expect = require('chai').expect , foo = 'bar' , beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };

expect(foo).to.be.a('string');expect(foo).to.equal('bar');expect(foo).to.not.equal('barz');expect(foo).to.have.length(3);expect(beverages).to.have.property('tea').with.length(3);

Chai - should

var should = require('chai').should() //actually call the the function , foo = 'bar' , beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };

foo.should.be.a('string');foo.should.equal('bar');foo.should.not.equal('barz');foo.should.have.length(3);beverages.should.have.property('tea').with.length(3);

Chai - docs

http://chaijs.com/api/

Sinon.js - spy, stub"test should call subscribers on publish": function () { var callback = sinon.spy(); PubSub.subscribe("message", callback);

PubSub.publishSync("message");

assertTrue(callback.called);}

Sinon.js - envvar env, $ajax;beforeEach(function() { env = sinon.sandbox.create(); //stub all requests to server $ajax = env.stub($, 'ajax');}); afterEach(function() { env.restore();});

Sinon.js - env

http://sinonjs.org/docs/

Links & books

http://visionmedia.github.io/mocha/http://chaijs.com/http://sinonjs.org/http://www.testdrivenjs.com/http://tddjs.com/

Questions?

Lets write code!