Starting TDD with Node.js

Node学園祭2016でのLT資料です。

Transcript

1. Node.jsͰ࢝ΊΔ
 TDD Akito Ito
2. ࣗݾ঺հ • ҏ౻ɹӯɹ(͍ͱ͏ ͖͋ͱ) • ϦΫϧʔτςΫϊϩδʔζͱ͍͏ձࣾͰ
 Node.js੡γεςϜͷӡ༻։ൃΛ͍ͯ͠·͢ • @Akito0107
3. ES2015 / ES2016 / ES2017 • Node.js (ͱv8) ͷαϙʔτ͕ͲΜͲΜਐΜͰ ͍Δ • Node6͸ES2015 99%αϙʔτ • Node4 (1೥લ)͸57%…. • ͜ͷྲྀΕʹ৐Γ஗Εͨ͘ͳ͍
4. ΧδϡΞϧʹม׵ • e.g. ES2015෩ʹॻ͖௚͢ function plzRefactorToArrow() { return { value: 0, increment: function() { ++this.value; return this.value; } } }
5. ΧδϡΞϧʹม׵ • e.g. ES2015෩ʹॻ͖௚͢ function arrow() { return { value: 0, increment: () => { ++this.value; return this.value; } } }
6. ΧδϡΞϧʹม׵ • e.g. ES2015෩ʹॻ͖௚͢ function arrow() { return { value: 0, increment: () => { ++this.value; return this.value; } } }
8. ݱ࣮͸ݫ͍͠ • ՔಇதͷαʔϏεΛES2015 / 2016ʹఴͬͯ
 ॻ͖௚͢ͷ͸؆୯Ͱ͸ͳ͍ɻ • ݴ͍Α͏ͷͳ͍ෆ҆ͱͷઓ͍ • ͱ͸͍͑ɺ৽͍͠ػೳ΋࢖͍͖͍ͬͯͨ
9. ݱ࣮͸ݫ͍͠ • ՔಇதͷαʔϏεΛES2015 / 2016ʹఴͬͯ
 ॻ͖௚͢ͷ͸؆୯Ͱ͸ͳ͍ɻ • ݴ͍Α͏ͷͳ͍ෆ҆ͱͷઓ͍ • ͱ͸͍͑ɺ৽͍͠ػೳ΋࢖͍͖͍ͬͯͨ TDD
10. What is TDD ?? • Test Driven Development 
 (ςετۦಈ։ൃ) • ։ൃର৅ͷػೳʹରͯ͠ҎԼͷϓϩηεΛ܁Γฦ͢;
 1. ςετΛॻ͖ɺfailͤ͞Δ
 2. ػೳΛ࣮૷͠ɺςετΛpassͤ͞Δ
 3. ϦϑΝΫλ
