TDD with buster.js

Slides/code for JavaScript Latvia meetup on 2014-01-14

Transcript

1. TDD with buster.js By ( ), 2014-01-14 Dominykas Blyžė @dymonaz
2. Why buster? Works for node and browser Built-in server for browser tests (no fixture HTML boilerplate) Built-in sinon.js Super flexible
3. Why not buster? 0.x Development is kind of slow (yet stable enough) AMD is tricky Super flexible
4. Alternatives Modern: intern, karma, mocha Old Battle-tested: QUnit, jasmine, JsTestDriver See: https://github.com/theintern/intern#comparison
5. Getting started n p m i n s t a l l b u s t e r
6. Sample b u s t e r . j s https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/buster.js
7. Sample h e l p e r s . j s https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/buster.helpers.js
8. Run tests 1. . / n o d e _ m o d u l e s / . b i n / b u s t e r - s e r v e r 2. Point browser to localhost:1111 3. . / n o d e _ m o d u l e s / . b i n / b u s t e r - t e s t Or install globally, but that's a bad idea 1. r e q u i r e ( ' b u s t e r - n o d e ' ) 2. n o d e m y T e s t s . j s 0. n p m i n s t a l l g r u n t - b u s t e r n p m i n s t a l l - g g r u n t - c l i b r e w i n s t a l l p h a n t o m j s 1. g r u n t b u s t e r
9. Debugging c o n s o l e . l o g ( ) Browser: Chrome Dev Tools, Firebug, whatever node.js: WebStorm/PhpStorm/IntelliJ, n o d e - i n s p e c t o r
10. Demo time! Let's build a test result viewer Worth mentioning: b r o w s e r i f y : client side r e q u i r e ( ) g r u n t - c o n t r i b - w a t c h - autorun tasks n o d e m o n - autorestart server Disclaimer: do a better job for production!
11. i n i t ( e l ) should render status div should render results div when status is clicked: display results hide results onchange of textarea should loadResults()
12. should render status div https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/01‑render‑status.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/01‑render‑status.js
13. should render results div https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/02‑render‑results.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/02‑render‑results.js
14. when status is clicked, display results https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/03‑click‑display.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/03‑click‑display.js
15. when status is clicked, hide resultss https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/04‑click‑hide.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/04‑click‑hide.js
16. F5!
17. Test doubles Use for: isolation, forcing a code path, avoiding external calls, forcing errors sinon.spy: wraps around a method and records calls sinon.stub: replaces a method sinon.mock: replaces methods, built-in expectations
18. onchange of textarea should loadResults() https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/05‑click‑load.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/05‑click‑load.js
19. l o a d R e s u l t s ( ) should change status to loading should XHR should onReceived() after XHR
20. should XHR, then onReceived https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/06‑make‑xhr.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/06‑make‑xhr.js
21. should XHR, then onReceived (error) https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/07‑make‑xhr‑server.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/07‑make‑xhr‑server.js
22. should XHR, then onReceived (async) https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/08‑make‑xhr‑async.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/08‑make‑xhr‑async.js
23. should XHR, then onReceived (promise) https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/09‑make‑xhr‑promise.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/09‑make‑xhr‑promise.js
24. o n R e s u l t s R e c e i v e d ( ) when OK, should change status and add results when failed, should change status and add results when http error, should retry
25. Deferred tests https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/10‑when‑ok.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/10‑when‑ok.js
26. Focus rocket https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/11‑when‑failed.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/11‑when‑failed.js
27. Should retry in 100ms https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/12‑should‑retry.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/12‑should‑retry.js
28. F5!
29. Server side: / r e s u l t s should serve combined results.html should 404 when no browser results should 404 when no node results
30. should serve combined results.html https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/13‑should‑serve.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/13‑should‑serve.js
31. should 404 when no browser results https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/14‑when‑no‑browser.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/14‑when‑no‑browser.js
32. should 404 when no node results https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/15‑when‑no‑node.test.js https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/walkthrough/15‑when‑no‑node.js
33. Slides: http://dominykas.net/20 Code: http://dominykas.net/21 @dymonaz ;