Unit Testing JavaScript Applications

Transcript

1. 1.

   http://github.com/sathomas/jsunittest stephen@sathomas.me icon-comment-alt icon-comments icon-comments-alt icon-credit-card icon-dashboard icon-download icon-download-alt icon-edit

   icon-envelope icon-envelope-alt icon-leaf icon-legal icon-lemon icon-lock icon-unlock icon-magic icon-magnet icon-map-marker icon-minus icon-minus-sign icon-resize-vertica icon-retweet icon-road icon-rss icon-screenshot icon-search icon-share icon-share-alt icon-shopping-car http://speakerdeck.com/sathomas Directional Icons icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow-up icon-chevron-down icon-circle-arrow-down icon-circle-arrow-left icon-circle-arrow-right icon-circle-arrow-up icon-chevron-left icon-car icon-car icon-car icon-car icon-ch Video Player Icons icon-play-circle icon-play icon-step-backward icon-fast-backward icon-fas icon-ste Unit Testing JavaScript Applications Stephen Thomas
2. 2.

   Finding Bugs is a Bitch!

3. 3.

   What If We Could “Childproof” Our Code?

4. 4.

   Continuous Test Driven Development Block bugs from getting into our

   code at all.
5. 5.

   1. Frictionless testing during development 2. Re-use of tests for

   integration 3. Coverage reports

6. 6.

   1. Frictionless testing during development 2. Re-use of tests for

   integration 3. Coverage reports
 Test’Em: Test Development Environment Mocha+: Command line execution Blanket.js: Coverage analysis
7. 7.

   Example Application

8. 8.

   1. Test Development Environment

9. 9.

   Test’Em Configuration { "framework": "mocha", "src_files": [ "node_modules/jquery/dist/jquery.js", "node_modules/underscore/underscore.js", "node_modules/backbone/backbone.js",

   "node_modules/chai/chai.js", "node_modules/sinon/pkg/sinon.js", "src/*.js", "test/*.js" ] }
10. 10.

    Test Driven Development 1. Write a Test 2. Verify That

    It Fails 3. Make It Pass 4. Repeat As Necessary
11. 11.

    First Test describe("Application", function(){ it("creates global variable…", function(){ should.exist(todoApp); })

    })
12. 12.

    Passing Code if (typeof todoApp === "undefined") { todoApp =

    {}; }
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    Testing a Model describe("Todo Model", function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo

    = new todoApp.Todo(); }) it("should default status…", function(){ this.todo.get('complete').should.be.false; }) it("should default title…", function(){ this.todo.get('title').should.equal(""); }) }) …
17. 17.

    Make The Tests Pass todoApp.Todo = Backbone.Model.extend({ defaults: { title:

    "", complete: false } })
18. 18.

    Testing a View describe("Todo List Item View", function(){ beforeEach(function(){ this.todo

    = new todoApp.Todo({ title: "Todo"}); this.item = new todoApp.TodoListItem({ model: this.todo}); }) it("render() should return view", function(){ this.item.render().should.equal(this.item); }); it("should render as list item", function(){ this.item.render() .el.nodeName.should.equal("LI"); })
19. 19.

    Stubs describe("Todo Model", function(){ describe("Attributes", function(){ beforeEach(function(){ this.todo = new

    todoApp.Todo(); this.stb = sinon.stub(this.todo,"save"); }) afterEach(function(){ this.stb.restore(); }) it(“should set title attr…", function(){ this.todo.set('title',"Test"); this.todo.get('title') .should.equal("Test"); })
20. 20.

    Mocking a REST API describe("REST API", function(){ it("should load via

    the API", function(){ this.ajax = sinon.stub($,"ajax")
 .yieldsTo("success", [ {id:1, title:"Mock1", complete:false} ]); this.todos = new todoApp.Todos(); this.todos.fetch(); this.todos.should.have.length(1); this.todos.at(0).get('title') .should.equal("Mock1"); this.ajax.restore(); }) })
21. 21.

    Mocha Tip #1: Never “Comment Out” a Test describe("Todo Model",

    function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo = new todoApp.Todo(); }) it("should default…", function(){ this.todo.get('complete').should.be.false; })
22. 22.

    Mocha Tip #1: Never “Comment Out” a Test describe("Todo Model",

    function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo = new todoApp.Todo(); }) it.skip("should default…", function(){ this.todo.get('complete').should.be.false; })
23. 23.

    Mocha Tip #1: Never “Comment Out” a Test describe("Todo Model",

    function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo = new todoApp.Todo(); }) it.skip("should default…", function(){ this.todo.get('complete').should.be.false; })
24. 24.

    None
25. 25.

    Mocha Tip #1b: Skip an Entire Test Block describe.skip("Todo Model",

    function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo = new todoApp.Todo(); }) it("should default…", function(){ this.todo.get('complete').should.be.false; })
26. 26.

    Mocha Tip #2:
 Focus on a Single Test describe("Todo Model",

    function(){ describe("Initialization", function(){ beforeEach(function(){ this.todo = new todoApp.Todo(); }) it.only("should default…", function(){ this.todo.get('complete').should.be.false; })
27. 27.

    2. Command-Line Test Execution

28. 28.

    Test Code Setup if (typeof exports !== 'undefined' &&
 this.exports

    !== exports) { var jsdom = require("jsdom").jsdom; var doc=jsdom("<html><body></body></html>"); var window = doc.createWindow(); var $ = require("jquery")(window); global._ = require("underscore"); global.Backbone = require("backbone"); Backbone.$ = $; var chai = require("chai"); var sinon = require("sinon"); }
29. 29.

    Mocha Options:
 mocha.opts test/app-todos-test.js src/app-todos.js

30. 30.

    Run Mocha

31. 31.

    3. Test Coverage

32. 32.

    Install Blanket.js

33. 33.

    Generate Coverage Report

34. 34.

    None
35. 35.

    None
36. 36.

    Resources • Test Development Environment Test’em: https://github.com/airportyh/testem • Command Line

    JavaScript Execution Environment node.js: http://nodejs.org • JavaScript Unit Testing Framework Mocha: http://visionmedia.github.io/mocha/ • JavaScript Assertion Library Chai: http://chaijs.com • Spies, Stubs, and Mocks Sinon.JS: http://sinonjs.org • Test Coverage Blanket.js: http://blanketjs.org