$30 off During Our Annual Pro Sale. View Details »

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

negiandleek
September 08, 2021

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

negiandleek

September 08, 2021
Tweet

More Decks by negiandleek

Other Decks in Programming

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