TDD with buster.js – Why buster? – Getting started

View Github Repository Open presentation in a new window

dymonaz

See all presentation from dymonaz

TDD with buster.js – Why buster? – Getting started

1 0

javascript-latvia-20140114-tdd

Presentation: TDD with buster.js

On Github dymonaz / javascript-latvia-20140114-tdd

TDD with buster.js

By Dominykas Blyžė (@dymonaz), 2014-01-14

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

npm install buster

Sample buster.js

5 mins

Sample helpers.js

Run tests

./node_modules/.bin/buster-server Point browser to localhost:1111 ./node_modules/.bin/buster-test

Or install globally, but that's a bad idea

require('buster-node') node myTests.js npm install grunt-busternpm install -g grunt-clibrew install phantomjs grunt buster

Debugging

  • console.log()
  • Browser: Chrome Dev Tools, Firebug, whatever
  • node.js: WebStorm/PhpStorm/IntelliJ, node-inspector

Demo time!

Let's build a test result viewer

  • Worth mentioning:
    • browserify: client side require()
    • grunt-contrib-watch - autorun tasks
    • nodemon - autorestart server
  • Disclaimer: do a better job for production!
11 mins

init(el)

  • 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

should render results div

when status is clicked, display results

when status is clicked, hide resultss

F5!

19 mins

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

loadResults()

  • should change status to loading
  • should XHR
  • should onReceived() after XHR
23 mins

should XHR, then onReceived

should XHR, then onReceived (error)

should XHR, then onReceived (async)

should XHR, then onReceived (promise)

onResultsReceived()

  • when OK, should change status and add results
  • when failed, should change status and add results
  • when http error, should retry
30 mins

Deferred tests

Focus rocket

Should retry in 100ms

F5!

Server side: /results

  • should serve combined results.html
  • should 404 when no browser results
  • should 404 when no node results
35 mins

should serve combined results.html

should 404 when no browser results

should 404 when no node results

Slides: http://dominykas.net/20

Code: http://dominykas.net/21

@dymonaz

;