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
800
転職初っ端終了しました
FrontEnd Test Night - Fukuoka
山本勝也
Tyankatsu
March 05, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
320
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
700
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
610
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
660
npmパッケージ製作に関するあれこれ
tyankatsu
1
960
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
Immutable ActiveRecord
megane42
0
140
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
昭和の職場からアジャイルの世界へ
kumagoro95
1
370
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
DROBEの生成AI活用事例 with AWS
ippey
0
130
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
技術を根付かせる / How to make technology take root
kubode
1
250
時計仕掛けのCompose
mkeeda
1
290
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
Documentation Writing (for coders)
carmenintech
67
4.6k
Site-Speed That Sticks
csswizardry
4
380
A Philosophy of Restraint
colly
203
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Statistics for Hackers
jakevdp
797
220k
Optimizing for Happiness
mojombo
376
70k
Speed Design
sergeychernyshev
27
790
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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࠷&ߴ •
ԿΛςετ͢Δͷ͔ • ظ͢Δɺঢ়ଶ • ظ͠ͳ͍ɺঢ়ଶ
͓ΘΓ