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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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!
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. F5!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. F5!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide