チームで取り組みテスト改善のあゆみ

Transcript

1. νʔϜͰऔΓ૊Ήςετվળͷ
   ͋ΏΈ
   2021.09.08 Wed. Midas Tech Study #2
   @negiandlee
   k
   
   SmartHR ϓϩμΫτΤϯδχΞ
   

   View Slide

2. ࠜ؛ ༐໻
   SmartHR ϓϩμΫτΤϯδχΞ
   ʗSmartHR ຊମʗओʹWebϑϩϯτΤϯυʢReact + TypeScriptʣ
   ● 2020೥9݄SmartHRೖࣾ
   ● SmartHRຊମͰݱࡏ͸ओʹ༧໿ػೳͷ։ൃΛߦͳ͍ͬͯΔ
   ● ւ͕޷͖ͳͷͰւ͕͍ۙͱ͜ΖʹҾͬӽͨ͠
   @negiandleek
   

   View Slide

3. View Slide

4. લఏ
   

   View Slide

5. - νʔϜߏ੒
   - ΤϯδχΞ5ਓ
   - ϑϩϯτΤϯυ1ਓ
   - όοΫΤϯυ4ਓ
   - QA1ਓ
   - ։ൃ͸LeSS(εΫϥϜͷେ͖͍൛)ͷϑϩʔʹԊͬͯΔ
   - εϓϦϯτظؒ͸1िؒ
   ։ൃମ੎ 🏢
   

   View Slide

6. Ұिؒͷ͍͍ͩͨͷྲྀΕ 📅
   ਫ ໦ ۚ ݄ Ր
   ޕલ
   ੒Ռ෺ͷ
   ϨϏϡʔ
   ࣮૷
   ࣮૷2"
   2"
   ޕޙ ܭը 2"
   

   View Slide

7. - SmartHRຊମʹϑϩϯτΤϯυͷνʔϜ͕ൃ଍͞Εͨͷ͕໿Ұ೥લ
   - όοΫΤϯυଆʹϏδωεϩδοΫ͕ଟ͍
   - E2E(RSpec ͱCapybaraͰߏ੒͞Ε͍ͯΔςετ)͸ॻ͔Ε͍ͯΔ
   - όοΫΤϯυଆͷࣗಈςετ(Controller, Model, Request౳)͸݁
   ߏॻ͔ΕͯΔ
   ݱঢ়ͷςετ
   *ϓϥεΞϓϦͰ͸ϑϩϯτΤϯυͷνʔϜ͸΋ͬͱૣ͔͘Β݁੒͞Ε͍ͯ·͢
   

   View Slide

8. - ෼ղ͢Δͱ…?
   ?
   
   - ςετ؍఺(ςετέʔε)ͷચ͍ग़͠
   - ςετ࣮ࢪ
   QAͷλεΫΛ੔ཧ͢Δ
   

   View Slide

9. ՝୊
   

   View Slide

10. ՝୊
    ࣮૷ޙͷQAෛՙ͕ߴ͘ͳΓ͕ͪ😭
    

    View Slide

11. - QAͷϦιʔε໰୊
    - ։ൃऀ:QA=5:
    1
    
    - ݄ͱՐʹQAλεΫ͕ଟ͘ൃੜ͢Δ
    - ςετઓུ͕ͳ͔ͬͨ
    - ࣗಈςετͱϚχϡΞϧςετͰॏෳͯ͠ΔՕॴ͕͋Δ
    - ࣗಈςετ͕଍Γͯͳ͍͜ͱ΋ଟʑ
    ՝୊ͷৄࡉ
    *νʔϜᴈ໌ظͩͬͨͷͰ՝୊͸΄͔ʹ΋΋Ζ΋Ζ͋ͬͨ…
    

    View Slide

12. - QAͷϦιʔε໰୊
    - QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔஌Βͣʹ͍Δ
    - QAͷλεΫ͸1िؒͷ͏ͪɺޙ൒ʹ͞ΒʹภΔ
    - ςετઓུ͕ͳ͔ͬͨ
    ՝୊ͷ෼ੳ
    

    View Slide

13. - QAͷϦιʔε໰୊
    - QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔஌Βͣʹ͍Δͨ
    Ίɺςετ࣮ࢪͷ࣌ؒͷख͕ؒ૿͍͑ͯΔ
    - ͦͷͨΊɺQAͷλεΫ͸1िؒͷ͏ͪɺޙ൒ʹ͞ΒʹภΔ
    - ςετઓུ͕ͳ͔ͬͨ
    ՝୊ͷ෼ੳ
    QAͱΤϯδχΞͰ
    ςετ؍఺ʹ͍ͭͯڞ༗ͨ͠ΒղܾͰ͖ͦ͏🤔
    

    View Slide

14. ςετ؍఺ͷચ͍ग़͠ΛQAͱΤϯδχΞͰߦ͏
    ←ཁૉͱঢ়ଶΛચ͍ग़ͯ͠ɺ
    ←ͦΕΒΛ૊Έ߹Θͤͯɺςετ؍఺Λग़͢
    

    View Slide

15. ࣗಈςετ΁ͷৼΓ෼͚ΛQAͱΤϯδχΞͰߦ͏
    ←ࣗಈςετͰ୲อ͢Δ΋ͷͱɺ
    ←ϚχϡΞϧςετͰߦ͏΋ͷΛ
    ɹ͸͖ͬΓͤ͞Δ
    

    View Slide

16. ݁Ռ🎉
    - ϚχϡΞϧςετͷςετ࣮ࢪΛ࠷খݶͰߦ͑Δ
    - ςετ؍఺ग़͠ΛQAͱΤϯδχΞͰߦ͍ɺࣗಈςετʹৼΓ෼͚ͯ
    ͍ΔͷͰ৴པੑ͕ΑΓߴ͘ͳΔ
    - ΤϯδχΞ͚ͩͰߦ͏ΑΓ΋ɺ҆৺ײ͕͋Δ
    *QAࢹ఺ͷ͓࿩͸ҎԼͷςοΫϒϩάʹৄ͘͠ॻ͍ͯ͋Γ·͢
    https://tech.smarthr.jp/entry/2021/08/27/171310
    

    View Slide

17. - QAͷϦιʔε໰୊
    - ςετઓུ͕ͳ͔ͬͨ
    - ΤϯδχΞͱQAͰڞ௨ͷೝࣝΛ࣋ͯͯͳ͍
    - ϑϩϯτΤϯυͷUIςετ΋ԿΛ΍Δͷ͔ܾ·ͬͯͳ͔ͬͨ
    ՝୊ͷ෼ੳ
    

    View Slide

18. ςετઓུ͕ඞཁͳͷ͔νʔϜͰ࿩͠߹ͬͨ
    - ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
    - ςετ࣮ࢪͷίετΛݮΒͤΔ
    - ࣗಈςετΛ৴པੑΛΑΓߴ͍΋ͷʹ͍ͯ͘͠
    - ςετํ਑͕໌֬Ͱͳ͍ͱɺςετ؍఺(ςετέʔε)͕ϒϨΔ
    

    View Slide

19. ςετઓུ͕ඞཁͳͷ͔νʔϜͰ࿩͠߹ͬͨ
    - ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
    - ςετ࣮ࢪͷίετΛݮΒͤΔ
    - ࣗಈςετΛ৴པੑΛΑΓߴ͍΋ͷʹ͍ͯ͘͠
    - ςετํ਑͕໌֬Ͱͳ͍ͱɺςετ؍఺(ςετέʔε)͕ϒϨΔ
    

    View Slide

20. ςετઓུ͕ඞཁͳͷ͔νʔϜͰ࿩͠߹ͬͨ
    - ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
    - ςετ࣮ࢪͷίετΛݮΒͤΔ
    - ࣗಈςετΛ৴པੑΛΑΓߴ͍΋ͷʹ͍ͯ͘͠
    - ςετํ਑͕໌֬Ͱͳ͍ͱɺςετ؍఺(ςετέʔε)͕ϒϨΔ
    

    View Slide

21. ςετઓུ͕ඞཁͳͷ͔νʔϜͰ࿩͠߹ͬͨ
    - ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
    - ςετ࣮ࢪͷίετΛݮΒͤΔ
    - ࣗಈςετΛ৴པੑΛΑΓߴ͍΋ͷʹ͍ͯ͘͠
    - ςετํ਑͕໌֬Ͱͳ͍ͱɺςετ؍఺(ςετέʔε)͕ϒϨΔ
    ೦ͷҝ
    
    ཧ૝ͱݱঢ়ͷΪϟοϓʹؾͮ͘😭
    

    View Slide

22. ݱঢ়ͷςετϐϥϛου
    - ϑϩϯτΤϯυͷUIςετ͸ϚχϡΞϧςετ
    ͱE2Eςετ
    - ςετ؍఺ΛࣗಈςετʹৼΓ෼͚ΔΑ͏ʹͳ
    Γࣗಈςετͷίετ͕૿͑ͨ
    Ҿ༻:alisterbscott.com
    

    View Slide

23. ݱঢ়ͷςετϐϥϛου
    - ϑϩϯτΤϯυͷUIςετ͸ϚχϡΞϧςετ
    ͱE2Eςετ
    - ςετ؍఺ΛࣗಈςετʹৼΓ෼͚ΔΑ͏ʹͳ
    Γࣗಈςετͷίετ͕૿͑ͨ
    Ҿ༻:alisterbscott.com
    

    View Slide

24. ݱঢ়ͷςετϐϥϛου
    - ϑϩϯτΤϯυͷUIςετ͸ϚχϡΞϧςετ
    ͱE2Eςετ
    - ςετ؍఺ΛࣗಈςετʹৼΓ෼͚ΔΑ͏ʹͳ
    Γࣗಈςετͷίετ͕૿͑ͨ
    Ҿ༻:alisterbscott.com
    

    View Slide

25. ཧ૝ͷςετϐϥϛουʹ͚ۙͮΔ
    - E2EͷίετΛԼ͛ΔͨΊʹɺJest Integration Test
    Λಋೖͨ͠
    - ϖʔδΛؙ͝ͱϨϯμϦϯά͢Δςετ
    - E2EͱॏͳΔ෦෼΋͋ΔͷͰɺϧʔϧΛ໌֬ʹ
    ͠ɺ࢖͍΍͍͢؀ڥʹͨ͠
    Ҿ༻:alisterbscott.com
    Ҿ༻:testingjavascript.com
    

    View Slide

26. Jest Integration Testͷ؀ڥ੔උ
    - JestͱReact Testing Librar
    y
    
    - MSW(Mock Service Worker)ͷಋೖ
    - Browser/Node྆ํͰ࢖͑Δ
    - APIͷ࣮૷଴ͪ΋ͳ͘ͳΔͳͲͷϝϦοτ΋͋Δ
    - એݴతʹఆٛͰ͖ΔͷͰ࢖͍΍͍͢
    

    View Slide

27. ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTU
    ͷ؀ڥ੔උ
    ←Node؀ڥ
    ↓Browser؀ڥ
    

    View Slide

28. ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTU
    ͷ؀ڥ੔උ
    ↑Mock
    αϯϓϧˠ
    

    View Slide

29. Jest Integration TestͱE2EͱϚχϡΞϧςετͷͲΕͰ୲
    อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

30. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - First Fetch(ϖʔδͷॳճදࣔ)Ͱ׬݁͢Δ΋ͷ͸Jest Integration Tes
    t
    
    - ύλʔϯ͕ෳ਺͋Δ৔߹͸ɺϋοϐʔύεΛE2EͰߦ͍ɺ࢒ΓͷόϦΤʔγϣϯ͸Jest
    Ͱ୲อ͢Δ
    - Ϣʔβʔૢ࡞͕൐͏͕ɺRequest͕ൃੜ͠ͳ͍΋ͷ͸Jest Integration Tes
    t
    
    - όϦσʔγϣϯ΍ϘλϯͷDisabledଐੑ
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL)
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

31. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - First Fetch(ϖʔδͷॳճදࣔ)Ͱ׬݁͢Δ΋ͷ͸Jest Integration Tes
    t
    
    - ύλʔϯ͕ෳ਺͋Δ৔߹͸ɺϋοϐʔύεΛE2EͰߦ͍ɺ࢒ΓͷόϦΤʔγϣϯ͸Jest
    Ͱ୲อ͢Δ
    - Ϣʔβʔૢ࡞͕൐͏͕ɺRequest͕ൃੜ͠ͳ͍΋ͷ͸Jest Integration Tes
    t
    
    - όϦσʔγϣϯ΍ϘλϯͷDisabledଐੑ
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

32. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - First Fetch(ϖʔδͷॳճදࣔ)Ͱ׬݁͢Δ΋ͷ͸Jest Integration Tes
    t
    
    - ύλʔϯ͕ෳ਺͋Δ৔߹͸ɺϋοϐʔύεΛE2EͰߦ͍ɺ࢒ΓͷόϦΤʔγϣϯ͸Jest
    Ͱ୲อ͢Δ
    - Ϣʔβʔૢ࡞͕൐͏͕ɺRequest͕ൃੜ͠ͳ͍΋ͷ͸Jest Integration Tes
    t
    
    - όϦσʔγϣϯ΍ϘλϯͷDisabledଐੑ
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

33. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - First Fetch(ϖʔδͷॳճදࣔ)Ͱ׬݁͢Δ΋ͷ͸Jest Integration Tes
    t
    
    

    View Slide

34. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Ϣʔβʔૢ࡞͕൐͏͕ɺRequest͕ൃੜ͠ͳ͍΋ͷ͸Jest Integration Tes
    t
    
    

    View Slide

35. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - 400ܥ
    - E2EͰग़དྷͳ͍΋ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
    )
    
    - APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
    - ϦϑΝΫλϦϯά౳͢ΔͷͰ͋Ε͹͋ͬͨํ͕҆৺
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

36. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - 400ܥ
    - E2EͰग़དྷͳ͍΋ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
    )
    
    - APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
    - ϦϑΝΫλϦϯά౳͢ΔͷͰ͋Ε͹͋ͬͨํ͕҆৺
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

37. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - 400ܥ
    - E2EͰग़དྷͳ͍΋ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
    )
    
    - APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
    - ϦϑΝΫλϦϯά౳͢ΔͷͰ͋Ε͹͋ͬͨํ͕҆৺
    - E2
    E
    
    - ϚχϡΞϧςετ
    

    View Slide

38. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - 400ܥ
    

    View Slide

39. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - APIΛୟ͍ͨ࣌ͷRequest Body΍Query ParameterͳͲͷΞαʔγϣϯ
    

    View Slide

40. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - E2
    E
    
    - ਖ਼ৗܥ
    - Mutationܥ(Post, Patch, Delete
    )
    
    - ੍ޚܥ(ݖݶ΍ೝূͳͲ
    )
    
    - ϚχϡΞϧςετ
    

    View Slide

41. +FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
    - Jest Integration Test Ͱ΍ͬͨํ͕͍͍ςετ(RECOMMEND
    )
    
    - Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
    )
    
    - E2
    E
    
    - ϚχϡΞϧςετ
    - Ұ෦ਖ਼ৗܥͱɺσβΠϯपΓ
    - ΠϨΪϡϥʔܥ(ෳ਺λϒ)΍όοΫάϥ΢ϯυॲཧͷ݁ՌͳͲ
    

    View Slide

42. ݁Ռ🎉
    - ϑϩϯτΤϯυͷςετΛ௥Ճͯ͠ςετϐϥϛοτͷॏ৺͕Լ͕
    Γɺࣗಈςετͷίετ͕গ͠ݮͬͨ
    - ςετέʔε͕૿͑ͨɺΑΓ৴པੑ͕ߴ·Δ
    - ෭࣍తʹόοΫΤϯυͷAPI࣮૷଴͕ͪݮͬͨ
    

    View Slide

43. ·ͱΊ
    

    View Slide

44. ·ͱΊ🎉
    - ҆ఆ࣮ͯ͠૷ʙQA·ͰऴΘΔΑ͏ʹͳͬͨ
    - ࣗಈςετͷ৴པੑ͕ߴ·Γ҆৺ͯ͠ϑϩϯτΤϯυͷ։ൃ΋Ͱ͖Δ
    - ࣮૷ʙϦϦʔε·Ͱૣ͘ͳͬͨ
    - QAͷྗ΋େ͖͍ͷͰڠಇ͍ͯ͘͜͠ͱ͕େ੾
    - ࣗಈςετͷ৴པੑ΋ߴ·ΓɺϚχϡΞϧςετ΋࠷খݶͰߦ͑Δ
    

    View Slide

45. ՝୊ɾ΍͍͖͍ͬͯͨ͜ͱ💪
    - ςετ؍఺ग़͔͠ΒɺৼΓ෼͚Δ·Ͱ͔ͳΓ͔͔࣌ؒΔ
    - QAతͳ͜ͱΛΤϯδχΞ΋΍ΔͷͰɺ࡞ۀ࣌ؒݮΔ
    - Jest Integration Test͕΄ͱΜͲ଍Γͯͳ͍
    - ΤϯδχΞશମΛר͖ࠐΜͰ͍͘ඞཁ͕͋Δ
    

    View Slide

46. 🙏
    https://hello-world.smarthr.co.jp
    /
    
    ϑϩϯτΤϯυΤϯδχΞੵۃ࠾༻த…ʂʂ
    

    View Slide