TDD for Javascript developers

1,320 views
1,110 views

Published on

Introdution to TDD for javascript developers and teams

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

No Downloads
Views
Total views
1,320
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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!

×