Practical guide  to unit testingKrzysztof Szafranek   meet.js summit 2012                                            1
[ˈkʂɨʂtɔf ʂafranˈɛk]    Roche front-end unit leader    Nokia front-end architect    wooga game developer                  ...
in                                                pr                                                  ac                  ...
unit        testing?                                                   4Unit testing is very much like regular exercise:ev...
I don’t know what                            are unit tests        My code doesn’t                                        ...
I don’t know what                            are unit tests        My code doesn’t                                        ...
tests increase   confidence                                                                                 6It’s easier t...
tests encourage      good design                                                                               7Tests forc...
collective          ownership                                                                                 8No, it’s no...
one click to            test them all                                                                                  9Wi...
the      “We don’t have       time for that!”             argument                                                10The mo...
cumulative functionality                                                                       si gn                      ...
cumulative functionality                                                                       si gn                      ...
cumulative functionality                                                                       si gn                      ...
“its much                                                lower than                                               most peo...
the how          13
1. test                                                  TD                                                     D   2. min...
tools        15
buster.js       test framework               +         test runner                                                        ...
no                                             de       buster.js                                   .js                   ...
config    sources            client        server                                                   browsers              ...
function async() {        window.globalVar = false;        setTimeout(function() {            window.globalVar = true;    ...
UnitTesting       TestCase               Test.More       TestIt                                      screw-unit           ...
tools are                secondary                                                                                     20I...
demo time!                                                                                21Demonstration of buster.js wit...
1. test2. minimum code   that works3. refactor4. repeat                  22
Practical guide     to unit testing                                                  23Thing’s I learned about JS unit tes...
e                t ic          a c       p r  in                    test what                     matters                 ...
e                t ic          a c       p r                      test  in                    your own                    ...
e                t ic          a c       p r  in    keep your tests         fast                        26- What is “fast”...
e                t ic          a c       p r  in                        write tests                        as you go      ...
e                t ic          a c       p r  in                   automate                                               ...
e                t ic          a c       p r  in             expect tests                                                 ...
I challenge                                 you!                                                                          ...
krzysztof@szafranek.net         (name)        Thank you!                          31
krzysztof@szafranek.net       (contact email)         Thank you!                          32
krzysztof@szafranek.net         (twitter)        Thank you!                          33
krzysztof@szafranek.net        (website)        Thank you!                          34
photo credits:pragdave       edtechie99varun suresh   cyberpenguinrwoan                              35
Upcoming SlideShare
Loading in...5
×

Practical Guide to Unit Testing

3,411

Published on

Slides from the talk I gave at meet.js summit in Poznań, on January 14th 2012: http://summit.meetjs.pl/

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,411
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
42
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Practical Guide to Unit Testing

  1. 1. Practical guide to unit testingKrzysztof Szafranek meet.js summit 2012 1
  2. 2. [ˈkʂɨʂtɔf ʂafranˈɛk] Roche front-end unit leader Nokia front-end architect wooga game developer 2Everything front-end.Currently HTML5 game developer @ wooga.
  3. 3. in pr ac tic unit test e™ a function created to test other function 3This is what it comes down to in JavaScript.
  4. 4. unit testing? 4Unit testing is very much like regular exercise:everybody knows it’s good, but few people do it.
  5. 5. I don’t know what are unit tests My code doesn’t need tests 3% 5% I don’t write tests, 47% but I would like to I write tests 45% 5The results of the poll I ran on my blog.I got 60 responses.
  6. 6. I don’t know what are unit tests My code doesn’t need tests 3% 5% I don’t write tests, 47% but I would like to I write tests 45% 5The results of the poll I ran on my blog.I got 60 responses.
  7. 7. tests increase confidence 6It’s easier to change code knowing that tests will show places affected by thechange.
  8. 8. tests encourage good design 7Tests force your methods to be short, simple and with very few dependencies.You end up in the code that’s not only less buggy, but also more readable.
  9. 9. collective ownership 8No, it’s not communism. It means that the code is guarded from harm by tests.Team members can confidently modify the code they didn’t write, as long as theyensure that test still pass.
  10. 10. one click to test them all 9With test runner all your tests can be run automatically at the same time in asmany browsers you want.
  11. 11. the “We don’t have time for that!” argument 10The most common excuse for not writing tests.
  12. 12. cumulative functionality si gn d e o od g no design design payoff line time 11The graph comes from Martin Fowler’s article: http://martinfowler.com/bliki/DesignStaminaHypothesis.htmlIt applies very much to unit testing.
  13. 13. cumulative functionality si gn d e o od g no design design payoff line time 11The graph comes from Martin Fowler’s article: http://martinfowler.com/bliki/DesignStaminaHypothesis.htmlIt applies very much to unit testing.
  14. 14. cumulative functionality si gn d e o od g no design design payoff line time 11The graph comes from Martin Fowler’s article: http://martinfowler.com/bliki/DesignStaminaHypothesis.htmlIt applies very much to unit testing.
  15. 15. “its much lower than most people think: usually weeks not months.” Martin Fowler 12From my own experience, if you work on the project for longer than one man-month, the tests are starting to pay off for themselves in better quality and lesstime spent on finding and fixing bugs.
  16. 16. the how 13
  17. 17. 1. test TD D 2. minimum code that works 3. refactor 4. repeat 14This behavior is Test Driven Development. Some people preferwriting implementation before tests. That can work too.
  18. 18. tools 15
  19. 19. buster.js test framework + test runner 16New, but already powerful framework by Christian Johansen:- extensible API with optional BDD syntax- easy mocking, also for server connections- easy to automate- node and browser tests
  20. 20. no de buster.js .js ! test framework + test runner 16New, but already powerful framework by Christian Johansen:- extensible API with optional BDD syntax- easy mocking, also for server connections- easy to automate- node and browser tests
  21. 21. config sources client server browsers 17The diagram is based on: http://code.google.com/p/js-test-driver/Buster implements most of the features of js-test-driver, andmore.
  22. 22. function async() { window.globalVar = false; setTimeout(function() { window.globalVar = true; }, 100); } buster.testCase("asynchronous tests", { "test async changes global variable": function() { var clock = this.useFakeTimers(); async(); clock.tick(200); buster.assert.equals(window.globalVar, true); clock.restore(); } }); 18One of my favourite buster features: making asynchronouscode with setTimeout running instantly. It keeps your tests fast.
  23. 23. UnitTesting TestCase Test.More TestIt screw-unit JSUnit QUnit jsUnitTest Jasmine Test.Simple Crosscheck Nodeunit YUITest DOH JSTest JSpec RhinoUnit J3Unit Sinon.js FireUnit js-test-driver JSNUnit JSSpec Vows SOAtest Tyrtle jsUnity JSTest.NET JasUnit 19There are many JavaScript unit testing frameworks and the above list (fromhttp://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript) isalready incomplete.
  24. 24. tools are secondary 20If you find a different framework that fits your needs, that’s fine. Actually writingtests is more important than a choice of a particular framework.
  25. 25. demo time! 21Demonstration of buster.js with a simple test run in two desktop browsers andiOS simulator.
  26. 26. 1. test2. minimum code that works3. refactor4. repeat 22
  27. 27. Practical guide to unit testing 23Thing’s I learned about JS unit testing myself.
  28. 28. e t ic a c p r in test what matters 24Don’t test getters and setters, but methods that actually do something
  29. 29. e t ic a c p r test in your own system 25Don’t test browsers, network connections and other external systems. If your unittests are sending requests over network, you’re doing something wrong.
  30. 30. e t ic a c p r in keep your tests fast 26- What is “fast”...?- 1 second is fast.
  31. 31. e t ic a c p r in write tests as you go 27I don’t belive in large retrospective refactorings.If you have a lot of untested code:- Write test BEFORE when you have to fix a bug. It will ensure the bug will notre-appear in the future.- Write tests for all new code.- Don’t refactor without writing tests first. Otherwise it’s running around withscissors, not refactoring.
  32. 32. e t ic a c p r in automate 28Early error detection for free.Use continuous integration software (Jenkins, Hudson, Cruise Control...).
  33. 33. e t ic a c p r in expect tests 29Tests should be part of your definition of done. A feature without tests can’t beconsidered complete.
  34. 34. I challenge you! 30Start writing tests the next time you write code after watching this presentation!
  35. 35. krzysztof@szafranek.net (name) Thank you! 31
  36. 36. krzysztof@szafranek.net (contact email) Thank you! 32
  37. 37. krzysztof@szafranek.net (twitter) Thank you! 33
  38. 38. krzysztof@szafranek.net (website) Thank you! 34
  39. 39. photo credits:pragdave edtechie99varun suresh cyberpenguinrwoan 35

×