TDD for Javascript developers
4 likes1,800 views
This document provides an overview of test-driven development (TDD) practices and tools for JavaScript developers. It discusses what TDD is, how to get started with TDD, and popular JavaScript testing frameworks like Mocha and Chai. It also covers tools for tasks, package management, continuous integration, code analysis, stubs, spies, and documentation for TDD in JavaScript.
![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>](https://image.slidesharecdn.com/tddforjavascriptcuttingadge-140219035403-phpapp01/85/TDD-for-Javascript-developers-28-320.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');](https://image.slidesharecdn.com/tddforjavascriptcuttingadge-140219035403-phpapp01/85/TDD-for-Javascript-developers-32-320.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);](https://image.slidesharecdn.com/tddforjavascriptcuttingadge-140219035403-phpapp01/85/TDD-for-Javascript-developers-33-320.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);](https://image.slidesharecdn.com/tddforjavascriptcuttingadge-140219035403-phpapp01/85/TDD-for-Javascript-developers-34-320.jpg)
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
- 7. Baby steps
- 12. Build Breakers
- 13. How to start with TDD? ● ● ● ● ● ● ● Trainings Management support Skills sharing Perseverance Mentors Metrics Coding dojo
- 14. 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
- 15. Where is my test? ● Developers ● CI ● Deployment
- 16. Behavior-driven Development ● Given ... ● When ... ● Then ... ● describe ... ● it ...
- 19. Tasks for JavaScript ● gruntjs ● grunt plugins
- 20. Tasks for JavaScript ● gulp.js
- 21. Bootstrap project ● Yeoman ● Brunch.io
- 22. Package managers ● npmjs ● bower.io ● volojs
- 24. Tools for JavaScript Continuous integration: ● ● ● ● Jenkins/Hudson TeamCity Cruise Control Travis-ci
- 25. Tools for JavaScript Code analyze: ● ● ● ● jslint jshint JSCoverage jscpd
- 28. 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>
- 29. 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 }); });
- 30. 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 });
- 32. 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');
- 33. 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);
- 34. 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);
- 36. 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); }
- 37. 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(); });
- 40. Questions?
- 41. Lets write code!