Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
転職初っ端終了しました
Tyankatsu
March 05, 2019
Programming
2
600
転職初っ端終了しました
FrontEnd Test Night - Fukuoka
山本勝也
Tyankatsu
March 05, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
160
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
410
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
380
アニメーションは どうやってできているのか
tyankatsu
0
73
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
450
npmパッケージ製作に関するあれこれ
tyankatsu
1
670
commit message 絶対統一させるマン
tyankatsu
1
180
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1k
Other Decks in Programming
See All in Programming
ANR overview at Uber + Leveraging ApplicationExitInfo API
yhartanto
0
320
IE Graduation (IE の功績を讃える)
jxck
20
12k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
110
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
Jakarta EE 10 - Feature by Feature with My Open Source Journey
ivargrimstad
0
2k
Git・Git-Flowについて
nerusan_main
0
410
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
120
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
230
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
240
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
520
即、New Relic / New Relic NOW!
uzulla
0
270
io22 extended What's new in app performance
veronikapj
0
330
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
296
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Rails Girls Zürich Keynote
gr2m
86
12k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Happy Clients
brianwarren
89
5.6k
The Cult of Friendly URLs
andyhume
68
4.8k
Teambox: Starting and Learning
jrom
123
7.7k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
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࠷&ߴ •
ԿΛςετ͢Δͷ͔ • ظ͢Δɺঢ়ଶ • ظ͠ͳ͍ɺঢ়ଶ
͓ΘΓ