$30 off During Our Annual Pro Sale. View Details »

An Introduction Into Test Driven JavaScript Development

An Introduction Into Test Driven JavaScript Development

Given at Syntax Con 2017, on May 18 in Charleston, SC.

Test Driven Development, or TDD for short, is a technique in software development where you write tests before you write application code. This concept, where code is written that doesn’t do anything other than tell you that your code is working, seems like a waste of time and resources.

For some, term “test” is associated with all night study sessions, exams, stress, and even pain. But when we wade through all of the misconceptions and excuses, the pros of TDD clearly outweigh the cons.

This talk will introduce TDD in JavaScript, common misconceptions associated with TDD, the benefits of testing, and examples of how TDD can be implemented in your everyday workflow.

Allen Moore

May 18, 2017
Tweet

More Decks by Allen Moore

Other Decks in Technology

Transcript

  1. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    A N I N T R O D U C T I O N I N TO T E S T
    D R I V E N JAVAS C R I P T D E V E LO P M E N T
    A L L E N M O O R E | S E N I O R F R O N T E N D E N G I N E E R

    View Slide

  2. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    W H E R E TO F I N D M E
    @creativeallen
    https://allenmoore.me
    https://github.com/allenmoore

    View Slide

  3. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    YES, we're hiring!

    View Slide

  4. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    W H AT W E W I L L TA L K A B O U T
    • What is test driven development, or TDD for short?
    • Common misconceptions of TDD.
    • The benefits of testing.
    • How to implement testing into your everyday workflow.

    View Slide

  5. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    W H AT I S T D D?

    View Slide

  6. – W I K I P E D I A
    “Test driven development (TDD) is a software development process that relies on the
    repetition of a very short development cycle: requirements are turned into very
    specific test cases, then the software is improved to pass the new tests, only.”

    View Slide

  7. – A L L E N M O O R E
    “TDD is a technique in software development where you write tests before you write
    application code.”

    View Slide

  8. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    W R I T E A FA I L I N G T E S T
    M A K E T H E T E S T PA S S
    R E FA C T O R

    View Slide

  9. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017

    View Slide

  10. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    C O M M O N M I S C O N C E P T I O N S O F
    T D D

    View Slide

  11. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 . T D D I S T I M E C O N S U M I N G .

    View Slide

  12. – " T D D - T H E A R T O F F E A R L E S S P R O G R A M M I N G " B Y R . J E F F R I E S A N D G . M E L N I K , P U B L I S H E D M AY- J U N E 2 0 0 7
    “Eight of the ten studies in Industry found significant drops in internal defect density,
    from 40%-80%.”

    View Slide

  13. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    W E A L L T E S T, W H E T H E R W E
    R E A L I Z E I T O R N OT

    View Slide

  14. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    2 . A L L T E S T S M U S T B E W R I T T E N
    B E F O R E YO U S TA R T T H E C O D E .

    View Slide

  15. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    3 . FA I L , PAS S , A N D YO U M U S T
    R E FAC TO R .

    View Slide

  16. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    4 . T E S T S F O R A L L T H E T H I N G S !

    View Slide

  17. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    T H E B E N E F I T S O F T E S T I N G

    View Slide

  18. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 . T E S T C OV E R AG E F R O M T H E
    S TA RT.

    View Slide

  19. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    2 . C O N F I D E N C E I N R E FAC TO R I N G .

    View Slide

  20. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    3 . AVO I D U N N E C E S S A RY A N D
    U N U S E D C O D E ( C O D E B LOAT ) .

    View Slide

  21. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    H OW TO I M P L E M E N T T E S T I N G I N TO
    YO U R E V E RY DAY WO R K F LOW

    View Slide

  22. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ npm install -g babel-cli tape faucet browserify browser-run
    $ npm install --save-dev babel-preset-latest babelify tape

    View Slide

  23. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ yarn add --dev babel-preset-latest babelify tape

    View Slide

  24. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 {
    2 "presets": [
    3 ["latest", { "modules": true }],
    4 ]
    5 }

    View Slide

  25. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 import test from 'tape';
    2
    3 test( 'A passing test', ( assert ) => {
    4 assert.pass( 'This is a passing test.' );
    5 assert.end();
    6 } );

    View Slide

  26. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ babel-node tests/test-001.js | faucet

    View Slide

  27. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    A passing test
    # tests 1
    # pass 1
    ok

    View Slide

  28. View Slide

  29. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ browserify -t babelify tests/test-001.js | browser-run -p 2222

    View Slide

  30. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 http://localhost:2222

    View Slide

  31. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    TAP version 13
    # A passing test
    ok 1 This is a passing test.
    1..1
    # tests 1
    # pass 1
    # ok

    View Slide

  32. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ browserify -t babelify tests/test-001.js | browser-run -p 2222 | faucet

    View Slide

  33. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 http://localhost:2222

    View Slide

  34. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    A passing test
    # tests 1
    # pass 1
    # ok

    View Slide

  35. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 import test from 'tape';
    2
    3 test( 'A passing test', ( assert ) => {
    4 assert.pass( 'This is a passing test.' );
    5 assert.end();
    6 } );
    7
    8 test( 'Assertions with tape.', ( assert ) => {
    9 const expected = 'something we can test',
    10 actual = 'something we can temt';
    11
    12 assert.equal( actual, expected,
    13 'If given two mismatched values, .equal() should produce a bug report' );
    14 assert.end();
    15 } );

    View Slide

  36. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ babel-node tests/test-002.js | faucet

    View Slide

  37. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    A passing test
    Assertions with tape.
    not ok 2 If given two mismatched values, .equal() should produce a bug report
    ---
    operator: equal
    expected: 'something we can test'
    actual: 'something we can temt'
    at: Test.assert [as _assert] (http://localhost:2222/bundle.js:6924:17):12:9)
    ...
    # tests 2
    # pass 1
    fail 1

    View Slide

  38. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    https://www.npmjs.com/package/json-server

    View Slide

  39. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ npm install -g json-server
    $ npm install --save-dev supertest

    View Slide

  40. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ yarn add --dev supertest

    View Slide

  41. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 {
    2 "posts": [
    3 { "id": 1, "title": "A new test post" },
    4 { "id": 2, "title": "Another test post" }
    5 ]
    6 }

    View Slide

  42. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ json-server --watch db.json

    View Slide

  43. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 http://localhost:3000/posts/1

    View Slide

  44. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 import test from 'tape';
    2 import request from 'supertest';
    3
    4 const app = 'http://localhost:3000';
    5
    6 test( 'GET /posts', ( assert ) => {
    7 request( app )
    8 .get( '/posts' )
    9 .expect( 200 )
    10 .expect( 'Content-Type', 'application/json; charset=utf-8' )
    11 .end( ( err, res ) => {
    12 const expected = [{
    13 id: 1,
    14 title: 'A new test post'
    15 }, {
    16 id: 2,
    17 title: 'Another test post'
    18 }],
    19 actual = res.body;
    20
    21 assert.error( err, 'No error' );
    22 assert.same( actual, expected, 'Retrieve list of posts' );
    23 assert.end();
    24 } );
    25 } );

    View Slide

  45. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ browserify -t babelify tests/test-003.js | browser-run -p 2222 | faucet

    View Slide

  46. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    GET /posts
    # tests 2
    # pass 2
    ok

    View Slide

  47. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    1 import test from 'tape';
    2 import request from 'supertest';
    3
    4 const app = 'http://localhost:3000';
    5
    6 test( 'GET /posts', ( assert ) => {
    7 request( app )
    8 .get( '/posts' )
    9 .expect( 200 )
    10 .expect( 'Content-Type', 'application/json; charset=utf-8' )
    11 .end( ( err, res ) => {
    12 const expected = [{
    13 id: 1,
    14 title: 'A new test post'
    15 }, {
    16 id: 3,
    17 title: 'The best post ever'
    18 }],
    19 actual = res.body;
    20
    21 assert.error( err, 'No error' );
    22 assert.same( actual, expected, 'Retrieve list of posts' );
    23 assert.end();
    24 } );
    25 } );

    View Slide

  48. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    $ browserify -t babelify tests/test-004.js | browser-run -p 2222 | faucet

    View Slide

  49. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    GET /posts
    not ok 2 Retrieve list of posts
    ---
    expected: |-
    [ { id: 1, title: 'A new test post' }, { id: 3, title: 'The best post ever' } ]
    actual: |-
    [ { id: 1, title: 'A new test post' }, { id: 2, title: 'Another test post' } ]
    at: Test.assert [as_assert] (http://localhost:2222/bundle.js:6924:17):12:9)
    ...
    # tests 2
    # pass 1
    fail 1

    View Slide

  50. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017
    Q U E S T I O N S ?

    View Slide

  51. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017

    View Slide