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
PlaywrightによるSvelteコンポーネントテスト
Search
kubotak
October 27, 2022
Programming
0
3.3k
PlaywrightによるSvelteコンポーネントテスト
Nextbeat Tech Bar:SvelteKit導入企業2社による本音LT会
kubotak
October 27, 2022
Tweet
Share
More Decks by kubotak
See All by kubotak
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
350
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
440
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
9.8k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
920
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
630
Felteで作る簡単フォームバリデーション
kubotak
1
1.2k
SvelteKitを本番投入してみて
kubotak
2
1.7k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
350
FeatureToggle戦略と運用方法
kubotak
4
15k
Other Decks in Programming
See All in Programming
Activities at Cairo Library
cairolibrary720
0
1.2k
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
CSC307 Lecture 14
javiergs
PRO
0
220
유연한 Composable 설계
l2hyunwoo
0
380
Namespace on read
tagomoris
2
370
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Jetpack for KMP
fornewid
1
290
Product Management LT会_クアンド新家
shinshin
0
260
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
The Invisible Side of Design
smashingmag
294
50k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The Mythical Team-Month
searls
217
43k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
How to Think Like a Performance Engineer
csswizardry
4
590
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Automating Front-end Workflow
addyosmani
1362
200k
Into the Great Unknown - MozCon
thekraken
20
1.3k
The Cult of Friendly URLs
andyhume
75
5.9k
Transcript
Copyright© M&AΫϥυ PlaywrightʹΑΔ Svelteίϯϙʔωϯτςετ Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ / Kenjiro Kubota
Copyright© M&AΫϥυ index • SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ • PlaywrightʹΑΔίϯϙʔωϯτͷςετ ࠓ͢͜ͱ • SvelteɺSvelteKitͷৄࡉ༷
• SvelteKitΛ࠾༻ͨ͠ ࠓ͞ͳ͍͜ͱ
Copyright© M&AΫϥυ SvelteKitಋೖʹؔͯ͠ͷϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 Ͱ͓͠·͢ɻ
Copyright© M&AΫϥυ Profile ٱอా ݡೋ࿕ kubotak-is kubotak_public kenjiro.kubota גࣜձࣾM&AΫϥυॴଐ TypeScript
PHP https://kubotak.page ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ) Ѫݘɿ౾ࣲ
Copyright© M&AΫϥυ ٻਓࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά 5 ങ͍ख ɾҊ݅ใुM&AޭใुͷΈ ɾ࠷खྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ
ɾજࡏʹϦʔν͕Մೳ खྉແ ྉ ※ϓϥοτϑΥʔϜҊ݅ͷ߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐΔ͜ͱ͕Մೳ ɾհۀऀΛհͣ͞ʹμΠϨΫτʹΓऔΓՄೳ ɾങ͍खͷM&A୲ऀʹίϯλΫτΛͱΕΔ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾհۀऀΛΘͳ͍ͷͰखྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ͍͖͍ͬͯͨʂ 5 PR
Copyright© M&AΫϥυ Svelteͱʁ Svelte • Write less code ◦ গͳ͍هड़
• No virtual DOM ◦ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ • Truly reactive ◦ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ ReactVue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ feature
Copyright© M&AΫϥυ SvelteKitͱʁ SvelteKit SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Next.js (React) • Nuxt
(Vue.js) Similar ※SvelteKitSvelteͱಉ͡ίϛϡχςΟ͕ཧ͍ͯ͠ΔͰ্هͱҟͳΔ
Copyright© M&AΫϥυ ࠃࣄྫ ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ https://www.calbee.co.jp/agerico/jagaricocomic/
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ΞϓϦέʔγϣϯͷίʔυجຊతʹ srcԼʹ࡞͢Δ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ϧʔςΟϯάϑΝΠϧγεςϜϕʔε ※ϧʔϧಛघͳͨΊৄ͘͠υΩϡϝϯτΛࢀর͍ͩ͘͞ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ SvelteKitͷجຊతͳσΟϨΫτϦߏ ࡞࣌ʹҎԼΛબ͢ΔͱPlaywrightʹ ΑΔςετ͕ॳظಋೖ͞ΕΔ ✔ Add Playwright for browser
testing? … No / Yes ※Playwrightʹ͍ͭͯޙͰ͓͠·͢ ※ެࣜखॱͰεέϧτϯΛ࡞ͨ͠ޙͷσΟϨΫτϦ
Copyright© M&AΫϥυ 🤔ίϯϙʔωϯτͲ͜ʁ
Copyright© M&AΫϥυ src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͜ͷதʹஔ͘ ͷ͕SvelteKitྲྀͬΆ͍ ※ެࣜυΩϡϝϯτΑΓ
Copyright© M&AΫϥυ ͬͯΈΑ͏🚀
Copyright© M&AΫϥυ srcσΟϨΫτϦԼʹlib/componentsΛ࡞
Copyright© M&AΫϥυ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
Copyright© M&AΫϥυ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠ $libΤΠϦΞε Ͱݺͼग़͠
Copyright© M&AΫϥυ ϒϥβͰݟΔͱ͜Μͳײ͡👍
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ M&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest
◦ APIͷmock͕ඞཁͳςετ
Copyright© M&AΫϥυ ίϯϙʔωϯτͷςετ M&AΫϥυͰҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest
◦ APIͷmock͕ඞཁͳςετ ࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυ Playwright CypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςε τ͕Մೳ •
ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετՄೳ feature
Copyright© M&AΫϥυ Playwright CypressPuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥβͷςε τ͕Մೳ •
ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετՄೳ feature ࠓͪ͜Βʹ͍ͭͯհ
Copyright© M&AΫϥυ ͬͯΈΑ͏🚀
Copyright© M&AΫϥυ ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ ϑϨʔϜϫʔΫબʹSvelte͕͋Δʂ
Copyright© M&AΫϥυ ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ • @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ • npm scriptsʹtest-ctίϚϯυ͕Ճ͞ΕΔ • ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞͞ΕΔ
• ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞͞ΕΔ
Copyright© M&AΫϥυ ઌఔ࡞ͨ͠ίϯϙʔωϯτΛςετ tests/Test.spec.ts
Copyright© M&AΫϥυ $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ ԼΛՃ
Copyright© M&AΫϥυ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ
Copyright© M&AΫϥυ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ֤࣌ϒϥβͷμϯϩʔυ͕࣮ߦ͞ΕΔ 3ϒϥβͰςετ͍ͯ͠ΔͷͰ 3passedʹͳΔ
Copyright© M&AΫϥυ npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ
Copyright© M&AΫϥυ ϏδϡΞϧϦάϨογϣϯςετͬͯΈΑ͏🎭
Copyright© M&AΫϥυ ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ
Copyright© M&AΫϥυ npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛՃ ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ
Copyright© M&AΫϥυ σϑΥϧτͰϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ ίϯϙʔωϯτʹ͕ࠩ͋ΔͱςετࣦഊʹͳΔ
Copyright© M&AΫϥυ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹
Copyright© M&AΫϥυ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠߹ ςετର͕ڱ͍ͷͰςΩετϨϕϧ ͷςετͰ௨աͯ͠͠·͏
Copyright© M&AΫϥυ ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ
Copyright© M&AΫϥυ ͕ࠩখ͍͞߹DiffͰࡉ͔֬͘ೝͰ͖Δ
Copyright© M&AΫϥυ 🚀 Pros • ࢼݧతͰ͋Δ͕ेར༻Ͱ͖Δ • PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠ ͍͢ •
ΫϩεϒϥβͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ • ςΩετϨϕϧͷςετʹൺͯεΫγϣςετίϯϙʔωϯ τશମΛ୲อͰ͖Δ
Copyright© M&AΫϥυ 🫠 Cons • jsdomʹΑΔςετʹൺΔͱ࣮ߦ͕͔͔࣌ؒΔ • ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ ͳΔ •
CIͰ࣮ߦ͢Δ߹ɺࣄલʹϒϥβ͕Πϯετʔϧ͞ΕͨDocker ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮΑ͘͏ͨΊʹҰखؒ ඞཁ
Copyright© M&AΫϥυ Thanks for watching this :)