Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
転職初っ端終了しました
Search
Tyankatsu
March 05, 2019
Programming
2
820
転職初っ端終了しました
FrontEnd Test Night - Fukuoka
山本勝也
Tyankatsu
March 05, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
340
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
730
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
630
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
670
npmパッケージ製作に関するあれこれ
tyankatsu
1
990
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
LRパーサーはいいぞ
ydah
7
1.5k
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
Design Pressure
hynek
0
180
Носок на сок
bo0om
0
1.5k
クラス設計の手順
akikogoto
0
140
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
120
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
150
파급효과: From AI to Android Development
l2hyunwoo
0
170
ComposeでのPicture in Picture
takathemax
0
150
オープンソースコントリビュート入門
_katsuma
0
150
TSConfigからTypeScriptの世界を覗く
planck16
1
170
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
150
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Embracing the Ebb and Flow
colly
85
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Speed Design
sergeychernyshev
30
950
The Cult of Friendly URLs
andyhume
78
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Being A Developer After 40
akosma
91
590k
Designing for Performance
lara
608
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Transcript
స৬ॳͬ ऴྃ͠·ͨ͠ 3/5 FrontEnd Test Night - Fukuoka
ࣗݾհ • νϟϯΧπ(@tyankatsu5) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Gridsome maintainer
• ӳޠษڧத • ࠷ۙδϜߦ͖ͩ͠·ͨ͠
None
None
ҙ • ͋͘·Ͱͷߟ͑Δςετʹ͍ͭͯͷͳͷͰɺؒ ҧͬͯΔͱ͜Ζ͕͋Δ͔Εͳ͍Ͱ͢ɻ • ؒҧͬͯͨΒTwitterͰࢦఠͯ͠΄͍͠Ͱ͢ɻ • ࣗ͜͏ࢥ͏ͬͯײ͍ͩ͘͞
https://discord.gg/XSQ6c3X
ࠓ͢͜ͱ • ςετͱͷग़ձ͍ • ςετͷΘ͔Βͳ͍Λղܾ͍ͯ͘͠աఔ
ςετͱͷ ࠷ॳͷग़ձ͍
ձࣾ
ձࣾ • JestΛ༻ͨ͠Ϣχοτςετ • Vueͷίϯϙʔωϯτͱstoreͷςετ • ςετ͕௨Βͳ͔ͬͨΒTravisʹౖΒΕͯϓϧϦΫ͕ ҰੜϚʔδͰ͖ͳ͍
Ұੜ ϚʔδͰ͖ͳ͍
࣌ͷͷεϖοΫ • WebσβΠφʔ͔ΒϑϩϯτΤϯυΤϯδχΞ • CIʁ • ςετʁ • ΧόϨοδʁ •
Ϛονϟʔʁ • ελϒʁ • ϞοΫʁ
͓ɹΘɹΓ
ϦʔμʔʹఏҊ
ʮ͠Β͘ςετ͚ͩॻ͔ͤͯʯ
ʮ͏͍ʯ
ʮͪΐΖ͍ʯ
Θ͔Βͳ͍͜ͱΛ ϦετΞοϓ
େ͖͚͘Δͱ3ͭ • ͳͥςετΛॻ͘ͷ͔ • Ͳ͏ͬͯςετ͢Δͷ͔ • ԿΛςετ͢Δͷ͔
ͳͥςετΛॻ͘ͷ͔
;ͱࢥ͏
ςετ͍ΒΜ͘ͳ͍ʁ
ςετͳͯ͘ಈ͘Α
͔Δ
None
ςετίʔυʹWhat Λॻ͜͏
͜ͷίʔυԿʁΛઆ໌
ͿͬͪΌ͚
ͳͯ͘ಈ͘
͚Ͳ
ͳ͍ͱίʔυʹແ
͡Ό͋ඞཁͰ͢Ͷ☺
͍Ζ͍Ζௐͨ • RSpecͷ͍ํʢΑ͘ฉ͘ςετ͔ͩͬͨΒʣ • ςετͷख๏ʢTDDͱ͔BDDͱ͔ʣ • ςετͷछྨʢϢχοτςετͱ͔E2Eͱ͔ʣ
ͳͥςετΛॻ͘ͷ͔ • ػೳͷઆ໌ • मਖ਼Λ༰қʹ͢Δ
ػೳͷઆ໌
ػೳͷઆ໌ • ͦͷػೳԿΛظͯ͠ԿΛظ͍ͯ͠ͳ͍ͷ͔ • ػೳͷ࣮ऀͦͷػೳΛӬԕʹઆ໌Ͱ͖Δ͔ • ࣮ऀͦͦଆʹ͍Δͷ͔
मਖ਼Λ༰қʹ͢Δ
मਖ਼Λ༰қʹ͢Δ • ػೳΛมߋɺमਖ਼͢Δ߹ʹɺظ͢Δ݁Ռ͕ಘΒ ΕΔͷ͔อো͢Δ • ාͯ͘खΛՃ͑ΒΕͳ͍ͱ͍͏͜ͱ͔ΒಀΕΔ
Ͳ͏ͬͯςετ͢Δͷ͔
None
Jest • Facebook༷ • ͳΜͰཉுΓϋοϐʔηοτ • ͜Ε͑͞ೖΕΕςετ͕Ұ௨Γग़དྷΔʂ⚙ • snapshotࡱΕͯDOMͷมߋݕʂ •
ݱঢ়͜ΕҰ • εϐʔυ͍͚Ͳ'ɹ˞ମײ
JestͰͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱదٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉ
JestͰͬͨ͜ͱ • υΩϡϝϯτΛશ෦ಡΉʢΘ͔Βͳ͍͜ͱదٓά άΔʣ • ϚονϟʔΛશ෦ࢼ͢ • खݩͰ؆୯ͳؔ࡞ͬͯςετͯ͠ΈΔ • LaigͷίʔυΛಡΉɹˡ͜Ε
ಡΜͰΈͯ • vue-test-utilsͱJestΈ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔϞοΫʹ͓͚͍͍ͯ͠ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
ಡΜͰΈͯ • vue-test-utilsͱJestΈ߹ΘͤͯΔΜͩͳ • stateͱ͔propsͱ͔dataͱ͔ͷΛԾʹ࡞ΔΜͩͳ • ςετ͠ͳ͍ؔϞοΫʹ͓͚͍͍ͯ͠ͷ͔ • Wallaby.jsͬͯϑΝΠϧ͋Δ͚ͲͳΜͩ͜Εʁ
ʮ͜Ε͋͛Δʯ
Wallaby.jsͷϥΠηϯε
ʮ͋ɺ͍ʯ
3 days later ...
ʮWallaby࠷ˍߴʯ
ʮWallaby࠷ˍߴʯ
Wallaby.jsͷੌ͍ͱ͜Ζ • શϑΝΠϧ୳ࡧͯ͠ςετͯ͠ͳ͍ͱ͜Ζݟ͚ͭΔ • ϑΝΠϧ͝ͱͷΧόϨοδग़ͯ͘͠ΕΔ • Τϥʔग़ͯΔͱ͜Ζڭ͑ͯ͘ΕΔ • ΤϥʔՕॴͷৄࡉΛϩάʹग़ྗͯ͘͠ΕΔ •
ϩά݁Ռ͕͙͢ӈʹग़Δ • ରԠ͕ૣ͍ • ϑϦʔϓϥϯ࠷ѱʢߪೖ࠵ଅˍ࠵ଅˍ࠵ଅʣ
ϩά݁Ռ͕͙͢ӈʹग़Δ
ϗόʔ͢Εৄࡉ֬ೝՄೳ
ςετ͕௨Ε৭
ςετ͕௨Βͳ͚Ε৭
None
ͦͷؒ ࣮ʹ30ඵͷग़དྷࣄ
Jest + Wallaby.js ͭΑͭΑͰ͋Δɻ ৄࡉͪ͜Β https://wallabyjs.com/
ԿΛςετ͢Δͷ͔
ςετ͕ॻ͚Δڥ
Ͱ͖ͨͱͯ͠
ͳʹΛςετ͢Δͷʁ
Jestͷ υΩϡϝϯτΛݟͯΔͱ ײͮ͘
͕༧ظ͢Δͷ ͕༧ظ͠ͳ͍ͷ ΛϚονϟʔͰςετ
ͭ·Γ
ظ͢Δɺঢ়ଶ ظ͠ͳ͍ɺঢ়ଶ
۩ମྫ • ؔظͨ͠ฦΓΛฦͯ͘͠ΕΔͷ͔ • propsstatedataͷʹΑΔDOM༧ظͨ͠ͷ ͔ • storeͷstate͕actionͰมΘΔͷ͔ • mutation͢Δͱ͖ʹactionݺΕ͍ͯΔͷ͔
payloadಉ࣌ʹͯ͠Δͷ͔ • ϦϯΫΛԡͨ͠ΒͲͷϖʔδʹߦ͘ͷ͔
۩ମྫ • Ҿʹ2Λ͔͚ͯΛฦؔ͢࡞ͬͨΑ • Ҿʹ5ΛೖΕͨΒ10͕ฦΔͷ͔ • Ҿʹ-5ΛೖΕͨΒ-10͕ฦΔͷ͔ • Ҿʹ0ΛೖΕͨΒ0͕ฦΔͷ͔ •
Ҿ͕ࣈҎ֎ͩͬͨΒError͕ฦΔͷ͔
۩ମྫ • ϑΥʔϜͰsubmitͨ͠Β/completeʹඈͿΑ • submitͨ͠ΒURL/completeͳͷ͔ • /completeʹτοϓʹΔϘλϯ͕͋Δ͔ • /completeͷτοϓʹΔϘλϯΛԡͨ͠ΒURL /ʹͳ͍ͬͯΔͷ͔
͜͏ͯ͠ ςετʹ͏Δ͍͞Ϛϯʹ ͳ͍ͬͯͬͨ ʢࣝ·ͩઙ͍ͱࢥ͏ʣ
ۦ͚ʹͳ͚ͬͨͲ ·ͱΊ
·ͱΊ • ͳͥςετΛ͢Δͷ͔ • ࣮ͷػೳΛอো͢Δ • Ͳ͏ͬͯςετΛ͢Δͷ͔ • JestͱWallaby࠷&ߴ •
ԿΛςετ͢Δͷ͔ • ظ͢Δɺঢ়ଶ • ظ͠ͳ͍ɺঢ়ଶ
͓ΘΓ