一から始めるJavaScriptユニットテスト/js-unit-test-from-scratch

Slide 1

Slide 1 text

Ұ͔Β࢝ΊΔ JavaScriptϢχοτςετ 2016/12/03 builderscon shiba_yu36

Slide 2

Slide 2 text

ࣗݾ঺հ • @shiba_yu36 • ΋͘͠͸shibayu36 • גࣜձࣾ͸ͯͳ • খઆ౤ߘαΠτʮΧΫϤϜʯ

Slide 3

Slide 3 text

ͷJS؀ڥ

Slide 4

Slide 4 text

ΧΫϤϜͷJS؀ڥ • MVPΞʔΩςΫνϟ • ίϯϙʔωϯτ͝ͱʹϑΝΠϧΛࡉ͔͘෼ׂ • ϑϨʔϜϫʔΫ͸ͳ͠ɻDOMૢ࡞͸jQuery • ReactͳͲʹ௅ઓ͸͠ͳ͔ͬͨ

Slide 5

Slide 5 text

࠷ॳʹ৺ʹܾΊͨ͜ͱ • શJSϑΝΠϧʹϢχοτςετΛॻ͘։ൃΛ͍ͨ͠ • ࣮ࡍͷΞϓϦέʔγϣϯαʔόͳ͠Ͱͷςετ • ϑϩϯτΤϯυͰ΋ఘΊͨ͘ͳ͍

Slide 6

Slide 6 text

࠷ॳʹ৺ʹܾΊͨ͜ͱ • શJSϑΝΠϧʹϢχοτςετΛॻ͘։ൃΛ͍ͨ͠ • ࣮ࡍͷΞϓϦέʔγϣϯαʔόͳ͠Ͱͷςετ • ϑϩϯτΤϯυͰ΋ఘΊͨ͘ͳ͍ ୭Ͱ΋؆୯ʹςετͰ͖Δ ؀ڥ࡞ΓΛ࢝Ίͨ

Slide 7

Slide 7 text

ݱࡏͲ͏ͳ͔ͬͨ • શͯͷϑΝΠϧʹϢχοτςετ͕ଘࡏ • ௨ৗͷؔ਺͔ΒɺDOMૢ࡞ͷ͋Δػೳ·Ͱ • timerɾajaxɾlocalStorageͳͲʹؔΘΔػೳʹ΋

Slide 8

Slide 8 text

ϢχοτςετͰಘΒΕͨޮೳ ҆৺ײ ։ൃ଎౓ ݁߹࣌Ҏ֎ ϒϥ΢βݟͳ͍ͷͰ

Slide 9

Slide 9 text

͔͠͠… • ؀ڥ༻ҙͷͨΊɺ࠷ॳʹௐ΂Δ͜ͱɾ΍Δ͜ͱ ͕ଟ͔ͬͨ • πʔϧ͸ἧ͍ͬͯΔ͕ɺͲ͏࢖͑͹Α͍͔Θ͔ Γʹ͍͘

Slide 10

Slide 10 text

͔͠͠… • ؀ڥ༻ҙͷͨΊɺ࠷ॳʹௐ΂Δ͜ͱɾ΍Δ͜ͱ ͕ଟ͔ͬͨ • πʔϧ͸ἧ͍ͬͯΔ͕ɺͲ͏࢖͑͹Α͍͔Θ͔ Γʹ͍͘ ಋೖͷෑډ͕ߴ͍ʂʂʂʂ

Slide 11

Slide 11 text

ࠓ೔࿩͍ͨ͜͠ͱ • Ϣχοτςετ؀ڥΛ࡞ͬͨํ๏Λɺγϯϓϧͳ ྫΛ࢖ͬͯ঺հ • JSςετͷಋೖͷෑډΛԼ͛ΒΕͨΒ

Slide 12

Slide 12 text

ࠓ೔࿩͞ͳ͍͜ͱ • E2Eςετ • ಛఆϑϨʔϜϫʔΫʹґଘͨ͠ςετํ๏ • ReactɺAngular • ࠓճͷํ๏Ͱ΋Ͱ͖Δ͔΋ʁ

