転職初っ端終了しました

 転職初っ端終了しました

FrontEnd Test Night - Fukuoka
山本勝也

7a505b4e9b90548d96971b37dc07e761?s=128

Tyankatsu

March 05, 2019
Tweet

Transcript

  1. స৬ॳͬ୺ ऴྃ͠·ͨ͠ 3/5 FrontEnd Test Night - Fukuoka

  2. ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Gridsome maintainer

    • ӳޠษڧத • ࠷ۙδϜߦ͖ͩ͠·ͨ͠
  3. None
  4. None
  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. ෼͔Δ

  25. None
  26. ςετίʔυʹ͸What Λॻ͜͏

  27. ͜ͷίʔυ͸ԿʁΛઆ໌

  28. ͿͬͪΌ͚

  29. ͳͯ͘΋ಈ͘

  30. ͚Ͳ

  31. ͳ͍ͱίʔυʹແ੹೚

  32. ͡Ό͋ඞཁͰ͢Ͷ☺

  33. ͍Ζ͍Ζௐ΂ͨ • RSpecͷ࢖͍ํʢΑ͘ฉ͘ςετ͔ͩͬͨΒʣ • ςετͷख๏ʢTDDͱ͔BDDͱ͔ʣ • ςετͷछྨʢϢχοτςετͱ͔E2Eͱ͔ʣ

  34. ͳͥςετΛॻ͘ͷ͔ • ػೳͷઆ໌ • मਖ਼Λ༰қʹ͢Δ

  35. ػೳͷઆ໌

  36. ػೳͷઆ໌ • ͦͷػೳ͸ԿΛظ଴ͯ͠ԿΛظ଴͍ͯ͠ͳ͍ͷ͔ • ػೳͷ࣮૷ऀ͸ͦͷػೳΛӬԕʹઆ໌Ͱ͖Δ͔ • ࣮૷ऀ͸ͦ΋ͦ΋ଆʹ͍Δͷ͔

  37. मਖ਼Λ༰қʹ͢Δ

  38. मਖ਼Λ༰қʹ͢Δ • ػೳΛมߋɺमਖ਼͢Δ৔߹ʹɺظ଴͢Δ݁Ռ͕ಘΒ ΕΔͷ͔อো͢Δ • ාͯ͘खΛՃ͑ΒΕͳ͍ͱ͍͏͜ͱ͔ΒಀΕΔ

  39. Ͳ͏΍ͬͯςετ͢Δͷ͔

  40. None
  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. ςετ͕௨Βͳ͚Ε͹੺৭

  57. None
  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. ͓ΘΓ