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

Transcript

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

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

3. ͷJS؀ڥ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18. ʮJavaScript ςετʯ

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

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

21. ໾ׂ͝ͱʹ੔ཧ͠Α͏

22. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc

23. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ಉҰ໾ׂͷ΋ͷ͸࠷େ̍ͭͣͭ

24. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc πʔϧ͸ඞཁͳ΋ͷΛਵ࣌

25. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc

26. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc

27. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc

28. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ຊൃදͰ͸͜ͷࡾͭΛબ୒

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

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

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

32. ςετ͍࣮ͨ͠૷ function addNumber(num1, num2) { return num1 + num2; }

    export { addNumber } src/js/number-util.js

33. addNumberͷϢχοτςετΛ ࡞ΕΔΑ͏ʹ͠·͠ΐ͏

34. Ξαʔγϣϯ ʮ˓˓ʯ͸ʮxxʯͰ͋Δ assert, chai, power-assert ϑϨʔϜϫʔΫ ςετ࣮ߦ& ศརΩοτҰࣜ Mocha, Jasmine

    ςετϥϯφʔ ϒϥ΢βΛհͨ͠ςετ Karma ςετπʔϧ ༻్ʹԠͯ͡ Sinon.js, etc ؔ਺ͷςετ -> ΞαʔγϣϯͱϑϨʔϜϫʔΫ

35. assert • ΞαʔγϣϯϥΠϒϥϦͷதͰҰ൪γϯϓϧ • assert.equal(num, 3, ‘਺ࣈ͕ਖ਼͍͠’) • deepEqual, throws

    • https://www.npmjs.com/package/assert

36. Mocha • ςετ࣮ߦίϚϯυmocha • ग़ྗܗࣜ੾Γସ͑(ਓ༻, CI༻, etc) • describe, itʹΑΔςετͷάϧʔϐϯά

    • ͦͷଞςετศརΩοτҰࣜ

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

38. babelͷढറ $ npm install babel-preset-es2015 $ npm install babel-register {

    "presets": ["es2015"] } .babelrc

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

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

41. σϞ

42. ςετ੒ޭ

43. ςετࣦഊ

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

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

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

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

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

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

50. ୯७ͳྫ: Ϧετʹ௥Ճ͢Δػೳ <ul class=“list”> </ul> ul = document.querySelector(‘.list’); appendList(ul, ‘ཁૉ1’);

    <ul class=“list”> <li>ཁૉ1</li> </ul>

51. appendList(ul, ‘ཁૉ2’); <ul class=“list”> <li>ཁૉ1</li> <li>ཁૉ2</li> </ul> <ul class=“list”> <li>ཁૉ1</li>

    </ul> ୯७ͳྫ: Ϧετʹ௥Ճ͢Δػೳ

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

    = text; ul.appendChild(li); } export { appendList }

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

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

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

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

57. ग़ྗ ग़ྗ ग़ྗ લॲཧ ςετJS ίϚϯυ ࣮ߦ

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

59. ࠓճ͸ChromeͰ ग़ྗ ग़ྗ ग़ྗ લॲཧ ςετJS ίϚϯυ ࣮ߦ

60. Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify

    babelify watchify $ npm install karma-chrome-launcher $ npm install karma-mocha

61. Πϯετʔϧ $ npm install karma $ npm install karma-browserify browserify

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

62. ॳظઃఆ • $(npm bin)/karma init • ࣭໰ʹ౴͍͑ͯ͘ͱɺkarma.conf.js͕Ͱ͖Δ • karma.conf.jsΛฤू •

    ϑϨʔϜϫʔΫɺલॲཧɺϒϥ΢βઃఆ

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

    ], karma.conf.js

64. // લॲཧઃఆ preprocessors: { 'src/js/test/*.js': ['browserify'] }, browserify: { transform:

    ['babelify'], }, // ར༻͢Δϒϥ΢βઃఆ browsers: ['Chrome'],

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

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

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

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

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

70. ςετલʹ࠷খݶͷHTMLΛ༻ҙ <html><body> <ul class=“list”></ul> </body></html>

71. JSΛ࣮ߦͯ͠ςετ <html><body> <ul class=“list”></ul> </body></html> ul = document.querySelector(‘.list’); appendList(ul, ‘ཁૉ1’);

    <html><body> <ul class=“list”> <li>ཁૉ1</li> </ul> </body></html>

72. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; 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

73. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; 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ΛೖΕΔ

74. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; 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 JSΛ࣮ߦ͠ཁૉΛ͔֬ΊΔ

75. import assert from 'assert'; import { appendList } from '../append-list';

    document.body.innerHTML = '<ul class="list"></ul>'; 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

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

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

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

79. document.body.innerHTML = '<button id="modal-panel-open-buton">ϞʔμϧදࣔϘ λϯ</button><div class="modal- container"><div class="model-panel">Ϟʔμ ϧͷ಺༰<button>Ϟʔμϧด͡ΔϘλϯ</ button></div></div>';

80. document.body.innerHTML = '<button id="modal-panel-open-buton">ϞʔμϧදࣔϘ λϯ</button><div class="modal- container"><div class="model-panel">Ϟʔμ ϧͷ಺༰<button>Ϟʔμϧด͡ΔϘλϯ</ button></div></div>';

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

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

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

84. // html΋௥Ճ files: [ 'src/js/test/*.js', 'src/js/test/*.html' ], // લॲཧઃఆʹϓϥάΠϯ௥Ճ preprocessors:

    { 'src/js/test/*.js': ['browserify'], 'src/js/test/*.html': ['html2js'] }, karma.conf.js

85. <ul class="list"> </ul> src/js/test/append-list.html

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

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

88. σϞ

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

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

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

92. ࠷ऴߏ੒ ग़ྗ ग़ྗ ग़ྗ html2js

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

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

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