BASTA 2013: JavaScript Unit Testing

My slides for the BASTA 2013 talk about JavaScript Unit Testing.

Transcript

1. Sebastian P.R. Gingter | Smarthouse Media GmbH
   Mehrwert in Action:
   JavaScript Unit Testing
   

   View Slide

2. Vorab:
   •  Sourcen und Demos @github
   –  https://github.com/gingters/BASTA2013_JSUnitTesting
   •  Slides @speackerdeck
   –  https://speakerdeck.com/phoenixhawk
   

   View Slide

3. JavaScript Unit Testing
   Mehrwert in Action:
   Sebastian P.R. Gingter @PhoenixHawk #bastacon
   

   View Slide

4. Agenda I
   •  Einleitung
   •  Demo I
   – Wie man ‚legacy‘ code testet
   •  Verfügbare Tools
   – Test frameworks & test runners
   

   View Slide

5. Agenda II
   •  Die Toolchain für unsere Session
   – Und warum sie gewählt wurden
   •  Demo II
   – Was geht und wie gehts?
   •  The End J
   – Fragen & Antworten
   

   View Slide

6. Einleitung
   •  Testing ist gut
   –  Oder: Warum sitzt ihr in dieser Session?
   •  Jeder kann test-driven entwickeln
   –  Aber das soll uns jetzt & hier nicht kümmern
   –  Wir sorgen uns eher um existierenden Code
   „[...], we can obviously say that starting with unit testing is
   much easier when starting something from scratch.“
   Jörn Zaefferer, QUnit
   

   View Slide

7. Einleitung
   •  Probleme beim JS-Testing
   – JavaScript & Units ?
   – Inline Event Handlers
   – jQuery
   – DOM
   

   View Slide

8. Testing (legacy) code & DOM
   Demo I
   

   View Slide

9. Verfügbare Tools
   •  Test frameworks
   –  QUnit (jQuery)
   –  Mocha
   –  Jasmine
   –  JsUnit
   –  RhinoUnit
   –  Sinon
   –  JsSpec
   –  Jspec
   –  Screw.Unit
   –  ...
   

   View Slide

10. Verfügbare Tools
    •  Test runners
    – Karma (früher Testacular)
    – Buster.js
    – TestSwarm
    – JsTestDriver
    – YUI Yeti
    – ...
    •  Grobe Übersicht:
    http://stackoverflow.com/questions/300855/javascript-unit-test-tools-for-tdd
    

    View Slide

11. Verfügbare Tools
    •  Browser
    – Alle relevanten J
    – PhantomJS
    

    View Slide

12. Unsere Toolchain
    •  Jasmine
    •  Karma
    

    View Slide

13. Warum?
    •  Verbreitung
    •  Community
    •  Karma kommt von Google
    

    View Slide

14. Woher?
    •  Node.js - http://nodejs.org/
    •  QUnit.js - http://qunitjs.com/
    •  Jasmine - http://pivotal.github.io/jasmine/
    •  Karma - http://karma-runner.github.io/
    •  PhantomJS - http://phantomjs.org/
    

    View Slide

15. Node, Karma & Jasmine
    •  Node.js installieren
    •  npm install -g karma
    •  Optional:
    npm install -g jasmine-node
    

    View Slide

16. CI Integration
    (am Beispiel von TeamCity)
    •  http://blog.danmerino.com/continuos-
    integration-ci-for-javascript-jasmine-
    and-teamcity/
    •  https://github.com/larrymyers/jasmine-
    reporters
    

    View Slide

17. Was geht? Wie geht’s?
    Demo II
    

    View Slide

18. Q & A?
    

    View Slide

19. Last but not least:
    •  Twitter: @PhoenixHawk
    Hashtag: #bastacon
    •  Blog: gingter.org
    •  E-Mail: sebastian@gingter.org
    

    View Slide

20. VIELEN DANK!
    Mehrwert in Action: JavaScript Unit Testing
    

    View Slide