Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. Why buster? Works for node and browser Built-in server for

    browser tests (no fixture HTML boilerplate) Built-in sinon.js Super flexible
  2. Why not buster? 0.x Development is kind of slow (yet

    stable enough) AMD is tricky Super flexible
  3. Sample b u s t e r . j s

    https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/buster.js
  4. Sample h e l p e r s . j

    s https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/buster.helpers.js
  5. 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
  6. 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
  7. 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!
  8. 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()
  9. F5!

  10. 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
  11. l o a d R e s u l t

    s ( ) should change status to loading should XHR should onReceived() after XHR
  12. 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
  13. F5!

  14. 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