PlaywrightによるSvelteコンポーネントテスト

Nextbeat Tech Bar：SvelteKit導入企業2社による本音LT会

Transcript

1. Copyright© M&AΫϥ΢υ PlaywrightʹΑΔ Svelteίϯϙʔωϯτςετ Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ / Kenjiro Kubota
2. Copyright© M&AΫϥ΢υ index • SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ • PlaywrightʹΑΔίϯϙʔωϯτͷςετ ࠓ೔࿩͢͜ͱ • SvelteɺSvelteKitͷৄࡉ࢓༷ • SvelteKitΛ࠾༻ͨ͠࿩ ࠓ೔࿩͞ͳ͍͜ͱ
3. Copyright© M&AΫϥ΢υ SvelteKitಋೖʹؔͯ͠ͷ࿩͸ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022 Ͱ͓࿩͠·͢ɻ
4. Copyright© M&AΫϥ΢υ Profile ٱอా ݡೋ࿕ kubotak-is kubotak_public kenjiro.kubota גࣜձࣾM&AΫϥ΢υॴଐ TypeScript PHP https://kubotak.page ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ) Ѫݘɿ౾ࣲ
5. Copyright© M&AΫϥ΢υ ٻਓ޿ࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά 5 ങ͍ख ɾҊ݅ใु͸M&A੒ޭใुͷΈ ɾ࠷௿ख਺ྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ ख਺ྉແ ྉ ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ
 ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
 ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ
 ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ΍͍͖͍ͬͯͨʂ 5 PR
6. Copyright© M&AΫϥ΢υ Svelteͱ͸ʁ Svelte • Write less code ◦ গͳ͍هड़ • No virtual DOM ◦ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ • Truly reactive ◦ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ React΍Vue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ feature
7. Copyright© M&AΫϥ΢υ SvelteKitͱ͸ʁ SvelteKit SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ • Next.js (React) • Nuxt (Vue.js) Similar ※SvelteKit͸Svelteͱಉ͡ίϛϡχςΟ͕؅ཧ͍ͯ͠Δ఺Ͱ্هͱҟͳΔ
8. Copyright© M&AΫϥ΢υ ࠃ಺ࣄྫ ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ https://www.calbee.co.jp/agerico/jagaricocomic/
9. Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
10. Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ΞϓϦέʔγϣϯͷίʔυ͸جຊతʹ͸ src഑Լʹ࡞੒͢Δ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
11. Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ϧʔςΟϯά͸ϑΝΠϧγεςϜϕʔε ※ϧʔϧ͸ಛघͳͨΊৄ͘͠͸υΩϡϝϯτΛࢀর͍ͩ͘͞ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
12. Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ࡞੒࣌ʹҎԼΛબ୒͢ΔͱPlaywrightʹ ΑΔςετ͕ॳظಋೖ͞ΕΔ ✔ Add Playwright for browser testing? … No / Yes ※Playwrightʹ͍ͭͯ͸ޙ൒Ͱ͓࿩͠·͢ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
13. Copyright© M&AΫϥ΢υ 🤔ίϯϙʔωϯτ͸Ͳ͜ʁ
14. Copyright© M&AΫϥ΢υ src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͸͜ͷதʹஔ͘ ͷ͕SvelteKitྲྀͬΆ͍ ※ެࣜυΩϡϝϯτΑΓ
15. Copyright© M&AΫϥ΢υ ΍ͬͯΈΑ͏🚀
16. Copyright© M&AΫϥ΢υ srcσΟϨΫτϦ഑Լʹlib/componentsΛ࡞੒
17. Copyright© M&AΫϥ΢υ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
18. Copyright© M&AΫϥ΢υ routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠ $libΤΠϦΞε Ͱݺͼग़͠
19. Copyright© M&AΫϥ΢υ ϒϥ΢βͰݟΔͱ͜Μͳײ͡👍
20. Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ
21. Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest ◦ APIͷmock͕ඞཁͳςετ
22. Copyright© M&AΫϥ΢υ ίϯϙʔωϯτͷςετ M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ • Playwright ◦ ίϯϙʔωϯτͷϦάϨογϣϯςετ • Vitest ◦ APIͷmock͕ඞཁͳςετ ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ
23. Copyright© M&AΫϥ΢υ Playwright Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε τ͕Մೳ • ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετ΋Մೳ feature
24. Copyright© M&AΫϥ΢υ Playwright Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ • MicrosoftͷOSSʢݩPuppeteerνʔϜʣ • Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε τ͕Մೳ • ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ ϦάϨογϣϯςετ΋Մೳ feature ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ
25. Copyright© M&AΫϥ΢υ ΍ͬͯΈΑ͏🚀
26. Copyright© M&AΫϥ΢υ ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ ϑϨʔϜϫʔΫબ୒ʹSvelte͕͋Δʂ
27. Copyright© M&AΫϥ΢υ ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ • @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ • npm scriptsʹtest-ctίϚϯυ͕௥Ճ͞ΕΔ • ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞੒͞ΕΔ • ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞੒͞ΕΔ
28. Copyright© M&AΫϥ΢υ ઌఔ࡞੒ͨ͠ίϯϙʔωϯτΛςετ tests/Test.spec.ts
29. Copyright© M&AΫϥ΢υ $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ ԼΛ௥Ճ
30. Copyright© M&AΫϥ΢υ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ
31. Copyright© M&AΫϥ΢υ npm run test-ctΛ࣮ߦ͢Δ ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ 3ϒϥ΢βͰςετ͍ͯ͠ΔͷͰ 3passedʹͳΔ
32. Copyright© M&AΫϥ΢υ npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ
33. Copyright© M&AΫϥ΢υ ϏδϡΞϧϦάϨογϣϯςετ΋΍ͬͯΈΑ͏🎭
34. Copyright© M&AΫϥ΢υ ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ
35. Copyright© M&AΫϥ΢υ npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛ௥Ճ ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ
36. Copyright© M&AΫϥ΢υ σϑΥϧτͰ͸ϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ ίϯϙʔωϯτʹࠩ෼͕͋ΔͱςετࣦഊʹͳΔ
37. Copyright© M&AΫϥ΢υ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹
38. Copyright© M&AΫϥ΢υ εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹ ςετର৅͕ڱ͍ͷͰςΩετϨϕϧ ͷςετͰ͸௨աͯ͠͠·͏
39. Copyright© M&AΫϥ΢υ ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ
40. Copyright© M&AΫϥ΢υ ࠩ෼͕খ͍͞৔߹͸DiffͰࡉ͔֬͘ೝͰ͖Δ
41. Copyright© M&AΫϥ΢υ 🚀 Pros • ࢼݧతͰ͸͋Δ͕े෼ར༻Ͱ͖Δ • PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠ ΍͍͢ • Ϋϩεϒϥ΢βͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ ΢β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ • ςΩετϨϕϧͷςετʹൺ΂ͯεΫγϣςετ͸ίϯϙʔωϯ τશମΛ୲อͰ͖Δ
42. Copyright© M&AΫϥ΢υ 🫠 Cons • jsdomʹΑΔςετʹൺ΂Δͱ࣮ߦ͕͔͔࣌ؒΔ • ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ ͳΔ • CIͰ࣮ߦ͢Δ৔߹ɺࣄલʹϒϥ΢β͕Πϯετʔϧ͞ΕͨDocker ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮ཰Α͘࢖͏ͨΊʹҰखؒ ඞཁ
43. Copyright© M&AΫϥ΢υ Thanks for watching this :)