$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

    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