unittest-frontend

https://yahoo-nagoya.connpass.com/event/137228/
ヤフー名古屋 Tech Meetup #3 - Webフロントエンドを支えるノウハウにて、登壇に使ったスライドです。

同じものをslides.comで公開していましたが一時的に不調のため、こちらにもアップしました。

Transcript

1. ΧΦεͳϢχοτςετ ͔Βͷ୤٫ 2019.08 Ϡϑʔ໊ݹ԰ TECH MEETUP #3 1
2. https://tech.quartetcom.co.jp/ גࣜձࣾΧϧςοτίϛϡχέʔγϣϯζͰ ಇ͍͍ͯ·͢ https://qiita.com • Sinon.JS ͰςετμϒϧΛཧղ͢Δ • Angular ίϯϙʔωϯτͷςετ • एऀΑϑϩϯτΤϯυΤϯδχΞΛ໨ࢦ͢ͳΒ୤K2VFSZΛ͠Α͏ • ͦͷίʔυɺ։ൃ؀ڥͱҟͳΔϒϥ΢βͰ΋ಈ࡞͠·͔͢ʁ @ringtail003 দԬ΍Α͍ 2
3. ϑϩϯτΤϯυΤϯδχΞ ืूͯ͠·͢ʂʢ੾࣮ʣ @ttskch ฐࣾ CTO ·Ͱ DM͍ͩ͘͞ 3
4. @ringtail003 @vvakame͞Μ @azu͞Μ @laco2net͞Μ @mizuchi͞Μ @Quramy͞Μ @yosuke_furukawa͞Μ @hiroppy͞Μ @okunokentaro͞Μ ීஈ͸͜ͷ͋ͨΓͷ৘ใΛΩϟονΞοϓͯ͠·͢ɻ 4
5. @vvakame͞Μ @azu͞Μ @laco2net͞Μ @mizuchi͞Μ @Quramy͞Μ @yosuke_furukawa͞Μ @hiroppy͞Μ @okunokentaro͞Μ @ringtail003 ීஈ͸͜ͷ͋ͨΓͷ৘ใΛΩϟονΞοϓͯ͠·͢ɻ 5
6. ͓ট͖͋Γ͕ͱ͏͍͟͝·͢ɻ 6
7. ɹݕࡧ Χϧςοτ Χϧςοτίϛϡχέʔγϣϯζ גࣜձࣾΧϧςοτ ΧϧςοτͲͬͱ͜Ή อଘ ✔ ✔ ͜ͷը໘ͷςετΛॻ͘ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 7
8. it (‘HTTP200ͷ࣌͸ݕࡧ݁ՌΛϦετදࣔ’, …); it (‘࠶ݕࡧ͕Ͱ͖Δ’, …); it (‘HTTP200ɺ2ճ໨͸HTTP400’, …); it (‘HTTP400ɺ2ճ໨͸HTTP500’, …); it (‘HTTP500ͷ࣌͸Τϥʔදࣔ’, …); it (‘HTTP200Ҏ֎Ͱ΋࠶ݕࡧͰ͖Δ’, …); it (‘HTTP403ͩͬͨΒ࠶ݕࡧͰ͖ͳ͍’, …); it (‘ݕࡧத͸ݕࡧΞΠίϯ͕͘Δ͘ΔճΔ’, …); … ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 8
9. ࠶ݕࡧͰHTTP500͕ฦΔ࣌ ΞΠίϯ͕͘Δ͘Δ͠ଓ͚Δ όά͕ग़ͨ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 9
10. it (‘HTTP200ͷ࣌͸ݕࡧ݁ՌΛϦετදࣔ’, …); it (‘࠶ݕࡧ͕Ͱ͖Δ’, …); it (‘HTTP200ɺ2ճ໨͸HTTP400’, …); it (‘HTTP400ɺ2ճ໨͸HTTP500’, …); it (‘HTTP500ͷ࣌͸Τϥʔදࣔ’, …); it (‘HTTP200Ҏ֎Ͱ΋࠶ݕࡧͰ͖Δ’, …); it (‘HTTP403ͩͬͨΒ࠶ݕࡧͰ͖ͳ͍’, …); it (‘ݕࡧத͸ݕࡧΞΠίϯ͕͘Δ͘ΔճΔ’, …); Ͳ͜ʹςετॻ͘ʁʁʁ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 10
11. ςετॻ͜͏ͱࢥͬͨΒ ॻ͚ͳ͔ͬͨ ໰୊ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 11
12. View Model ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ Controller ϨϯμϦϯά݁Ռ 12 ϏδωεϩδοΫ HTML ৼΔ෣͍ Action Data bind
13. it (‘HTTP500ͷ࣌’, () => { const SUT = new ComponentController(’foo’); … expect(SUT.hasError()).toBe(false)); }); it (‘HTTP200ͷ࣌’, () => { const SUT = compile(’<foo></foo>’); … expect(SUT.find(‘.error’).length).toBe(false)); }); HTTP500ͳΞΠίϯ͕ςετͰ͖ͳ͍ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 13
14. 400 403 400 403 200 400 403 200 400 403 γφϦΦͷύε͸͜Μͳʹͨ͘͞Μ ࠶ݕࡧ 200 ݕࡧ ࠶ݕࡧ ࠶ݕࡧ 200 ςετ͕͋Δ෦෼ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 14
15. ΞΠςϜબ୒ อଘ ը໘શମͩͱɺ΋ͬͱ૿͑Δ ΫϦΞ ݕࡧ ࠶ݕࡧ Ωϟϯηϧ ੒ޭ Τϥʔ ςετ͕͋Δ෦෼ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 15
16. ίϯϙʔωϯτͷࣄ৘͕ՃΘΔ ίϯτϩʔϥͷςετ ϨϯμϦϯά݁Ռͷςετ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 16 View Model Controller ϨϯμϦϯά݁Ռ Action Data bind
17. ΞΠςϜબ୒ อଘ ΧΦεͳςετ͕Ͱ͖͕͋Δ ΫϦΞ ݕࡧ ࠶ݕࡧ Ωϟϯηϧ ੒ޭ Τϥʔ ݕࡧ ίϯτϩʔϥͷςετ ϨϯμϦϯά݁Ռͷςετ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 17
18. ෛͷεύΠϥϧ ॻ͘৔ॴ ͕ͳ͍ ࠓඞཁͳ ςετΛ ௥Ճ ํ޲ੑΛ ࣦ͏ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 18
19. ίϯϙʔωϯτͷ ςετ͕ͭΒ͍ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 19
20. ΈΜͳςετʹۤ͠ΜͰ͍Δ େखݕࡧαΠτௐ΂ 800 ສਓ͕ۤ͠ΜͰ͍Δ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 20
21. ମܥΛֶͿ from ॻ੶ https://gihyo.jp/book/2011/978-4-7741-4733-8 ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 21
22. ώϯτΛಘΔ from GitHub https://github.com/tc39/test262 https://github.com/octokit/rest.js ໨త͕໌֬ ୳͠΍͍͢ ҟৗύλʔϯ΋ςετ ͕͢͞ tc39 ׬ᘳ͗ͯ͢Կ΋ݴ͑Ͷ͑ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 22
23. ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 23 վળϙΠϯτ̏ͭ
24. ஍ٿ஀ੜ͔Βݱࡏ·Ͱͷඵ਺ͱಉ͡ શύλʔϯςετ΍ͬͨΒ ஍ٿ͕໓ͼΔ ͦͷ̍ʣશύλʔϯ໢ཏ͸ແཧ νΣοΫϘοΫε͕57ݸ͋ͬͨ৔߹ 2ͷ57৐ʹ1.441151881E17 ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 24
25. ͦͷ̍ʣશύλʔϯ໢ཏ͸ແཧ 400 403 200 400 403 200 400 403 ࠶ݕࡧ 200 1εςʔτʹண໨͠Α͏ 403 ࠶ݕࡧ 200 ࠶ݕࡧ 400 ݕࡧ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 25
26. શମͷ͏ͪ 80% ͸ͦΕΛߏ੒͢Δ ཁૉͷ 20% ͕ੜΈग़͍ͯ͠Δ 20% ͦͷ̎ʣύϨʔτͷ๏ଇ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 26
27. ͦͷ̎ʣύϨʔτͷ๏ଇ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ όάͷग़΍͍͢Օॴʹண໨͠Α͏ 27 View Model Controller ϨϯμϦϯά݁Ռ Action Data bind
28. ͦͷ̏ʣ੔ཧ੔಴ ɾద౓ʹϑΝΠϧΛ෼ׂ ɾγϯλοΫεΛἧ͑Δ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 28
29. ͦͷ̏ʣ੔ཧ੔಴ ΞΠςϜબ୒ อଘ ΫϦΞ ݕࡧ ࠶ݕࡧ Ωϟϯηϧ ΞΠςϜબ୒ อଘ ΫϦΞ ݕࡧ Ωϟϯηϧ search .spec.js clear .spec.js items .spec.js save .spec.js cancel .spec.js ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ ద౓ʹ෼ׂ͠Α͏ 29
30. ϏϑΥʔ ɹΞϑλʔ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 30
31. Ϣχοτςετ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 31
32. describe (‘ݕࡧ’, () => { function setup { … } function assert { … } it (‘ύλʔϯ1’, () => { … } it (‘ύλʔϯ2’, () => { … } … }); ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 32
33. describe (‘ݕࡧ’, () => { function setup { … } function assert { … } it (‘ύλʔϯ1’, () => { … } it (‘ύλʔϯ2’, () => { … } … }); ؀ڥ࡞Γ୲౰ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 33
34. describe (‘ݕࡧ’, () => { function setup { … } function assert { … } it (‘ύλʔϯ1’, () => { … } it (‘ύλʔϯ2’, () => { … } … }); ݕূ୲౰ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 34
35. describe (‘ݕࡧ’, () => { function setup { … } function assert { … } it (‘ύλʔϯ1’, () => { … } it (‘ύλʔϯ2’, () => { … } … }); ྻڍ୲౰ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 35
36. function setup () => { spyOn( fooService ); const SUT = compile( ’<foo></foo>’ ); return SUT; } ϞοΫ ίϯύΠϧ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 36 ؀ڥ࡞Γ୲౰✋
37. function assert ( params, expected ) => { const SUT = setup(); SUT.find(‘button’).click(); fooService.return( params.foo ); expect(fooService.called).toBe( expected.called )); expect(SUT.find(‘foo’).length).toBe( expected.length )); } γφϦΦ ݕূ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 37 ݕূ୲౰✋
38. it (‘࣮਺ͷ࣌’, () => { assert( { foo: 1 }, { called: true, … } ); } it (‘nullͷ࣌’, () => { assert( { foo: null }, { called: false, … } ); } ύλʔϯ ύλʔϯ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 38 ྻڍ୲౰✋
39. ࢓༷ͷ਺͚ͩϢχοτςετΛ࡞Δ foo.html foo.js search.spec.js list.spec.js foo-component tests ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 39
40. function setup { … } function assert { … } it (‘ύλʔϯ1’, () => { … } it (‘ύλʔϯ2’, () => { … } … ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 40 ᶃςετΛ୳͢ ᶄγφϦΦΛཧղ ᶅύλʔϯΛ଍͢ ςετΛ௥Ճ͢Δ࣌ search.spec.js
41. ίϯϙʔωϯτ ࡞Δ͚ͩςετ ʢʹεϞʔΫςετʣ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 41
42. it (’foo-component’, () => { const SUT = compile(’<foo></foo>’); expect(SUT).toBeTruthy(); }); ੜଘ֬ೝ୲౰ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 42
43. εϞʔΫςετ͸ͻͱ͚ͭͩ foo.html foo.js search.spec.js list.spec.js smork-test.spec.js foo-component tests ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 43
44. ϞοΫͷϧʔϧ search.spec.js list.spec.js smork-test.spec.js tests ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 44 smork-test.spec.js Ϣχοτςετ εϞʔΫςετ ϞοΫΛ࢖͏ ࣮ମΛ࢖͏
45. ɾґଘ΍όΠϯυͷϛεʹؾ͚ͮΔ ɾߏ଄͕γϯϓϧ ɾҟৗύλʔϯ΋ྻڍͰ͖Δ ɾ࢓ࣄͷଟ͕͞෼͔Δ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 45
46. ͓ΘΓʹ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 46
47. ςετͬͯԿͷͨΊʹॻ͘ͷ͔ʁ ࣗ෼ͷͨΊ ɹʼϨϏϡΞʔ΍νʔϜͷͨΊ Ͳ͏ॻ͘ͷ͕ਖ਼ղ͔ʁ ΞϓϦʹΑΔ ɹʼώϯτΛूΊΔश׳Λ͚ͭΑ͏ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 47
48. ςετ͍͍ͬͯΑͶ ɾػೳͷ׬੒౓͕ߴ·Δ ɾόάൃݟ࣌ͷ͓खฑײ ͳͥΧΦεʹͳΔͷ͔ վળͷώϯτ ʼ վળޙͷίʔυ ʼ ͓ΘΓʹ ʼ 48
49. Έͳ͞·ɺ Α͖ςετϥΠϑΛʂ SOURCE CODE TEST CODE 49