An Introduction Into Test Driven JavaScript Development

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

W H E R E TO F I N D M E
@creativeallen
https://allenmoore.me
https://github.com/allenmoore

View Slide

YES, we're hiring!

View Slide

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.

View Slide

W H AT I S T D D?

View Slide

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

View Slide

– 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

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


View Slide

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

1 . T D D I S T I M E C O N S U M I N G .

View Slide

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

View Slide

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

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

3 . FA I L , PAS S , A N D YO U M U S T
R E FAC TO R .

View Slide

4 . T E S T S F O R A L L T H E T H I N G S !

View Slide

T H E B E N E F I T S O F T E S T I N G

View Slide

1 . T E S T C OV E R AG E F R O M T H E
S TA RT.

View Slide

2 . C O N F I D E N C E I N R E FAC TO R I N G .

View Slide

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

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

$ npm install -g babel-cli tape faucet browserify browser-run
$ npm install --save-dev babel-preset-latest babelify tape

View Slide

$ yarn add --dev babel-preset-latest babelify tape

View Slide

1 {
2 "presets": [
3 ["latest", { "modules": true }],
4 ]
5 }

View Slide

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

$ babel-node tests/test-001.js | faucet

View Slide

A passing test
# tests 1
# pass 1
ok

View Slide

View Slide

$ browserify -t babelify tests/test-001.js | browser-run -p 2222

View Slide

1 http://localhost:2222

View Slide

TAP version 13
# A passing test
ok 1 This is a passing test.
1..1
# tests 1
# pass 1
# ok

View Slide

$ browserify -t babelify tests/test-001.js | browser-run -p 2222 | faucet

View Slide

1 http://localhost:2222

View Slide

A passing test
# tests 1
# pass 1
# ok

View Slide

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

$ babel-node tests/test-002.js | faucet

View Slide

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

https://www.npmjs.com/package/json-server

View Slide

$ npm install -g json-server
$ npm install --save-dev supertest

View Slide

$ yarn add --dev supertest

View Slide

1 {
2 "posts": [
3 { "id": 1, "title": "A new test post" },
4 { "id": 2, "title": "Another test post" }
5 ]
6 }

View Slide

$ json-server --watch db.json

View Slide

1 http://localhost:3000/posts/1

View Slide

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


View Slide

GET /posts
# tests 2
# pass 2
ok

View Slide

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


View Slide

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

Q U E S T I O N S ?

View Slide


View Slide

An Introduction Into Test Driven JavaScript Development

An Introduction Into Test Driven JavaScript Development

Allen Moore

More Decks by Allen Moore

Other Decks in Technology

Featured

Transcript