buiderscon tokyo 2016で発表した資料です
Ұ͔Β࢝ΊΔJavaScriptϢχοτςετ2016/12/03 buildersconshiba_yu36
View Slide
ࣗݾհ• @shiba_yu36• ͘͠shibayu36• גࣜձࣾͯͳ• খઆߘαΠτʮΧΫϤϜʯ
ͷJSڥ
ΧΫϤϜͷJSڥ• MVPΞʔΩςΫνϟ• ίϯϙʔωϯτ͝ͱʹϑΝΠϧΛࡉׂ͔͘• ϑϨʔϜϫʔΫͳ͠ɻDOMૢ࡞jQuery• ReactͳͲʹઓ͠ͳ͔ͬͨ
࠷ॳʹ৺ʹܾΊͨ͜ͱ• શJSϑΝΠϧʹϢχοτςετΛॻ͘։ൃΛ͍ͨ͠• ࣮ࡍͷΞϓϦέʔγϣϯαʔόͳ͠Ͱͷςετ• ϑϩϯτΤϯυͰఘΊͨ͘ͳ͍
࠷ॳʹ৺ʹܾΊͨ͜ͱ• શJSϑΝΠϧʹϢχοτςετΛॻ͘։ൃΛ͍ͨ͠• ࣮ࡍͷΞϓϦέʔγϣϯαʔόͳ͠Ͱͷςετ• ϑϩϯτΤϯυͰఘΊͨ͘ͳ͍୭Ͱ؆୯ʹςετͰ͖Δڥ࡞ΓΛ࢝Ίͨ
ݱࡏͲ͏ͳ͔ͬͨ• શͯͷϑΝΠϧʹϢχοτςετ͕ଘࡏ• ௨ৗͷ͔ؔΒɺDOMૢ࡞ͷ͋Δػೳ·Ͱ• timerɾajaxɾlocalStorageͳͲʹؔΘΔػೳʹ
ϢχοτςετͰಘΒΕͨޮೳ҆৺ײ ։ൃ݁߹࣌Ҏ֎ϒϥβݟͳ͍ͷͰ
͔͠͠…• ڥ༻ҙͷͨΊɺ࠷ॳʹௐΔ͜ͱɾΔ͜ͱ͕ଟ͔ͬͨ• πʔϧἧ͍ͬͯΔ͕ɺͲ͏͑Α͍͔Θ͔Γʹ͍͘
͔͠͠…• ڥ༻ҙͷͨΊɺ࠷ॳʹௐΔ͜ͱɾΔ͜ͱ͕ଟ͔ͬͨ• πʔϧἧ͍ͬͯΔ͕ɺͲ͏͑Α͍͔Θ͔Γʹ͍͘ಋೖͷෑډ͕ߴ͍ʂʂʂʂ
ࠓ͍ͨ͜͠ͱ• ϢχοτςετڥΛ࡞ͬͨํ๏ΛɺγϯϓϧͳྫΛͬͯհ• JSςετͷಋೖͷෑډΛԼ͛ΒΕͨΒ
ࠓ͞ͳ͍͜ͱ• E2Eςετ• ಛఆϑϨʔϜϫʔΫʹґଘͨ͠ςετํ๏• ReactɺAngular• ࠓճͷํ๏ͰͰ͖Δ͔ʁ
ΞδΣϯμ•JSͷςετπʔϧΛཧ͢Δ•௨ৗͷؔͷϢχοτςετ•DOMૢ࡞͢ΔػೳͷϢχοτςετ•ͦͷଞ༷ʑͳػೳͷςετ
ΞδΣϯμ•JSͷςετπʔϧΛཧ͢Δ•௨ৗͷؔͷϢχοτςετ•DOMૢ࡞͢ΔػೳͷϢχοτςετ
JSͷςετπʔϧΛཧ͢Δ
JSͷϢχοτςετڥΛ࡞Δͧʂʂ
ʮJavaScript ςετʯ
assert chaiMochaKarmapower-assertJasmineSinon.js
assert chaiMochaKarmapower-assertJasmineSinon.jsʁʁʁʁ
ׂ͝ͱʹཧ͠Α͏
Ξαʔγϣϯ ʮ˓˓ʯʮxxʯͰ͋Δassert, chai,power-assertϑϨʔϜϫʔΫςετ࣮ߦ&ศརΩοτҰࣜMocha, Jasmineςετϥϯφʔ ϒϥβΛհͨ͠ςετ Karmaςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc
Ξαʔγϣϯ ʮ˓˓ʯʮxxʯͰ͋Δassert, chai,power-assertϑϨʔϜϫʔΫςετ࣮ߦ&ศརΩοτҰࣜMocha, Jasmineςετϥϯφʔ ϒϥβΛհͨ͠ςετ Karmaςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etcಉҰׂͷͷ࠷େ̍ͭͣͭ
Ξαʔγϣϯ ʮ˓˓ʯʮxxʯͰ͋Δassert, chai,power-assertϑϨʔϜϫʔΫςετ࣮ߦ&ศརΩοτҰࣜMocha, Jasmineςετϥϯφʔ ϒϥβΛհͨ͠ςετ Karmaςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etcπʔϧඞཁͳͷΛਵ࣌
Ξαʔγϣϯ ʮ˓˓ʯʮxxʯͰ͋Δassert, chai,power-assertϑϨʔϜϫʔΫςετ࣮ߦ&ศརΩοτҰࣜMocha, Jasmineςετϥϯφʔ ϒϥβΛհͨ͠ςετ Karmaςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etcຊൃදͰ͜ͷࡾͭΛબ
͔͜͜ΒίʔυΛ͍·͢• Github: shibayu36/bcon-js-unit-test• src/js/ʹ࣮ɺsrc/js/test/ʹςετ• ޙͰࢀরͯ͠Έ͍ͯͩ͘͞
௨ৗͷؔͷϢχοτςετbranch: assert-mochaPR#1
ςετ͍࣮ͨ͠function addNumber(num1, num2) {return num1 + num2;}export { addNumber }src/js/number-util.js
addNumberͷϢχοτςετΛ࡞ΕΔΑ͏ʹ͠·͠ΐ͏
Ξαʔγϣϯ ʮ˓˓ʯʮxxʯͰ͋Δassert, chai,power-assertϑϨʔϜϫʔΫςετ࣮ߦ&ศརΩοτҰࣜMocha, Jasmineςετϥϯφʔ ϒϥβΛհͨ͠ςετ Karmaςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etcؔͷςετ -> ΞαʔγϣϯͱϑϨʔϜϫʔΫ
assert• ΞαʔγϣϯϥΠϒϥϦͷதͰҰ൪γϯϓϧ• assert.equal(num, 3, ‘ࣈ͕ਖ਼͍͠’)• deepEqual, throws• https://www.npmjs.com/package/assert
Mocha• ςετ࣮ߦίϚϯυmocha• ग़ྗܗࣜΓସ͑(ਓ༻, CI༻, etc)• describe, itʹΑΔςετͷάϧʔϐϯά• ͦͷଞςετศརΩοτҰࣜ
Πϯετʔϧ$ npm install assert$ npm install mocha
babelͷढറ$ npm install babel-preset-es2015$ npm install babel-register{"presets": ["es2015"]}.babelrc
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
ςετΛ࣮ߦ͢Δ$(npm bin)/mocha --require babel-register src/js/test/*.js
σϞ
ςετޭ
ςετࣦഊ
assertςετJS࣮JSmochaίϚϯυ ݁Ռग़ྗݱࡏͷςετڥmocha src/js/test/*.js
௨ৗͷؔͷϢχοτςετڥΛ࡞Ͱ͖ͨ
͍ΘΏΔModelͷςετ͜͜·ͰͷڥͰςετͰ͖Δ
DOMૢ࡞͢ΔػೳͷϢχοτςετ
DOMૢ࡞͢Δػೳ• Web։ൃΛ͍ͬͯΔͱDOMૢ࡞ආ͚ΒΕͳ͍• શϑΝΠϧςετͷͨΊɺ͜ͷΑ͏ͳ࣌ςετ͍ͨ͠
୯७ͳྫ: ϦετʹՃ͢Δػೳul = document.querySelector(‘.list’);appendList(ul, ‘ཁૉ1’);ཁૉ1
appendList(ul, ‘ཁૉ2’);ཁૉ1ཁૉ2ཁૉ1୯७ͳྫ: ϦετʹՃ͢Δػೳ
src/js/append-list.jsfunction appendList(ul, text) {let li = document.createElement('li');li.textContent = text;ul.appendChild(li);}export { appendList }
2ͭͷ՝• Ͳ͏ͬͯDOMૢ࡞Ͱ͖ΔϒϥβͰςετΛಈ͔͔͢• Ͳ͏ͬͯػೳΛ୯ମͰςετ͢Δ͔• ࣮ࡍͷHTMLΛ৴͢ΔαʔόʔΛΘͣʹ
Ͳ͏ͬͯDOMૢ࡞Ͱ͖ΔϒϥβͰςετΛಈ͔͔͢ςετϥϯφʔͷKarmaͰղܾ
Karma• CUIίϚϯυ͚ͩͰɺDOM APIͷ͋ΔϒϥβΛհͯ͠ςετ࣮ߦ• ϒϥβͰςετΛ͢ΔͨΊʹɺલॲཧͳͲͷػೳఏڙͯ͘͠ΕΔ
ग़ྗग़ྗग़ྗલॲཧςετJS ίϚϯυ࣮ߦ
KarmaΛͬͯaddNumberͷςετΛϒϥβͰಈ͔͠·͠ΐ͏branch: karmaPR#2
ࠓճChromeͰग़ྗग़ྗग़ྗલॲཧςετJS ίϚϯυ࣮ߦ
Πϯετʔϧ$ npm install karma$ npm install karma-browserify browserify babelify watchify$ npm install karma-chrome-launcher$ npm install karma-mocha
Πϯετʔϧ$ npm install karma$ npm install karma-browserify browserify babelify watchify$ npm install karma-chrome-launcher$ npm install karma-mochaલॲཧ༻ϒϥβͭͳ͗ࠐΈςετϑϨʔϜϫʔΫͭͳ͗ࠐΈ
ॳظઃఆ• $(npm bin)/karma init• ࣭ʹ͍͑ͯ͘ͱɺkarma.conf.js͕Ͱ͖Δ• karma.conf.jsΛฤू• ϑϨʔϜϫʔΫɺલॲཧɺϒϥβઃఆ
// ϑϨʔϜϫʔΫઃఆframeworks: ['mocha', 'browserify'],// ςετϑΝΠϧॴfiles: ['src/js/test/*.js'],karma.conf.js
// લॲཧઃఆpreprocessors: {'src/js/test/*.js': ['browserify']},browserify: {transform: ['babelify'],},// ར༻͢Δϒϥβઃఆbrowsers: ['Chrome'],
࣮ߦ͢Δ$(npm bin)/karma start
ςετΛϒϥβܦ༝Ͱಈ͔ͤͨ
2ͭͷ՝• Ͳ͏ͬͯDOM APIͷ͋ΔϒϥβͰςετΛಈ͔͔͢• Ͳ͏ͬͯػೳΛ୯ମͰςετ͢Δ͔• ࣮ࡍͷαʔόʔΛΘͣʹ
Ͳ͏ͬͯػೳΛ୯ମͰςετ͢Δ͔branch: dom-api-unit-testPR#3
ΞΠσΞ• ػೳʹඞཁͳ࠷খݶͷHTMLஅยΛಡΈࠐΉ• JSΛ࣮ߦ͠ͳ͕ΒɺHTMLߏͷมԽ͕ҙਤ௨Γ͔͔֬ΊΔ
ςετલʹ࠷খݶͷHTMLΛ༻ҙ
JSΛ࣮ߦͯ͠ςετul = document.querySelector(‘.list’);appendList(ul, ‘ཁૉ1’);ཁૉ1
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
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ςετલʹHTMLΛೖΕΔ
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.jsJSΛ࣮ߦ͠ཁૉΛ͔֬ΊΔ
DOMૢ࡞͢ΔػೳςετͰ͖ͨ
HTMLஅย͕ڊେͩͱςετ͕Ԛ͘…Ұ͚ͭͩ
document.body.innerHTML = 'id="modal-panel-open-buton">ϞʔμϧදࣔϘλϯϞʔμϧͷ༰Ϟʔμϧด͡ΔϘλϯbutton>';
HTMLஅย͕ڊେͩͱςετ͕Ԛ͘…karma-html2js-preprocessorҰ͚ͭͩ
karma-html2js-preprocessor• karmaͷલॲཧϓϥάΠϯ• HTMLஅยΛϑΝΠϧͰஔ͍͓ͯ͘ͱɺ؆୯ʹಡΈࠐΈͰ͖Δπʔϧ
Πϯετʔϧ$ npm install karma-html2js-preprocessor
// htmlՃfiles: ['src/js/test/*.js','src/js/test/*.html'],// લॲཧઃఆʹϓϥάΠϯՃpreprocessors: {'src/js/test/*.js': ['browserify'],'src/js/test/*.html': ['html2js']},karma.conf.js
src/js/test/append-list.html
document.body.innerHTML =__html__['src/js/test/append-list.html'];__html__[‘ϑΝΠϧ໊’]ͰಡΈࠐΊΔΑ͏ʹ
HTMLஅย͕େ͖ͯ͘ςετ͕Ԛ͘ͳΔ͜ͱ͕ͳ͘ͳͬͨ
௨ৗͷؔɺDOMૢ࡞ͷ͋ΔػೳςετΛ࡞ΕΔڥ͕ʂ࣮ߦkarma start͚ͩ
CIͰಈ͔͍ͨ͠• ϒϥβʹphantomjsjsdomΛ͏• jsdomnode͚ͩͰಈ͘ϔουϨεϒϥβ• --reportersͷࢦఆͰCI༻ͷग़ྗ͕Ͱ͖Δ
ςετJS࣮JSςετHTMLhtml2js࠷ऴߏkarma start
࠷ऴߏग़ྗग़ྗग़ྗhtml2js
·ͱΊ• ϢχοτςετڥΛҰ͔Βಋೖ͢Δํ๏• ௨ৗͷؔͷςετͳΒassert + MochaͰ
·ͱΊ• DOMૢ࡞͢ΔػೳͷςετͳΒɺKarma +HTMLஅยಡΈࠐΈͰ• timerɺajaxɺlocalStorageͳͲͷςετผͷػձʹ• 12/5ͷͯͳΤϯδχΞΞυϕϯτΧϨϯμʔͰॻ͖·͢
JSͷϢχοτςετڥҰ௨ΓἧͬͨͷͰ͋ͱ͍͖ͬͯ·͠ΐ͏ʂ
shibayu36
nyankotaro
newrelic2023
caori_t
kthrtty
moritamasami
yoshidashingo
eiki
kumamatsu
matyuda
shogo452
hiboma
.png){kind=avatar}
jisungbin
jponch
jensimmons
addyosmani
holman
chrislema
trishagee
edds
jasonvnalue
dougneiner
denniskardys
sferik
zakiwarfel