11. TDD Cycle 
    UPEP
    MJTUͷ࡞੒ 
    ςετ࡞੒
    3FE 
    
    ؀ڥઃఆɹ 
    ػೳ࣮૷
    (SFFO 
    ϦϑΝΫλ
12. 0. ؀ڥઃఆ • Testing framework / test runner • mocha / ava / eater / etc… • ςετࣗಈԽπʔϧ΋ඞਢ • ϑΝΠϧมߋΛݕ஌ͯࣗ͠ಈͰtestΛճ͢ • npm-watch / mocha -w / etc…
13. 1. TodoϦετͷ࡞੒ • ࠓ͔Β࣮૷͢ΔػೳϦετ • ࢓༷ͳͲ͕൑໌͍ͯ͠Δ৔߹͸ͦΕ΋
 ͔ͬ͠Γॻ͘ • ࣮૷ͷॱ൪Λ༏ઌॱҐ΍TestabilityʹΑͬͯ
 ܾఆ͢Δ • ஍ຯʹେࣄͳͷͰαϘΒͣʹॻ͜͏
14. Example: todo list • (expressͷshopping applicationΛ૝ఆ) • API GET /items • response bodyʹ ‘items’ property͕͋Δ • items͸DB͔ΒऔಘͰ͖Δʢࠓճ͸mock) • pagination (limit: 30)
15. 2. Write a test • Todo list͔Β1ͭػೳΛpopͯ͠ɺ࠷ॳʹςε τΛॻ͘ • ඞͣςετ͕མͪΔ͜ͱΛ֬ೝ͢Δʂ
16. ࠷ॳͷExpressϋϯυϥ var express = require('express'); var request = require('supertest'); var assert = require('power-assert'); function index(req, res) { res.send(); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
17. ࠷ॳͷExpressϋϯυϥ var express = require('express'); var request = require('supertest'); var assert = require('power-assert'); function index(req, res) { res.send(); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
18. ࠷ॳͷExpressϋϯυϥ var express = require('express'); var request = require('supertest'); var assert = require('power-assert'); function index(req, res) { res.send(); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
19. ࠷ॳͷExpressϋϯυϥ var express = require('express'); var request = require('supertest'); var assert = require('power-assert'); function index(req, res) { res.send(); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
20. Fail (RED)
21. 3. Production Codeͷ࣮૷ • Test͕Pass͢Δ࠷খݶͷίʔυΛॻ͘ • (͜ͷஈ֊Ͱ͸)ՄಡੑͳͲ͸ߟྀ͠ͳ͍
22. 3. Production Codeͷ࣮૷ function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
23. 3. Production Codeͷ࣮૷ function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { it('response body contains items', function(done) { var app = express(); app.get('/items', index); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); });
24. Pass (Green)
25. TDD Cycle 
    UPEP
    MJTUͷ࡞੒ 
    ςετ࡞੒
    3FE 
    
    ؀ڥઃఆɹ 
    ػೳ࣮૷
    (SFFO 
    ϦϑΝΫλ 2ͱ3Λ܁Γฦ͢
26. Write a Test function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { . . . . . . . . . it('Get Items from DB', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }]; var app = express(); app.get('/items', index); request(app) .get('/items') .expect({items: items}, done); }); });
27. Write a Test function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { . . . . . . . . . it('Get Items from DB', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }]; var app = express(); app.get('/items', index); request(app) .get('/items') .expect({items: items}, done); }); });
28. Write a Test function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { . . . . . . . . . it('Get Items from DB', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }]; var app = express(); app.get('/items', index); request(app) .get('/items') .expect({items: items}, done); }); });
29. Write a Test function index(req, res) { res.send({ items: [] }); } describe('GET /items', function() { . . . . . . . . . it('Get Items from DB', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }]; var app = express(); app.get('/items', index); request(app) .get('/items') .expect({items: items}, done); }); });
30. Red
31. Implement function index(options) { var Item = options.Item return function(req, res) { Item.find({}, function(err, docs) { res.send({ items: docs }); }); } } ..................... it('Get items', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }] var Item = { find: function(opts, cb) { setImmediate(function() { cb(null, items); }); } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect({ items: items }, done); }); .....................
32. Implement function index(options) { var Item = options.Item return function(req, res) { Item.find({}, function(err, docs) { res.send({ items: docs }); }); } } ..................... it('Get items', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }] var Item = { find: function(opts, cb) { setImmediate(function() { cb(null, items); }); } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect({ items: items }, done); }); .....................
33. Implement function index(options) { var Item = options.Item return function(req, res) { Item.find({}, function(err, docs) { res.send({ items: docs }); }); } } ..................... it('Get items', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }] var Item = { find: function(opts, cb) { setImmediate(function() { cb(null, items); }); } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect({ items: items }, done); }); .....................
34. Green
35. Write a Test it('Pagenation with limit=30', function(done) { var items = _.range(0, 31).map(function(i) { return { id: i.toString(), name: 'name', price: 1200 } }); var Item = { find: function(opts, cb) { setImmediate(function() { cb(null, items); }); }, }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect(function(response) { assert.equal(response.body.items.length, 30) }) .end(done); });
36. RED
37. Implement function index(options) { var Item = options.Item return function(req, res) { Item.paginate({}, {}, function(err, docs) { res.send({ items: docs }); }); } } it('Pagenation with limit=30', function(done) { var items = _.range(0, 31).map(function(i) { return { id: i.toString(), name: 'name', price: 1200 } }); var Item = { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 30 * page)); }) } }; .............. request(app) .get('/items') .expect(function(response) { assert.equal(response.body.items.length, 30) }) .end(done);
38. Green
39. TDD Cycle 
    UPEP
    MJTUͷ࡞੒ 
    ςετ࡞੒
    3FE 
    
    ؀ڥઃఆɹ 
    ػೳ࣮૷
    (SFFO 
    ϦϑΝΫλ ͩΜͩΜίʔυ͕ԚΕͯ͘Δ ଱͖͑Εͳ͘ͳͬͨΒ
 ϦϑΝΫλ
40. 4. Refactor • ʮ֎޲͖ͷڍಈΛม͑ͣʹίʔυͷ಺෦ߏ଄ Λม͑Δ͜ͱʯ • TDDͷจ຺Ͱ͸ɺʮ֎޲͖ͷڍಈΛม͑ͳ ͍͜ͱʯ͸୯ମςετ͕อূ͢Δ • ϦϑΝΫλϦϯάͷ࠷த͸ৗʹςετ͕ GreenͰ͋Δ͜ͱΛ֬ೝ
41. Refactor 1: 
 ॏෳͷഉআ it('response body contains items', function(done) { var items = [] var Item = { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 30 * page)); }) } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect(function(response) { assert(response.body.items); }) .end(done) }); it('Get items', function(done) { var items = [{ id: '12345', name: 'Javascript: The Good Parts', price: 1800 }] var Item = { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 30 * page)); }) } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect({ items: items }, done); }); it('Pagenation with limit=30', function(done) { var items = _.range(0, 31).map(function(i) { return { id: i.toString(), name: 'name', price: 1200 } }); var Item = { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 30 * page)); }) } }; var app = express(); app.get('/items', index({ Item: Item })); request(app) .get('/items') .expect(function(response) { assert.equal(response.body.items.length, 30) }) .end(done); }); }); function initMockDb(items) { return { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 
 30 * page)); }) } }; } helper / util΁ͷॻ͖ग़͠