Slide 13

Slide 13 text

ΞδΣϯμ •JSͷςετπʔϧΛ੔ཧ͢Δ •௨ৗͷؔ਺ͷϢχοτςετ •DOMૢ࡞͢ΔػೳͷϢχοτςετ •ͦͷଞ༷ʑͳػೳͷςετ

Slide 14

Slide 14 text

ΞδΣϯμ •JSͷςετπʔϧΛ੔ཧ͢Δ •௨ৗͷؔ਺ͷϢχοτςετ •DOMૢ࡞͢ΔػೳͷϢχοτςετ •ͦͷଞ༷ʑͳػೳͷςετ

Slide 15

Slide 15 text

ΞδΣϯμ •JSͷςετπʔϧΛ੔ཧ͢Δ •௨ৗͷؔ਺ͷϢχοτςετ •DOMૢ࡞͢ΔػೳͷϢχοτςετ

Slide 16

Slide 16 text

JSͷςετπʔϧΛ ੔ཧ͢Δ

Slide 17

Slide 17 text

JSͷϢχοτςετ ؀ڥΛ࡞Δͧʂʂ

Slide 18

Slide 18 text

ʮJavaScript ςετʯ

Slide 19

Slide 19 text

assert chai Mocha Karma power-assert Jasmine Sinon.js

Slide 20

Slide 20 text

assert chai Mocha Karma power-assert Jasmine Sinon.js ʁʁʁʁ

Slide 21

Slide 21 text

໾ׂ͝ͱʹ੔ཧ͠Α͏

Slide 22

Slide 22 text

Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc

Slide 23

Slide 23 text

Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ಉҰ໾ׂͷ΋ͷ͸࠷େ̍ͭͣͭ

Slide 24

Slide 24 text

Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc πʔϧ͸ඞཁͳ΋ͷΛਵ࣌

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ຊൃදͰ͸͜ͷࡾͭΛબ୒

Slide 29

Slide 29 text

ΞδΣϯμ •JSͷςετπʔϧΛ੔ཧ͢Δ •௨ৗͷؔ਺ͷϢχοτςετ •DOMૢ࡞͢ΔػೳͷϢχοτςετ

Slide 30

Slide 30 text

͔͜͜Β͸ίʔυΛ࢖͍·͢ • Github: shibayu36/bcon-js-unit-test • src/js/ʹ࣮૷ɺsrc/js/test/ʹςετ • ޙͰࢀরͯ͠Έ͍ͯͩ͘͞

Slide 31

Slide 31 text

௨ৗͷؔ਺ͷϢχοτςετ branch: assert-mocha PR#1

Slide 32

Slide 32 text

ςετ͍࣮ͨ͠૷ function addNumber(num1, num2) { return num1 + num2; } export { addNumber } src/js/number-util.js

Slide 33

Slide 33 text

addNumberͷϢχοτςετΛ ࡞ΕΔΑ͏ʹ͠·͠ΐ͏

Slide 34

Slide 34 text

Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ؔ਺ͷςετ -> ΞαʔγϣϯͱϑϨʔϜϫʔΫ

Slide 35

Slide 35 text

assert • ΞαʔγϣϯϥΠϒϥϦͷதͰҰ൪γϯϓϧ • assert.equal(num, 3, ‘਺ࣈ͕ਖ਼͍͠’) • deepEqual, throws • https://www.npmjs.com/package/assert

Slide 36

Slide 36 text

Mocha • ςετ࣮ߦίϚϯυmocha • ग़ྗܗࣜ੾Γସ͑(ਓ༻, CI༻, etc) • describe, itʹΑΔςετͷάϧʔϐϯά • ͦͷଞςετศརΩοτҰࣜ

Slide 37

Slide 37 text

Πϯετʔϧ $ npm install assert $ npm install mocha

Slide 38

Slide 38 text

babelͷढറ $ npm install babel-preset-es2015 $ npm install babel-register { "presets": ["es2015"] } .babelrc

