TDD for Javascript developers

  • 740 views
Uploaded on

Introdution to TDD for javascript developers and teams

Introdution to TDD for javascript developers and teams

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
13
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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