42. Refactor 2: cb => Promise function index(options) { var Item = options.Item return function(req, res) { Item.paginate({}, {}, function(err, docs) { res.send({ items: docs }); }); } } function initMockDb(items) { return { paginate: function(query, opts, cb) { setImmediate(function() { var page = opts.page || 1 cb(null, items.slice(30 * (page - 1), 30 * page)); }) } }; } function index(options) { var Item = options.Item return function(req, res) { Item.paginate({}, {}) .then(function(docs) { res.send({ items: docs }); }); } } function initMockDb(items) { return { paginate: function(query, opts) { var page = opts.page || 1 var resp = items.slice(30 * (page - 1), return Promise.resolve(resp) } }; } callback styleͷAPIΛPromise΁ ֎޲͖ͷڍಈ͕͔Θ͍ͬͯͳ͍͜ͱΛ֬ೝ
43. Refactor 3: ES2015 / 2016 function index(options) { var Item = options.Item return function(req, res) { Item.paginate({}, {}) .then(function(docs) { res.send({ items: docs }); }); } } function initMockDb(items) { return { paginate: function(query, opts) { var page = opts.page || 1 var resp = items.slice(30 * (page - 1), return Promise.resolve(resp) } }; } function index(options = {}) { const Item = options.Item return (req, res) => { Item.paginate({}, {}).then((docs) => { res.send({ items: docs }); }); } } function initMockDb(items) { return { paginate: (query, opts) => { const page = opts.page || 1 return Promise.resolve(
 items.slice(30 * (page - 1), 30 * page)) } }; }
44. Refactor: ߟ࡯ • ”֎޲͖ͷڍಈΛม͑ͣʹίʔυͷ಺෦ߏ଄Λม ͑Δ͜ͱ” • ৽จ๏Λ࢖͍ͬͯͯ΋ɺڍಈ͕͔Θ͍ͬͯͳ ͍͜ͱ͸TDDͷϓϩηεͰ࡞੒ͨ͠୯ମςε τ͕อূͯ͘͠ΕΔ • ҆৺ͯ͠ίʔυΛ৽͍͠จ๏ʹ௚͍͚ͯ͠Δ
45. Conclusion • ςετ㱻࣮૷Λ܁Γฦ͠ɺզຫͰ͖ͳ͘ͳͬ ͨΒϦϑΝΫλ • TDD͸ܧଓతϦϑΝΫλͷ؀ڥΛ࡞Δͱ͍͏ ఺Ͱ΋ඇৗʹ༗ޮ • ݴޠͷਐԽ͕ૣ͍Javascriptͦ͜TDDΛ
 ಋೖ͍ͯ͜͠͏ʂ
46. Thank you for listening!