Save 37% off PRO during our Black Friday Sale! »

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.

55ea809c64e7bba42f566d7bdb4e106e?s=128

Allen Moore

May 18, 2017
Tweet

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
  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
  3. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 YES, we're

    hiring!
  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.
  5. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 W H

    AT I S T D D?
  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.”
  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.”
  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
  9. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017

  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
  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 .
  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%.”
  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
  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 .
  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 .
  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 !
  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
  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.
  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 .
  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 ) .
  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
  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
  23. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ yarn

    add --dev babel-preset-latest babelify tape
  24. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 1 {

    2 "presets": [ 3 ["latest", { "modules": true }], 4 ] 5 }
  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 } );
  26. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ babel-node

    tests/test-001.js | faucet
  27. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 A passing

    test # tests 1 # pass 1 ok
  28. None
  29. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ browserify

    -t babelify tests/test-001.js | browser-run -p 2222
  30. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 1 http://localhost:2222

  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
  32. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ browserify

    -t babelify tests/test-001.js | browser-run -p 2222 | faucet
  33. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 1 http://localhost:2222

  34. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 A passing

    test # tests 1 # pass 1 # ok
  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 } );
  36. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ babel-node

    tests/test-002.js | faucet
  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
  38. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 https://www.npmjs.com/package/json-server

  39. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ npm

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

    add --dev supertest
  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 }
  42. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ json-server

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

  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 } );
  45. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ browserify

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

    # tests 2 # pass 2 ok
  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 } );
  48. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 $ browserify

    -t babelify tests/test-004.js | browser-run -p 2222 | faucet
  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
  50. Allen Moore • @creativeallen • #syntaxcon • allenmoore.me/syntaxcon-2017 Q U

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