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.

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