TDD for Javascript developers
-
Upload
andrey-kucherenko -
Category
Technology
-
view
863 -
download
6
description
Transcript of TDD for Javascript developers
![Page 1: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/1.jpg)
TDD for JavaScript developers
![Page 2: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/2.jpg)
What is TDD?
● TODO list (navigation map)● Test first● Assert first● Fail first● Continuous integration
![Page 3: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/3.jpg)
Red > Green > Refactor
![Page 4: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/4.jpg)
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
![Page 5: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/5.jpg)
![Page 6: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/6.jpg)
Pair programming
![Page 7: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/7.jpg)
Baby steps
![Page 8: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/8.jpg)
Emergency design
![Page 9: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/9.jpg)
![Page 10: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/10.jpg)
![Page 11: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/11.jpg)
Broken Window Theory
![Page 12: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/12.jpg)
Build Breakers
![Page 13: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/13.jpg)
How to start with TDD?
● Trainings● Management support● Skills sharing● Perseverance ● Mentors● Metrics● Coding dojo
![Page 14: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/14.jpg)
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
![Page 15: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/15.jpg)
Where is my test?
● Developers● CI● Deployment
![Page 16: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/16.jpg)
Behavior-driven Development
● Given ...● When ...● Then ...
● describe ...● it ...
![Page 17: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/17.jpg)
JavaScript programming
![Page 18: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/18.jpg)
Tools for JavaScript
Runners: ● jsTestDriver● PhantomJS● Node.js● Browser
![Page 19: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/19.jpg)
Tasks for JavaScript
● gruntjs● grunt plugins
![Page 20: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/20.jpg)
Tasks for JavaScript
● gulp.js
![Page 21: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/21.jpg)
Bootstrap project
● Yeoman● Brunch.io
![Page 22: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/22.jpg)
Package managers
● npmjs● bower.io● volojs
![Page 23: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/23.jpg)
Tools for JavaScript
IDE: ● WebStorm● Netbeans● Eclipse● Sublime Text● c9.io
![Page 24: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/24.jpg)
Tools for JavaScript
Continuous integration: ● Jenkins/Hudson● TeamCity● Cruise Control● Travis-ci
![Page 25: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/25.jpg)
Tools for JavaScript
Code analyze: ● jslint● jshint● JSCoverage● jscpd
![Page 26: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/26.jpg)
Tests
● mocha● chai● buster.js● nodeunit● qunit● jasmine● sinon.js
![Page 27: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/27.jpg)
Tests
cucumber.js
![Page 28: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/28.jpg)
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>
![Page 29: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/29.jpg)
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
});
});
![Page 30: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/30.jpg)
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 });
![Page 31: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/31.jpg)
Mocha - docs
http://visionmedia.github.io/mocha/
![Page 32: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/32.jpg)
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');
![Page 33: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/33.jpg)
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);
![Page 34: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/34.jpg)
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);
![Page 35: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/35.jpg)
Chai - docs
http://chaijs.com/api/
![Page 36: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/36.jpg)
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);}
![Page 37: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/37.jpg)
Sinon.js - envvar env, $ajax;beforeEach(function() { env = sinon.sandbox.create(); //stub all requests to server $ajax = env.stub($, 'ajax');}); afterEach(function() { env.restore();});
![Page 38: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/38.jpg)
Sinon.js - env
http://sinonjs.org/docs/
![Page 39: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/39.jpg)
Links & books
http://visionmedia.github.io/mocha/http://chaijs.com/http://sinonjs.org/http://www.testdrivenjs.com/http://tddjs.com/
![Page 40: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/40.jpg)
Questions?
![Page 41: TDD for Javascript developers](https://reader036.fdocuments.in/reader036/viewer/2022062404/554a4e14b4c9054b328b4592/html5/thumbnails/41.jpg)
Lets write code!