転職初っ端終了しました

FrontEnd Test Night - Fukuoka
山本勝也

Transcript

1. స৬ॳͬ୺ ऴྃ͠·ͨ͠ 3/5 FrontEnd Test Night - Fukuoka
2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Gridsome maintainer • ӳޠษڧத • ࠷ۙδϜߦ͖ͩ͠·ͨ͠
5. ஫ҙ • ͋͘·Ͱ๻ͷߟ͑Δςετʹ͍ͭͯͷ࿩ͳͷͰɺؒ ҧͬͯΔͱ͜Ζ͕͋Δ͔΋஌Εͳ͍Ͱ͢ɻ • ؒҧͬͯͨΒTwitterͰࢦఠͯ͠΄͍͠Ͱ͢ɻ • ࣗ෼͸͜͏ࢥ͏ͬͯײ૝΋͍ͩ͘͞
6. https://discord.gg/XSQ6c3X
7. ࠓ೔࿩͢͜ͱ • ςετͱͷग़ձ͍ • ςετͷΘ͔Βͳ͍Λղܾ͍ͯ͘͠աఔ
8. ςετͱͷ ࠷ॳͷग़ձ͍
9. ձࣾ
10. ձࣾ • JestΛ࢖༻ͨ͠Ϣχοτςετ • Vueͷίϯϙʔωϯτͱstoreͷςετ • ςετ͕௨Βͳ͔ͬͨΒTravisʹౖΒΕͯϓϧϦΫ͕ ҰੜϚʔδͰ͖ͳ͍
11. Ұੜ ϚʔδͰ͖ͳ͍
12. ౰࣌ͷ๻ͷεϖοΫ • WebσβΠφʔ͔ΒϑϩϯτΤϯυΤϯδχΞ΁ • CIʁ • ςετʁ • ΧόϨοδʁ • Ϛονϟʔʁ • ελϒʁ • ϞοΫʁ
13. ͓ɹΘɹΓ
14. ϦʔμʔʹఏҊ
15. ʮ͠͹Β͘ςετ͚ͩॻ͔ͤͯʯ
16. ʮ͏͍ʯ
17. ʮͪΐΖ͍ʯ
18. Θ͔Βͳ͍͜ͱΛ ϦετΞοϓ
19. େ͖͘෼͚Δͱ3ͭ • ͳͥςετΛॻ͘ͷ͔ • Ͳ͏΍ͬͯςετ͢Δͷ͔ • ԿΛςετ͢Δͷ͔
20. ͳͥςετΛॻ͘ͷ͔
21. ;ͱࢥ͏
22. ςετ͍ΒΜ͘ͳ͍ʁ
23. ςετͳͯ͘΋ಈ͘Α
24. ෼͔Δ
26. ςετίʔυʹ͸What Λॻ͜͏
27. ͜ͷίʔυ͸ԿʁΛઆ໌
28. ͿͬͪΌ͚
29. ͳͯ͘΋ಈ͘
30. ͚Ͳ
31. ͳ͍ͱίʔυʹແ੹೚
32. ͡Ό͋ඞཁͰ͢Ͷ☺
33. ͍Ζ͍Ζௐ΂ͨ • RSpecͷ࢖͍ํʢΑ͘ฉ͘ςετ͔ͩͬͨΒʣ • ςετͷख๏ʢTDDͱ͔BDDͱ͔ʣ • ςετͷछྨʢϢχοτςετͱ͔E2Eͱ͔ʣ
34. ͳͥςετΛॻ͘ͷ͔ • ػೳͷઆ໌ • मਖ਼Λ༰қʹ͢Δ
35. ػೳͷઆ໌
36. ػೳͷઆ໌ • ͦͷػೳ͸ԿΛظ଴ͯ͠ԿΛظ଴͍ͯ͠ͳ͍ͷ͔ • ػೳͷ࣮૷ऀ͸ͦͷػೳΛӬԕʹઆ໌Ͱ͖Δ͔ • ࣮૷ऀ͸ͦ΋ͦ΋ଆʹ͍Δͷ͔
37. मਖ਼Λ༰қʹ͢Δ
38. मਖ਼Λ༰қʹ͢Δ • ػೳΛมߋɺमਖ਼͢Δ৔߹ʹɺظ଴͢Δ݁Ռ͕ಘΒ ΕΔͷ͔อো͢Δ • ාͯ͘खΛՃ͑ΒΕͳ͍ͱ͍͏͜ͱ͔ΒಀΕΔ
39. Ͳ͏΍ͬͯςετ͢Δͷ͔
41. Jest • Facebook༷؅׋ • ͳΜͰ΋ཉுΓϋοϐʔηοτ • ͜Ε͑͞ೖΕΕ͹ςετ͕Ұ௨Γग़དྷΔʂ⚙ • snapshot΋ࡱΕͯDOMͷมߋ΋ݕ஌ʂ • ݱঢ়͜ΕҰ୒ • εϐʔυ͸஗͍͚Ͳ'ɹ˞ମײ
42. JestͰ΍ͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱ͸దٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ਺࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉ
43. JestͰ΍ͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱ͸దٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ਺࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉɹˡ͜Ε
44. ಡΜͰΈͯ • vue-test-utilsͱJest૊Έ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷ஋ΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔ਺͸ϞοΫʹ͓͚ͯ͠͹͍͍ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
45. ಡΜͰΈͯ • vue-test-utilsͱJest૊Έ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷ஋ΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔ਺͸ϞοΫʹ͓͚ͯ͠͹͍͍ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
46. ʮ͜Ε͋͛Δʯ
47. Wallaby.jsͷϥΠηϯε
48. ʮ͋ɺ͸͍ʯ
49. 3 days later ...
50. ʮWallaby࠷ˍߴʯ
51. ʮWallaby࠷ˍߴʯ
52. Wallaby.jsͷੌ͍ͱ͜Ζ • શϑΝΠϧ୳ࡧͯ͠ςετͯ͠ͳ͍ͱ͜Ζݟ͚ͭΔ • ϑΝΠϧ͝ͱͷΧόϨοδग़ͯ͘͠ΕΔ • Τϥʔग़ͯΔͱ͜Ζڭ͑ͯ͘ΕΔ • ΤϥʔՕॴͷৄࡉΛϩάʹग़ྗͯ͘͠ΕΔ • ϩά݁Ռ͕͙͢ӈʹग़Δ • ରԠ͕ૣ͍ • ϑϦʔϓϥϯ͸࠷ѱʢߪೖ࠵ଅˍ࠵ଅˍ࠵ଅʣ
53. ϩά݁Ռ͕͙͢ӈʹग़Δ
54. ϗόʔ͢Ε͹ৄࡉ֬ೝՄೳ
55. ςετ͕௨Ε͹྘৭
56. ςετ͕௨Βͳ͚Ε͹੺৭
58. ͦͷؒ ࣮ʹ30ඵͷग़དྷࣄ
59. Jest + Wallaby.js ͭΑͭΑͰ͋Δɻ ৄࡉ͸ͪ͜Β https://wallabyjs.com/
60. ԿΛςετ͢Δͷ͔
61. ςετ͕ॻ͚Δ؀ڥ
62. Ͱ͖ͨͱͯ͠
63. ͳʹΛςετ͢Δͷʁ
64. Jestͷ υΩϡϝϯτΛݟͯΔͱ ײͮ͘
65. ஋͕༧ظ͢Δ΋ͷ ஋͕༧ظ͠ͳ͍΋ͷ ΛϚονϟʔͰςετ
66. ͭ·Γ
67. ظ଴͢Δ஋ɺঢ়ଶ ظ଴͠ͳ͍஋ɺঢ়ଶ
68. ۩ମྫ • ؔ਺͸ظ଴ͨ͠ฦΓ஋Λฦͯ͘͠ΕΔͷ͔ • props΍state΍dataͷ஋ʹΑΔDOM͸༧ظͨ͠΋ͷ ͔ • storeͷstate͕actionͰมΘΔͷ͔ • mutation͢Δͱ͖ʹaction͸ݺ͹Ε͍ͯΔͷ͔ payload΋ಉ࣌ʹ౉ͯ͠Δͷ͔ • ϦϯΫΛԡͨ͠ΒͲͷϖʔδʹߦ͘ͷ͔
69. ۩ମྫ • Ҿ਺ʹ2Λ͔͚ͯ஋Λฦؔ͢਺࡞ͬͨΑ • Ҿ਺ʹ5ΛೖΕͨΒ10͕ฦΔͷ͔ • Ҿ਺ʹ-5ΛೖΕͨΒ-10͕ฦΔͷ͔ • Ҿ਺ʹ0ΛೖΕͨΒ0͕ฦΔͷ͔ • Ҿ਺͕਺ࣈҎ֎ͩͬͨΒError͕ฦΔͷ͔
70. ۩ମྫ • ϑΥʔϜͰsubmitͨ͠Β/completeʹඈͿΑ • submitͨ͠ΒURL͸/completeͳͷ͔ • /completeʹ͸τοϓʹ໭ΔϘλϯ͕͋Δ͔ • /completeͷτοϓʹ໭ΔϘλϯΛԡͨ͠ΒURL͸ /ʹͳ͍ͬͯΔͷ͔
71. ͜͏ͯ͠ ςετʹ͏Δ͍͞Ϛϯʹ ๻͸ͳ͍ͬͯͬͨ ʢ஌ࣝ͸·ͩઙ͍ͱࢥ͏ʣ
72. ۦ͚଍ʹͳ͚ͬͨͲ ·ͱΊ
73. ·ͱΊ • ͳͥςετΛ͢Δͷ͔ • ࣮૷ͷػೳΛอো͢Δ • Ͳ͏΍ͬͯςετΛ͢Δͷ͔ • JestͱWallaby࠷&ߴ • ԿΛςετ͢Δͷ͔ • ظ଴͢Δ஋ɺঢ়ଶ • ظ଴͠ͳ͍஋ɺঢ়ଶ
74. ͓ΘΓ