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