Upload
andrey-kucherenko
View
872
Download
6
Embed Size (px)
DESCRIPTION
Introdution to TDD for javascript developers and teams
Citation preview
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!