Slide 39

Slide 39 text

import assert from 'assert'; import { addNumber } from "../number-util"; describe('addNumber', function () { it('଍͠ࢉͰ͖Δ', function () { assert.equal(addNumber(1, 2), 3, '1 + 2 = 3'); }); }); ςετΛॻ͘ src/js/test/number-util.js

Slide 40

Slide 40 text

ςετΛ࣮ߦ͢Δ $(npm bin)/mocha --require babel-register src/js/test/*.js

Slide 41

Slide 41 text

σϞ

Slide 42

Slide 42 text

ςετ੒ޭ

Slide 43

Slide 43 text

ςετࣦഊ

Slide 44

Slide 44 text

assert ςετJS ࣮૷JS mochaίϚϯυ ݁Ռग़ྗ ݱࡏͷςετ؀ڥ mocha src/js/test/*.js

Slide 45

Slide 45 text

௨ৗͷؔ਺ͷϢχοτ ςετ؀ڥΛ࡞੒Ͱ͖ͨ

Slide 46

Slide 46 text

͍ΘΏΔModel૚ͷςετ͸ ͜͜·Ͱͷ؀ڥͰςετͰ͖Δ

Slide 47

Slide 47 text

ΞδΣϯμ •JSͷςετπʔϧΛ੔ཧ͢Δ •௨ৗͷؔ਺ͷϢχοτςετ •DOMૢ࡞͢ΔػೳͷϢχοτςετ

Slide 48

Slide 48 text

DOMૢ࡞͢Δػೳͷ Ϣχοτςετ

Slide 49

Slide 49 text

DOMૢ࡞͢Δػೳ • Web։ൃΛ΍͍ͬͯΔͱDOMૢ࡞͸ආ͚ΒΕͳ͍ • શϑΝΠϧςετͷͨΊɺ͜ͷΑ͏ͳ࣌΋ςετ͸ ͍ͨ͠

Slide 50

Slide 50 text

୯७ͳྫ: Ϧετʹ௥Ճ͢Δػೳ

ul = document.querySelector(‘.list’); appendList(ul, ‘ཁૉ1’);

ཁૉ1

Slide 51

Slide 51 text

appendList(ul, ‘ཁૉ2’);

ཁૉ1
ཁૉ2

ཁૉ1

୯७ͳྫ: Ϧετʹ௥Ճ͢Δػೳ

Slide 52

Slide 52 text

src/js/append-list.js function appendList(ul, text) { let li = document.createElement('li'); li.textContent = text; ul.appendChild(li); } export { appendList }

Slide 53

Slide 53 text

2ͭͷ՝୊ • Ͳ͏΍ͬͯDOMૢ࡞Ͱ͖Δϒϥ΢βͰςετ Λಈ͔͔͢ • Ͳ͏΍ͬͯػೳΛ୯ମͰςετ͢Δ͔ • ࣮ࡍͷHTMLΛ഑৴͢ΔαʔόʔΛ࢖Θͣʹ

Slide 54

Slide 54 text

2ͭͷ՝୊ • Ͳ͏΍ͬͯDOMૢ࡞Ͱ͖Δϒϥ΢βͰςετ Λಈ͔͔͢ • Ͳ͏΍ͬͯػೳΛ୯ମͰςετ͢Δ͔ • ࣮ࡍͷHTMLΛ഑৴͢ΔαʔόʔΛ࢖Θͣʹ

Slide 55

Slide 55 text

Ͳ͏΍ͬͯDOMૢ࡞Ͱ͖Δ ϒϥ΢βͰςετΛಈ͔͔͢ ςετϥϯφʔͷKarmaͰղܾ

Slide 56

Slide 56 text

Karma • CUIίϚϯυ͚ͩͰɺDOM APIͷ͋Δϒϥ΢β Λհͯ͠ςετ࣮ߦ • ϒϥ΢βͰςετΛ͢ΔͨΊʹɺલॲཧͳͲͷ ػೳ΋ఏڙͯ͘͠ΕΔ

Slide 57

Slide 57 text

ग़ྗ ग़ྗ ग़ྗ લॲཧ ςετJS ίϚϯυ ࣮ߦ

Slide 58

Slide 58 text

KarmaΛ࢖ͬͯaddNumberͷ ςετΛϒϥ΢βͰಈ͔͠·͠ΐ͏ branch: karma PR#2

Slide 59

Slide 59 text

ࠓճ͸ChromeͰ ग़ྗ ग़ྗ ग़ྗ લॲཧ ςετJS ίϚϯυ ࣮ߦ

Slide 60

Slide 60 text

Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify babelify watchify $ npm install karma-chrome-launcher $ npm install karma-mocha

Slide 61

Slide 61 text

Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify babelify watchify $ npm install karma-chrome-launcher $ npm install karma-mocha લॲཧ༻ ϒϥ΢βͭͳ͗ࠐΈ ςετϑϨʔϜϫʔΫͭͳ͗ࠐΈ

Slide 62

Slide 62 text

ॳظઃఆ • $(npm bin)/karma init • ࣭໰ʹ౴͍͑ͯ͘ͱɺkarma.conf.js͕Ͱ͖Δ • karma.conf.jsΛฤू • ϑϨʔϜϫʔΫɺલॲཧɺϒϥ΢βઃఆ

Slide 63

Slide 63 text

// ϑϨʔϜϫʔΫઃఆ frameworks: ['mocha', 'browserify'], // ςετϑΝΠϧ৔ॴ files: [ 'src/js/test/*.js' ], karma.conf.js

Slide 64

Slide 64 text

// લॲཧઃఆ preprocessors: { 'src/js/test/*.js': ['browserify'] }, browserify: { transform: ['babelify'], }, // ར༻͢Δϒϥ΢βઃఆ browsers: ['Chrome'],

Slide 65

Slide 65 text

࣮ߦ͢Δ $(npm bin)/karma start

Slide 66

Slide 66 text

ςετΛϒϥ΢βܦ༝Ͱ ಈ͔ͤͨ

Slide 67

Slide 67 text

2ͭͷ՝୊ • Ͳ͏΍ͬͯDOM APIͷ͋Δϒϥ΢βͰςετΛ ಈ͔͔͢ • Ͳ͏΍ͬͯػೳΛ୯ମͰςετ͢Δ͔ • ࣮ࡍͷαʔόʔΛ࢖Θͣʹ

Slide 68

Slide 68 text

Ͳ͏΍ͬͯػೳΛ ୯ମͰςετ͢Δ͔ branch: dom-api-unit-test PR#3

Slide 69

Slide 69 text

ΞΠσΞ • ػೳʹඞཁͳ࠷খݶͷHTMLஅยΛಡΈࠐΉ • JSΛ࣮ߦ͠ͳ͕ΒɺHTMLߏ଄ͷมԽ͕ҙਤ ௨Γ͔͔֬ΊΔ

Slide 70

Slide 70 text

ςετલʹ࠷খݶͷHTMLΛ༻ҙ

Slide 71

Slide 71 text

JSΛ࣮ߦͯ͠ςετ

ul = document.querySelector(‘.list’); appendList(ul, ‘ཁૉ1’);

ཁૉ1

Slide 72

Slide 72 text

import assert from 'assert'; import { appendList } from '../append-list'; document.body.innerHTML = '

'; let ul = document.querySelector('.list'); assert.equal(ul.children.length, 0, '࠷ॳ͸0݅'); appendList(ul, 'ཁૉ1'); assert.equal(ul.children.length, 1, '݅਺͕1݅ʹ'); assert.equal(ul.children[0].textContent, 'ཁૉ1'); src/js/test/append-list.js

Slide 73

Slide 73 text

import assert from 'assert'; import { appendList } from '../append-list'; document.body.innerHTML = '

Slide 74

Slide 74 text

import assert from 'assert'; import { appendList } from '../append-list'; document.body.innerHTML = '

Slide 75

Slide 75 text

import assert from 'assert'; import { appendList } from '../append-list'; document.body.innerHTML = '

Slide 76

Slide 76 text

࣮ߦ͢Δ $(npm bin)/karma start

Slide 77

Slide 77 text

DOMૢ࡞͢Δػೳ΋ ςετͰ͖ͨ

Slide 78

Slide 78 text

HTMLஅย͕ڊେͩͱςετ͕Ԛ͘… Ұ͚ͭͩ໰୊

Slide 79

Slide 79 text

document.body.innerHTML = 'ϞʔμϧදࣔϘ λϯ

Ϟʔμ ϧͷ಺༰Ϟʔμϧด͡ΔϘλϯ button>

Slide 80

Slide 80 text

document.body.innerHTML = 'ϞʔμϧදࣔϘ λϯ

Ϟʔμ ϧͷ಺༰Ϟʔμϧด͡ΔϘλϯ button>

Slide 81

Slide 81 text

HTMLஅย͕ڊେͩͱςετ͕Ԛ͘… karma-html2js-preprocessor Ұ͚ͭͩ໰୊

Slide 82

Slide 82 text

karma-html2js-preprocessor • karmaͷલॲཧϓϥάΠϯ • HTMLஅยΛϑΝΠϧͰஔ͍͓ͯ͘ͱɺ ؆୯ʹಡΈࠐΈͰ͖Δπʔϧ

Slide 83

Slide 83 text

Πϯετʔϧ $ npm install karma-html2js-preprocessor

Slide 84

Slide 84 text

// html΋௥Ճ files: [ 'src/js/test/*.js', 'src/js/test/*.html' ], // લॲཧઃఆʹϓϥάΠϯ௥Ճ preprocessors: { 'src/js/test/*.js': ['browserify'], 'src/js/test/*.html': ['html2js'] }, karma.conf.js

Slide 85

Slide 85 text

src/js/test/append-list.html

Slide 86

Slide 86 text

document.body.innerHTML = __html__['src/js/test/append-list.html']; __html__[‘ϑΝΠϧ໊’]ͰಡΈࠐΊΔΑ͏ʹ

Slide 87

Slide 87 text

HTMLஅย͕େ͖ͯ͘΋ ςετ͕Ԛ͘ͳΔ͜ͱ͕ͳ͘ͳͬͨ

Slide 88

Slide 88 text

σϞ

Slide 89

Slide 89 text

௨ৗͷؔ਺΋ɺDOMૢ࡞ͷ͋Δػೳ΋ ςετΛ࡞ΕΔ؀ڥ͕׬੒ʂ ࣮ߦ͸karma start͚ͩ

Slide 90

Slide 90 text

CIͰಈ͔͍ͨ͠ • ϒϥ΢βʹphantomjs΍jsdomΛ࢖͏ • jsdom͸node͚ͩͰಈ͘ϔουϨεϒϥ΢β • --reportersͷࢦఆͰCI༻ͷग़ྗ͕Ͱ͖Δ

Slide 91

Slide 91 text

ςετJS ࣮૷JS ςετHTML html2js ࠷ऴߏ੒ karma start

Slide 92

Slide 92 text

࠷ऴߏ੒ ग़ྗ ग़ྗ ग़ྗ html2js

Slide 93

Slide 93 text

·ͱΊ • Ϣχοτςετ؀ڥΛҰ͔Βಋೖ͢Δํ๏ • ௨ৗͷؔ਺ͷςετͳΒassert + MochaͰ

Slide 94

Slide 94 text

·ͱΊ • DOMૢ࡞͢ΔػೳͷςετͳΒɺKarma + HTMLஅยಡΈࠐΈͰ • timerɺajaxɺlocalStorageͳͲͷςετ͸ผͷػ ձʹ • 12/5ͷ͸ͯͳΤϯδχΞΞυϕϯτΧϨϯμʔͰॻ͖·͢

Slide 95

Slide 95 text

JSͷϢχοτςετ؀ڥ͸ Ұ௨ΓἧͬͨͷͰ͋ͱ͸΍͍͖ͬͯ·͠ΐ͏ʂ