TDD with buster.js By ( ), 2014-01-14 Dominykas Blyžė @dymonaz 

Why buster? Works for node and browser Built-in server for browser tests (no fixture HTML boilerplate) Built-in sinon.js Super flexible 

Why not buster? 0.x Development is kind of slow (yet stable enough) AMD is tricky Super flexible 

Alternatives Modern: intern, karma, mocha Old Battle-tested: QUnit, jasmine, JsTestDriver See: https://github.com/theintern/intern#comparison 

Getting started n p m i n s t a l l b u s t e r 

Sample b u s t e r . j s https://github.com/dymonaz/javascript‑latvia‑20140114‑ tdd/blob/master/buster.js 

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

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 

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 

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! 

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() 

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 

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 

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 

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 

F5! 

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 

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 

l o a d R e s u l t s ( ) should change status to loading should XHR should onReceived() after XHR 

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 

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 

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 

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 

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 

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 

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 

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 

F5! 

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 

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 

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 

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 

Slides: http://dominykas.net/20 Code: http://dominykas.net/21 @dymonaz ;