$30 off During Our Annual Pro Sale. View Details »

TDD with buster.js

TDD with buster.js

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

Dominykas Blyžė

January 14, 2014
Tweet

More Decks by Dominykas Blyžė

Other Decks in Programming

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 ;