An Introduction Into Test Driven JavaScript Development

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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 beneﬁts of testing. • How to implement testing into your everyday workﬂow.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

– 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 speciﬁc test cases, then the software is improved to pass the new tests, only.”

Slide 7

Slide 7 text

– 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.”

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 .

Slide 12

Slide 12 text

– " 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 signiﬁcant drops in internal defect density, from 40%-80%.”

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 .

Slide 15

Slide 15 text

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 .

Slide 16

Slide 16 text

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 !

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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 .

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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 } );

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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 }

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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 } );

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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 } );

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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