Testable JavaScript

Frontrend Vol4. @ 2013.02.09
テストしやすいJavaScriptについて

あとになってバグに悩まされるくらいなら、初めにテストを書いておいた方が開発スピードは速い。脱初心者を目指すならまずテストしやすいコード、そしてJavaScriptのテストとはどんなものなのかについて紹介していきます。

Transcript

2. by Yuya Saito JavaScript Testable ςετ͠΍͍͢JavaScript
3.  @cssradar
4. en.ja OSS https://github.com/enja-oss
5. @CyberAgent
6. Agenda ▪ςετ͠΍͍͢JavaScriptͱ͸ ▪ϢχοτςετπʔϧͱηοτΞοϓ
7. ςετ͠΍͍͢JavaScriptͱ͸ What is Testable JavaScript?
8. Test. Why? ͳͥςετ͕ඞཁͳͷ͔
9. JavaScript ʮຊ෺ʯ ͷϓϩάϥϛϯάݴޠ΁ਐԽΛ਱͛ͨ
10. Best Practices ‣ ΦϒδΣΫτࢦ޲JavaScript ‣ σβΠϯύλʔϯ ‣ MV*ߏ଄ ‣ Ϣχοτςετ
11. Question on Hacker News ςετͯ͠·͔͢ʁ
12. ςετ͸ॻ͍͍ͯͳ͍ɻ ͕ॻ͖͍ͨͱ͸ࢥ͍ͬͯΔɻ news.ycombinator.com/item?id=3702827
13. શ෦ͷػೳͰ͸ͳ͍͕ɺ ԿΒ͔ͷςετ͸ߦ͍ͬͯΔ news.ycombinator.com/item?id=3702827
14. Father of Test Driven Development(TDD) Kent Beck
15. I get paid for code that works, not for tests, so my philosophy is to test as little as possible to reach a given level of confidence […]. “ ” - Kent Beck on StackOverflow
16. ςετʹͰ͸ͳ͘ɺ ಈ࡞͢Δίʔυʹ͓ۚΛ ෷ͬͯ໯͍ͬͯΔͷ͔ͩΒɺ ҰఆϨϕϧͷ֬৴͕ಘΒΕΔ࠷খݶͷςετΛ ߦ͏͜ͱ͕ࢲͷϑΟϩιϑΟʔͩ<>ɻ “ ” - Kent Beck on StackOverflow
17. Then, Why?
18. ࠓಈ͍͍ͯΔͷ͔ͩΒͦΕͰ͍͍ ͸ɺ ΋͸΍ݱ࣮తͰ͸ͳ͍
19. ϦϑΝΫλϦϯάΛલఏͰߟ͑Δ “First draft of anything is shit.” - Ernest Hemingway
20. ϩδοΫʹ΋σβΠϯ͕͋Δ Ұ؏ੑͱ࣮֬ੑΛ࣋ͭϩδοΫʹ͸ςετ͕ඞਢ
21. Testing is a tool. Ͳ͏࢖͍͜ͳ͔͢͸ݸਓͷࣗ༝ɻ ্ख͘࢖͍͜ͳͤ͹༷ʑͳλεΫΛָʹͯ͘͠ΕΔ΋ͷɻ
22. Testable JavaScript ςετ͠΍͍͢JavaScriptͱ͸
23. What is Not testable? Not ςετͮ͠Β͍ίʔυͱ͸ͲΜͳ΋ͷͳͷ͔ɻ Ͳ͏ͯ͠ςετͮ͠Β͍ͷ͔ɻ
25. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ e.preventDefault(); var data = { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
26. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ var data = { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
27. $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success: function(data) { // Get data from the server } });
28. $.ajax({ type: 'POST', url: '/post/', data: data, dataType: 'json', success: function(data) { // Get data from the server } });
29. ᶃ
    jQueryͷreadyΠϕϯτ ᶄ
    #form-send-mockͷclickΠϕϯτ ᶅ
    ϑΥʔϜͷΠϯϓοτ͔ΒσʔλΛऔಘ ᶆ
    append()ʹΑΔDOMૢ࡞ ᶇ
    HTMLͷੜ੒ ᶈ
    ωοτϫʔΫIO ᶉ
    successͷωοτϫʔΫΠϕϯτ
30. ίʔυͷ໾ׂ෼୲͕ෳࡶͰɺ ίʔυͷ໾ׂ͕ີ઀ͳؔ܎Λ͍࣋ͬͯΔͱ ςετΛߦ͏͜ͱ͕೉͘͠ͳΔɻ
31. ςετΛॻ͘ͷ͕೉͍͠ɺ ͷͰ͸ͳ͘ɺ ςετΛ͍ͯ͠Δίʔυʹ໰୊͕͋Δͱ ߟ͑Δํ͕ࣗવɻ
32. Benefit of TDD ςετۦಈ։ൃͷར఺
33. ςετΛલఏͱͯ͠ίʔυΛॻ͘Ҏ্ɺ ςετͮ͠Β͍ίʔυΛॻ͘͜ͱ͸ෆՄೳɻ ͔͠͠ʜʜ
34. ςετʹ׳Εͳ͍͏ͪʹɺ ςετۦಈ։ൃΞϓϩʔνΛߦ͏ͷ͸ ೉͍͠ɻ
35. One of the Coolest things that will happen to you as a developer is you'd take the test first approach, you write a bunch of tests, you write a code that make the tests pass and you fire up the application and then it works.[…] so at least try testing first sometime to just experience that. “ ” - Rebecca Murphey at Full Frontal 2012
36. ςετϑΝʔετͷΞϓϩʔνΛͯ͠ɺ ͨ͘͞ΜͷςετΛॻ͖ɺ ͦͯͦ͠ͷςετΛ ΫϦΞ͢ΔίʔυΛॻ͘ɻ ͦͯ͠ΞϓϦέʔγϣϯΛ্ཱͪ͛Δͱɺ ͦΕ͕͖ͪΜͱಈ࡞͍ͯ͠Δɻ ͜Ε͸σϕϩούͱͯ͠࠷ߴʹΫʔϧͳ ॠؒͩɻ ͜ͷମݧΛ͢ΔͨΊ͚ͩͰ΋ ςετϑΝʔετʹ௅ઓͯ͠Έͯཉ͍͠ɻ “ ” - Rebecca Murphey at Full Frontal 2012
37. Test-Driven Refactoring ςετۦಈϦϑΝΫλϦϯά
38. ςετۦಈ։ൃ͸σβΠϯϓϩηε
39. ࣮ફςετۦಈ։ൃ
    ςετʹಋ͔Εͯ ΦϒδΣΫτࢦ޲ιϑτ΢ΣΞΛҭͯΔ by Steve Freeman, Nat Price www.amazon.co.jp/dp/4798124583
40. Starting with a test means that we have to describe what we what to achieve before we consider how. “ ” - Steve Freeman, Nat Price
41. ςετ͔Β࢝ΊΔͱ͍͏͜ͱ͸ɺ Ͳ͏΍ͬͯΛ ߟ͑Δલʹɺ ԿΛ͍ͨ͠ͷ͔Λઆ໌͠ͳ͚Ε͹ ͳΒͳ͍ͱ͍͏͜ͱͩɻ “ ” - Steve Freeman, Nat Price
42. $(document).ready(function() { $('#form-send-mock').on('click', function(e){ e.preventDefault(); var data = { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; $('#quotes').append( '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"><a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>' ); $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); }); });
43. Refactoring. How? ςετ͠΍͍͢JavaScript΁ͷ ϦϑΝΫλϦϯά
44. Architect Christopher Alexander
45. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such way that you can use this solution a million times over, without ever doing it the same way twice. “ ” - Christopher Alexandar
46. ύλʔϯͱ͸ͦΕͧΕզʑ͕ੜ͖͍ͯΔ؀ڥͷ தͰԿ౓΋܁Γฦ͠ൃੜ͢Δ໰୊Λઆ໌͢Δ ΋ͷͰ͋Γɺ ͦΕΒͷ໰୊ʹର͢ΔίΞͱͳΔ ղܾΛઆ໌͢Δ΋ͷͰ΋͋Γ·͢ɻ ίΞͱͳΔղܾͱ͸ͦͷղܾํ๏Λಉ͜͡ͱΛ ܁Γฦͣ͞ɺ ਺ඦສճͰ΋ར༻Ͱ͖Δ΋ͷͰ͢ɻ “ ” - Christopher Alexandar
47. Use Module Pattern Qunit and
48. var qof = { //͜ͷதʹίʔυΛهड़͍͖ͯ͠·͢ɻ };
49. var qof = { init: function() { // EPDVNFOU SFBEZ GVODUJPO
    \ʜ^ ͷத਎Λίϐʔ } };
50. test('Namespace', function() { equal(window.qof, true, 'Namespace is qof and public'); });
51. xͱΠϯϓοτͨ͠Βɺ y͕Ξ΢τϓοτ͞ΕΔ͔ʁ Unit Test is:
52. test()ؔ਺͸ୈҰҾ਺ʹςετ͢ΔϢχοτΛએݴ͠ɺ ୈೋҾ਺ͰίʔϧόοΫؔ਺Λ࣮ߦɻ equal()ؔ਺͸ΞαʔγϣϯAPIͷͭͰɺ ୈҰҾ਺ʹςετ͞ΕΔΦϒδΣΫτɺ ୈೋҾ਺ʹظ଴͢Δ݁Ռɺ ͦͯ͠ୈࡾҾ਺ʹϝοηʔδΛ౉͢ɻ
53. test('Namespace', function() { equal(window.qof, true, 'Namespace is qof and public'); });
54. test('Initialize', function() { equal(window.qof.init, true, 'Init method is ready to go'); });
55. test('User input values are good to go', function() { qof.init(); equal( qof.getData().quote, 'quote', 'quote is in #quote-text' ); equal( qof.getData().author, 'author', 'author is in #author' ); equal( qof.getData().url, 'url', 'url is in #source' ); });
56. ςετ݁Ռ
57. var qof = { init: function() { $('#form-send-mock').on('click', function(e){ var data = this.getData(); // লུ }); }, getData: function() { return { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; } }; var qof = { init: function() { $('#form-send-mock').on('click', function(e){ var data = this.getData(); // লུ }); }, getData: function() { return { 'quote': $('#quote-text').val(), 'author': $('#author').val(), 'url': $('#source').val() }; } };
58. Write programs that do one thing and do it well. - Doug McIlroy, Father of Unix “ ”
59. ୯Ұ੹೚ͷݪଇ Principles of OOP:
60. test('Generate HTML from input data', function() { expect(1); var html = qof.template(); var dummy = '<li>' + '<div class="quote">' + '<p class="text">' + 'quote'+ '</p>' + '<p class="meta">' + '<span class="author">' + '—' + 'author' + '</span>' + ' / ' + '<span class="source"><a href="url">ࢀরݩ</a> + '</span>' + '</p>' + '</div>' + '</li>'; equal( html, dummy, 'Templating is working' ); });
61. template: function() { var data = qof.getData(); var html = '<li>' + '<div class="quote">' + '<p class="text">' + data.quote + '</p>' + '<p class="meta">' + '<span class="author">' + '—' + data.author + '</span>' + ' / ' + '<span class="source"> + '<a href="' + data.url + '">ࢀরݩ</a></span>' + '</p>' + '</div>' + '</li>'; return html; }, render: function() { var html = qof.template(); $('#quotes').append(html); }
62. module( 'Templating', { setup: function() { $('#quote-text').val('quote'); $('#author').val('author'); $('#source').val('url'); }, teardown: function() { $('#quote-text').val(''); $('#author').val(''); $('#source').val(''); } } );
63. ϑΥʔϜ͔ΒσʔλΛऔಘ͠ ͦͷσʔλ͔ΒHTMLΛੜ੒͢Δ Business Logic:
64. github.com/studiomohawk/QOF
65. ςετπʔϧͱηοςΟϯά Tools & Settings
66. Tools for Testing Ϣχοτςετπʔϧ
67. Jasmine
68. pivotal.github.com/jasmine
69. Jasmine-standalone
70. ςετ݁Ռ: Jasmine
71. describe("Namespace", function() { it("should be qof", function() { expect(qof).to.exist; }); });
72. Qunit
73. qunitjs.com
74. ςετ݁Ռ: QUnit
75. test("Namespace", function() { ɹok(window.qof, 'Namespace is qof and public'); });
76. module("Module 1") test("some test", function() { //ςετΛهड़ }); module("Module 2") test("some test", function() { //ςετΛهड़ });
77. Mocha
78. visionmedia.github.com/mocha/
79. ςετ݁Ռ: Mocha
80. describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).to.be.true; }); });
81. Phantom.JS
82. phantomjs.org
83. github.com/studiomohawk/js-testing-boilerplates/wiki
84. Setup for Test Ϣχοτςετઃఆ
85. ςετͷࣗಈԽ Automation
86. ໘౗ͳ܁Γฦ͠ʹͳΔ͜ͱ͸ࣗಈԽ͠ɺ େࣄͳ͜ͱʹ࣌ؒΛׂ͚ΔΑ͏ʹ͢Δɻ ʰ ʱ
    
    ࠤ౻
    า
    at Frontrend Vol.3
87. gruntjs.com
88.  Grunt 0.4.x is BETA!
89. github.com/studiomohawk/js-testing-boilerplates
90. Test-flight the Test Ϣχοτςετʹ৮ΕͯΈΔ
91. JavaScript Koans JavaScriptΛֶͿͨΊͷެҊ
92. github.com/studiomohawk/javascript-koans
93. ϢχοτςετΛ࢖ͬͯ JavaScriptʹ͍ͭͯͷษڧ͕Ͱ͖Δ by David Laing (@mrdavidlaing)
94. 
    ·ͣ͸(JU)VC͔ΒϨϙδτϦΛΫϩʔϯ͠·͢ɻ 
    ຋༁ͷ͍ͭͰʹ(SVOUΛ࢖ͬͨࣗಈԽΛ࣮૷ͨ͠ 
    ϒϥϯνΛ࡞੒͠·ͨ͠ɻ git clone --branch=ja-koan-with-grunt git://github.com/studiomohawk/javascript- koans.git ~/Documents/learning-unit-test/javascript- koans
95. 
    Ϋϩʔϯͨ͠σΟϨΫτϦʹҠಈ͠·͢ɻ cd ~/Documents/learning-unit-test/javascript- koans 
    HSVOUΛ࣮ߦ grunt
96. 
    ϒϥ΢βʹͯҎԼΛ։͍͍ͯͩ͘͞ɻ 
    ίϚϯυϥΠϯʹ΋ςετ݁Ռ͸දࣔ͞Ε·͢ɻ 
    ͕ɺύε͠ͳ͍΋ͷ΋ؚΊͯ͢΂ͯදࣔ͞Εͯ͠·͏ͷͰ 
    ݟͮΒ͍Ͱ͢ɻ localhost:8000/KoansRunner.html
97. 
    ࠷ॳͷ໰୊͸koans/AboutExpects.jsϑΝΠϧ 
    ʹ͋Γ·͢ɻ 
    ͓࢖͍ͷΤσΟλͰϑΝΠϧΛ։͍ͯԼ͍͞ɻ mvim koans/AboutExpects.js
99. ·ͱΊ Final Words
100. ςετ͠΍͍͢JavaScriptͱ͸ What is Testable JavaScript? Recap
101. ςετ͠΍͍͢JavaScriptΛॻ͘ ʮΑΓΑ͍ίʔυʯΛॻͨ͘Ίͷ αϙʔτπʔϧ͕ςετ Recap
102. ϓϩάϥϜ΋σβΠϯ͢Δ΋ͷ ςετ͸໰୊ղܾ΁ͷΨΠυ Recap
103. ςετπʔϧͱηοςΟϯά Tools & Settings Recap
104. ·ͣ͸ςετΛॻ͍ͯΈΔॴ͔Β Ͳͷπʔϧʹ΋ಘҙͳ෦෼͕͋Γ ෆಘҙͳ෦෼͕͋Δ Recap
105. ࣗಈԽͷઃఆΛ͢Δ͜ͱ ؀ڥΛ੔͑ͯ͠·͑͹ ݴ͍༁͸ͮ͠Β͘ͳΔ Recap
106. Why do we fall, sir? So that we can learn to pick ourselves up. “ ” - Alfred Pennyworth from Batman Begins
107. Thank You!