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
750
転職初っ端終了しました
FrontEnd Test Night - Fukuoka
山本勝也
Tyankatsu
March 05, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
250
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
580
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
tyankatsu
1
540
アニメーションは どうやってできているのか
tyankatsu
0
110
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
590
npmパッケージ製作に関するあれこれ
tyankatsu
1
880
commit message 絶対統一させるマン
tyankatsu
1
200
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.1k
Other Decks in Programming
See All in Programming
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
Milestoner
bkuhlmann
1
410
Hanami and htmx
bkuhlmann
0
210
見た目から始める生産性向上
ikumatadokoro
7
810
Semantic search with Django and pgvector
pauloxnet
0
240
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
910
Elm 0.19.0 Changes
bkuhlmann
0
490
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
Featured
See All Featured
A designer walks into a library…
pauljervisheath
200
23k
Side Projects
sachag
451
41k
Happy Clients
brianwarren
92
6.4k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Optimizing for Happiness
mojombo
370
69k
Making Projects Easy
brettharned
108
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Bash Introduction
62gerente
604
210k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Building an army of robots
kneath
300
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
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࠷&ߴ •
ԿΛςετ͢Δͷ͔ • ظ͢Δɺঢ়ଶ • ظ͠ͳ͍ɺঢ়ଶ
͓ΘΓ