Slide 1
Slide 1 text
νʔϜͰऔΓΉςετվળͷ
͋ΏΈ
2021.09.08 Wed. Midas Tech Study #2
@negiandlee
k
SmartHR ϓϩμΫτΤϯδχΞ
Slide 2
Slide 2 text
ࠜ؛ ༐
SmartHR ϓϩμΫτΤϯδχΞ
ʗSmartHR ຊମʗओʹWebϑϩϯτΤϯυʢReact + TypeScriptʣ
● 20209݄SmartHRೖࣾ
● SmartHRຊମͰݱࡏओʹ༧ػೳͷ։ൃΛߦͳ͍ͬͯΔ
● ւ͕͖ͳͷͰւ͕͍ۙͱ͜ΖʹҾͬӽͨ͠
@negiandleek
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
લఏ
Slide 5
Slide 5 text
- νʔϜߏ
- ΤϯδχΞ5ਓ
- ϑϩϯτΤϯυ1ਓ
- όοΫΤϯυ4ਓ
- QA1ਓ
- ։ൃLeSS(εΫϥϜͷେ͖͍൛)ͷϑϩʔʹԊͬͯΔ
- εϓϦϯτظؒ1िؒ
։ൃମ 🏢
Slide 6
Slide 6 text
Ұिؒͷ͍͍ͩͨͷྲྀΕ 📅
ਫ ۚ ݄ Ր
ޕલ
Ռͷ
ϨϏϡʔ
࣮
࣮2"
2"
ޕޙ ܭը 2"
Slide 7
Slide 7 text
- SmartHRຊମʹϑϩϯτΤϯυͷνʔϜ͕ൃ͞Εͨͷ͕Ұલ
- όοΫΤϯυଆʹϏδωεϩδοΫ͕ଟ͍
- E2E(RSpec ͱCapybaraͰߏ͞Ε͍ͯΔςετ)ॻ͔Ε͍ͯΔ
- όοΫΤϯυଆͷࣗಈςετ(Controller, Model, Request)݁
ߏॻ͔ΕͯΔ
ݱঢ়ͷςετ
*ϓϥεΞϓϦͰϑϩϯτΤϯυͷνʔϜͬͱૣ͔͘Β݁͞Ε͍ͯ·͢
Slide 8
Slide 8 text
- ղ͢Δͱ…?
?
- ςετ؍(ςετέʔε)ͷચ͍ग़͠
- ςετ࣮ࢪ
QAͷλεΫΛཧ͢Δ
Slide 9
Slide 9 text
՝
Slide 10
Slide 10 text
՝
࣮ޙͷQAෛՙ͕ߴ͘ͳΓ͕ͪ😭
Slide 11
Slide 11 text
- QAͷϦιʔε
- ։ൃऀ:QA=5:
1
- ݄ͱՐʹQAλεΫ͕ଟ͘ൃੜ͢Δ
- ςετઓུ͕ͳ͔ͬͨ
- ࣗಈςετͱϚχϡΞϧςετͰॏෳͯ͠ΔՕॴ͕͋Δ
- ࣗಈςετ͕Γͯͳ͍͜ͱଟʑ
՝ͷৄࡉ
*νʔϜᴈ໌ظͩͬͨͷͰ՝΄͔ʹΖΖ͋ͬͨ…
Slide 12
Slide 12 text
- QAͷϦιʔε
- QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔Βͣʹ͍Δ
- QAͷλεΫ1िؒͷ͏ͪɺޙʹ͞ΒʹภΔ
- ςετઓུ͕ͳ͔ͬͨ
՝ͷੳ
Slide 13
Slide 13 text
- QAͷϦιʔε
- QA͕ࣗಈςετͰԿΛ୲อ͍ͯ͠Δͷ͔Βͣʹ͍Δͨ
Ίɺςετ࣮ࢪͷ࣌ؒͷख͕ؒ૿͍͑ͯΔ
- ͦͷͨΊɺQAͷλεΫ1िؒͷ͏ͪɺޙʹ͞ΒʹภΔ
- ςετઓུ͕ͳ͔ͬͨ
՝ͷੳ
QAͱΤϯδχΞͰ
ςετ؍ʹ͍ͭͯڞ༗ͨ͠ΒղܾͰ͖ͦ͏🤔
Slide 14
Slide 14 text
ςετ؍ͷચ͍ग़͠ΛQAͱΤϯδχΞͰߦ͏
←ཁૉͱঢ়ଶΛચ͍ग़ͯ͠ɺ
←ͦΕΒΛΈ߹Θͤͯɺςετ؍Λग़͢
Slide 15
Slide 15 text
ࣗಈςετͷৼΓ͚ΛQAͱΤϯδχΞͰߦ͏
←ࣗಈςετͰ୲อ͢Δͷͱɺ
←ϚχϡΞϧςετͰߦ͏ͷΛ
ɹ͖ͬΓͤ͞Δ
Slide 16
Slide 16 text
݁Ռ🎉
- ϚχϡΞϧςετͷςετ࣮ࢪΛ࠷খݶͰߦ͑Δ
- ςετ؍ग़͠ΛQAͱΤϯδχΞͰߦ͍ɺࣗಈςετʹৼΓ͚ͯ
͍ΔͷͰ৴པੑ͕ΑΓߴ͘ͳΔ
- ΤϯδχΞ͚ͩͰߦ͏ΑΓɺ҆৺ײ͕͋Δ
*QAࢹͷ͓ҎԼͷςοΫϒϩάʹৄ͘͠ॻ͍ͯ͋Γ·͢
https://tech.smarthr.jp/entry/2021/08/27/171310
Slide 17
Slide 17 text
- QAͷϦιʔε
- ςετઓུ͕ͳ͔ͬͨ
- ΤϯδχΞͱQAͰڞ௨ͷೝࣝΛ࣋ͯͯͳ͍
- ϑϩϯτΤϯυͷUIςετԿΛΔͷ͔ܾ·ͬͯͳ͔ͬͨ
՝ͷੳ
Slide 18
Slide 18 text
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ
- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
- ςετ࣮ࢪͷίετΛݮΒͤΔ
- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠
- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ
Slide 19
Slide 19 text
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ
- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
- ςετ࣮ࢪͷίετΛݮΒͤΔ
- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠
- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ
Slide 20
Slide 20 text
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ
- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
- ςετ࣮ࢪͷίετΛݮΒͤΔ
- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠
- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ
Slide 21
Slide 21 text
ςετઓུ͕ඞཁͳͷ͔νʔϜͰ͠߹ͬͨ
- ϚχϡΞϧςετͱࣗಈςετͷॏෳΛආ͚Δ
- ςετ࣮ࢪͷίετΛݮΒͤΔ
- ࣗಈςετΛ৴པੑΛΑΓߴ͍ͷʹ͍ͯ͘͠
- ςετํ͕໌֬Ͱͳ͍ͱɺςετ؍(ςετέʔε)͕ϒϨΔ
೦ͷҝ
ཧͱݱঢ়ͷΪϟοϓʹؾͮ͘😭
Slide 22
Slide 22 text
ݱঢ়ͷςετϐϥϛου
- ϑϩϯτΤϯυͷUIςετϚχϡΞϧςετ
ͱE2Eςετ
- ςετ؍ΛࣗಈςετʹৼΓ͚ΔΑ͏ʹͳ
Γࣗಈςετͷίετ͕૿͑ͨ
Ҿ༻:alisterbscott.com
Slide 23
Slide 23 text
ݱঢ়ͷςετϐϥϛου
- ϑϩϯτΤϯυͷUIςετϚχϡΞϧςετ
ͱE2Eςετ
- ςετ؍ΛࣗಈςετʹৼΓ͚ΔΑ͏ʹͳ
Γࣗಈςετͷίετ͕૿͑ͨ
Ҿ༻:alisterbscott.com
Slide 24
Slide 24 text
ݱঢ়ͷςετϐϥϛου
- ϑϩϯτΤϯυͷUIςετϚχϡΞϧςετ
ͱE2Eςετ
- ςετ؍ΛࣗಈςετʹৼΓ͚ΔΑ͏ʹͳ
Γࣗಈςετͷίετ͕૿͑ͨ
Ҿ༻:alisterbscott.com
Slide 25
Slide 25 text
ཧͷςετϐϥϛουʹ͚ۙͮΔ
- E2EͷίετΛԼ͛ΔͨΊʹɺJest Integration Test
Λಋೖͨ͠
- ϖʔδΛؙ͝ͱϨϯμϦϯά͢Δςετ
- E2EͱॏͳΔ෦͋ΔͷͰɺϧʔϧΛ໌֬ʹ
͠ɺ͍͍͢ڥʹͨ͠
Ҿ༻:alisterbscott.com
Ҿ༻:testingjavascript.com
Slide 26
Slide 26 text
Jest Integration Testͷڥඋ
- JestͱReact Testing Librar
y
- MSW(Mock Service Worker)ͷಋೖ
- Browser/Node྆ํͰ͑Δ
- APIͷ࣮ͪͳ͘ͳΔͳͲͷϝϦοτ͋Δ
- એݴతʹఆٛͰ͖ΔͷͰ͍͍͢
Slide 27
Slide 27 text
ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTU
ͷڥඋ
←Nodeڥ
↓Browserڥ
Slide 28
Slide 28 text
ϑϩϯτΤϯυςετ +FTU*OUFHSBUJPO5FTU
ͷڥඋ
↑Mock
αϯϓϧˠ
Slide 29
Slide 29 text
Jest Integration TestͱE2EͱϚχϡΞϧςετͷͲΕͰ୲
อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- E2
E
- ϚχϡΞϧςετ
Slide 30
Slide 30 text
+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
- ϚχϡΞϧςετ
Slide 31
Slide 31 text
+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
- ϚχϡΞϧςετ
Slide 32
Slide 32 text
+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
- ϚχϡΞϧςετ
Slide 33
Slide 33 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- First Fetch(ϖʔδͷॳճදࣔ)Ͱ݁͢ΔͷJest Integration Tes
t
Slide 34
Slide 34 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Ϣʔβʔૢ࡞͕͏͕ɺRequest͕ൃੜ͠ͳ͍ͷJest Integration Tes
t
Slide 35
Slide 35 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- 400ܥ
- E2EͰग़དྷͳ͍ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
)
- APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
- ϦϑΝΫλϦϯά͢ΔͷͰ͋Ε͋ͬͨํ͕҆৺
- E2
E
- ϚχϡΞϧςετ
Slide 36
Slide 36 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- 400ܥ
- E2EͰग़དྷͳ͍ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
)
- APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
- ϦϑΝΫλϦϯά͢ΔͷͰ͋Ε͋ͬͨํ͕҆৺
- E2
E
- ϚχϡΞϧςετ
Slide 37
Slide 37 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- 400ܥ
- E2EͰग़དྷͳ͍ͷ(ΠϨΪϡϥʔ͕ଟ͍ͷͰյΕͳ͍͜ͱͷ֬ೝ
)
- APIΛୟ͍ͨ࣌ͷRequest BodyͳͲͷΞαʔγϣϯ
- ϦϑΝΫλϦϯά͢ΔͷͰ͋Ε͋ͬͨํ͕҆৺
- E2
E
- ϚχϡΞϧςετ
Slide 38
Slide 38 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- 400ܥ
Slide 39
Slide 39 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- APIΛୟ͍ͨ࣌ͷRequest BodyQuery ParameterͳͲͷΞαʔγϣϯ
Slide 40
Slide 40 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- E2
E
- ਖ਼ৗܥ
- Mutationܥ(Post, Patch, Delete
)
- ੍ޚܥ(ݖݶೝূͳͲ
)
- ϚχϡΞϧςετ
Slide 41
Slide 41 text
+FTU*OUFHSBUJPO5FTUͱ&&ͱϚχϡΞϧςετͷͲΕͰ୲อ͢Δ͔ϧʔϧΛ໌֬ʹ͢Δ
- Jest Integration Test Ͱͬͨํ͕͍͍ςετ(RECOMMEND
)
- Jest Integration Test Ͱ͋Δͱخ͍͠ςετ(OPTIONAL
)
- E2
E
- ϚχϡΞϧςετ
- Ұ෦ਖ਼ৗܥͱɺσβΠϯपΓ
- ΠϨΪϡϥʔܥ(ෳλϒ)όοΫάϥϯυॲཧͷ݁ՌͳͲ
Slide 42
Slide 42 text
݁Ռ🎉
- ϑϩϯτΤϯυͷςετΛՃͯ͠ςετϐϥϛοτͷॏ৺͕Լ͕
Γɺࣗಈςετͷίετ͕গ͠ݮͬͨ
- ςετέʔε͕૿͑ͨɺΑΓ৴པੑ͕ߴ·Δ
- ෭࣍తʹόοΫΤϯυͷAPI࣮͕ͪݮͬͨ
Slide 43
Slide 43 text
·ͱΊ
Slide 44
Slide 44 text
·ͱΊ🎉
- ҆ఆ࣮ͯ͠ʙQA·ͰऴΘΔΑ͏ʹͳͬͨ
- ࣗಈςετͷ৴པੑ͕ߴ·Γ҆৺ͯ͠ϑϩϯτΤϯυͷ։ൃͰ͖Δ
- ࣮ʙϦϦʔε·Ͱૣ͘ͳͬͨ
- QAͷྗେ͖͍ͷͰڠಇ͍ͯ͘͜͠ͱ͕େ
- ࣗಈςετͷ৴པੑߴ·ΓɺϚχϡΞϧςετ࠷খݶͰߦ͑Δ
Slide 45
Slide 45 text
՝ɾ͍͖͍ͬͯͨ͜ͱ💪
- ςετ؍ग़͔͠ΒɺৼΓ͚Δ·Ͱ͔ͳΓ͔͔࣌ؒΔ
- QAతͳ͜ͱΛΤϯδχΞΔͷͰɺ࡞ۀ࣌ؒݮΔ
- Jest Integration Test͕΄ͱΜͲΓͯͳ͍
- ΤϯδχΞશମΛר͖ࠐΜͰ͍͘ඞཁ͕͋Δ
Slide 46
Slide 46 text
🙏
https://hello-world.smarthr.co.jp
/
ϑϩϯτΤϯυΤϯδχΞੵۃ࠾༻த…ʂʂ