Your SlideShare is downloading. ×
0
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 requir...
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...
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('bd...
Mocha - suites and cases
describe("Test Suite", function() {
it("test case/spec", function() {
//BDD style
});
});
suite('...
Mocha - setUp and tearDown
beforeEach(function() {
//code here call every time at start of test
});
afterEach(function() {...
Mocha - docs

http://visionmedia.github.io/mocha/
Chai - assert
var assert = require('chai').assert
, foo = 'bar'
, beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };
ass...
Chai - expect
var expect = require('chai').expect
, foo = 'bar'
, beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };
exp...
Chai - should
var should = require('chai').should() //actually call the the
function
, foo = 'bar'
, beverages = { tea: [ ...
Chai - docs

http://chaijs.com/api/
Sinon.js - spy, stub
"test should call subscribers on publish": function () {
var callback = sinon.spy();
PubSub.subscribe...
Sinon.js - env
var env, $ajax;
beforeEach(function() {
env = sinon.sandbox.create();
//stub all requests to server
$ajax =...
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...
Questions?
Lets write code!
TDD for Javascript developers
TDD for Javascript developers
TDD for Javascript developers
Upcoming SlideShare
Loading in...5
×

TDD for Javascript developers

923

Published on

Introdution to TDD for javascript developers and teams

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
923
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "TDD for Javascript developers"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×