Tweet
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

۩ମྫ • ؔ਺͸ظ଴ͨ͠ฦΓ஋Λฦͯ͘͠ΕΔͷ͔ • props΍state΍dataͷ஋ʹΑΔ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

͓ΘΓ