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

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

Transcript

1. Copyright© M&AΫϥ΢υ
   PlaywrightʹΑΔ
   Svelteίϯϙʔωϯτςετ
   Nextbeat Tech BarɿSvelteKitಋೖاۀ2ࣾʹΑΔຊԻLTձ /
   Kenjiro Kubota
   

   View Slide

2. Copyright© M&AΫϥ΢υ
   index
   ● SvelteKitͰͷίϯϙʔωϯτͷ࡞Γํ
   ● PlaywrightʹΑΔίϯϙʔωϯτͷςετ
   ࠓ೔࿩͢͜ͱ
   ● SvelteɺSvelteKitͷৄࡉ࢓༷
   ● SvelteKitΛ࠾༻ͨ͠࿩
   ࠓ೔࿩͞ͳ͍͜ͱ
   

   View Slide

3. Copyright© M&AΫϥ΢υ
   SvelteKitಋೖʹؔͯ͠ͷ࿩͸ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2022
   Ͱ͓࿩͠·͢ɻ
   

   View Slide

4. Copyright© M&AΫϥ΢υ
   Profile
   ٱอా ݡೋ࿕
   kubotak-is
   kubotak_public
   kenjiro.kubota
   גࣜձࣾM&AΫϥ΢υॴଐ
   TypeScript
   PHP
   https://kubotak.page
   ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ)
   Ѫݘɿ౾ࣲ
   

   View Slide

5. Copyright© M&AΫϥ΢υ
   ٻਓ޿ࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά
   5
   ങ͍ख
   ɾҊ݅ใु͸M&A੒ޭใुͷΈ
   ɾ࠷௿ख਺ྉͳ͠
   ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ
   ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬
   ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
   ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ
   ख਺ྉແ
   ྉ
   ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹
   ※
   ചΓख
   1.ܝࡌ͢Δ
   ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ

   ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ

   ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ

   ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
   2.ΦϑΝʔ͢Δ
   M&Aɾग़ࢿχʔζΛܝࡌ
   ങ͍खͷϝϦοτ ചΓखͷϝϦοτ
   ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ
   ʓʓྖҬͷձࣾΛ
   ืू͠·͢
   ͜ͷձࣾͱҰॹʹ
   ΍͍͖͍ͬͯͨʂ
   5
   PR
   

   View Slide

6. Copyright© M&AΫϥ΢υ
   Svelteͱ͸ʁ
   Svelte
   ● Write less code
   ○ গͳ͍هड़
   ● No virtual DOM
   ○ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ
   ● Truly reactive
   ○ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍
   React΍Vue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ
   feature
   

   View Slide

7. Copyright© M&AΫϥ΢υ
   SvelteKitͱ͸ʁ
   SvelteKit
   SvelteΛϕʔεͱͨ͠WebΞϓϦέʔγϣϯΛߏங͢ΔͨΊͷϑϨʔϜϫʔΫ
   ● Next.js (React)
   ● Nuxt (Vue.js)
   Similar
   ※SvelteKit͸Svelteͱಉ͡ίϛϡχςΟ͕؅ཧ͍ͯ͠Δ఺Ͱ্هͱҟͳΔ
   

   View Slide

8. Copyright© M&AΫϥ΢υ
   ࠃ಺ࣄྫ
   ͡Ό͕Γ͜ͷಛઃαΠτ͕SvelteKitͰ࡞ΒΕͯΔΈ͍ͨͰ͢ʂ
   https://www.calbee.co.jp/agerico/jagaricocomic/
   

   View Slide

9. Copyright© M&AΫϥ΢υ
   SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
   

   View Slide

10. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ΞϓϦέʔγϣϯͷίʔυ͸جຊతʹ͸
    src഑Լʹ࡞੒͢Δ
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
    

    View Slide

11. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ϧʔςΟϯά͸ϑΝΠϧγεςϜϕʔε
    ※ϧʔϧ͸ಛघͳͨΊৄ͘͠͸υΩϡϝϯτΛࢀর͍ͩ͘͞
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
    

    View Slide

12. Copyright© M&AΫϥ΢υ
    SvelteKitͷجຊతͳσΟϨΫτϦߏ੒
    ࡞੒࣌ʹҎԼΛબ୒͢ΔͱPlaywrightʹ
    ΑΔςετ͕ॳظಋೖ͞ΕΔ
    ✔ Add Playwright for browser testing? … No / Yes
    ※Playwrightʹ͍ͭͯ͸ޙ൒Ͱ͓࿩͠·͢
    ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
    

    View Slide

13. Copyright© M&AΫϥ΢υ
    🤔ίϯϙʔωϯτ͸Ͳ͜ʁ
    

    View Slide

14. Copyright© M&AΫϥ΢υ
    src/libʹ$libΤΠϦΞε͕ுΒΕ͍ͯͯɺίϯϙʔωϯτ͸͜ͷதʹஔ͘
    ͷ͕SvelteKitྲྀͬΆ͍
    ※ެࣜυΩϡϝϯτΑΓ
    

    View Slide

15. Copyright© M&AΫϥ΢υ
    ΍ͬͯΈΑ͏🚀
    

    View Slide

16. Copyright© M&AΫϥ΢υ
    srcσΟϨΫτϦ഑Լʹlib/componentsΛ࡞੒
    

    View Slide

17. Copyright© M&AΫϥ΢υ
    routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
    

    View Slide

18. Copyright© M&AΫϥ΢υ
    routes/+page.svelte͔ΒίϯϙʔωϯτΛݺͼग़͠
    $libΤΠϦΞε
    Ͱݺͼग़͠
    

    View Slide

19. Copyright© M&AΫϥ΢υ
    ϒϥ΢βͰݟΔͱ͜Μͳײ͡👍
    

    View Slide

20. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ
    

    View Slide

21. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ
    M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ
    ● Playwright
    ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ
    ● Vitest
    ○ APIͷmock͕ඞཁͳςετ
    

    View Slide

22. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτͷςετ
    M&AΫϥ΢υͰ͸ҎԼͷ2ͭͷςετΛ࣮ࢪ
    ● Playwright
    ○ ίϯϙʔωϯτͷϦάϨογϣϯςετ
    ● Vitest
    ○ APIͷmock͕ඞཁͳςετ
    ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ
    

    View Slide

23. Copyright© M&AΫϥ΢υ
    Playwright
    Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ
    ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ
    ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε
    τ͕Մೳ
    ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ
    ϦάϨογϣϯςετ΋Մೳ
    feature
    

    View Slide

24. Copyright© M&AΫϥ΢υ
    Playwright
    Cypress΍PuppeteerͷΑ͏ʹNode.jsͰE2Eςετ͕࣮ߦͰ͖ΔϥΠϒϥϦ
    ● MicrosoftͷOSSʢݩPuppeteerνʔϜʣ
    ● Chromium,firefox,webkitʹΑΔΫϩεϒϥ΢βͷςε
    τ͕Մೳ
    ● ࢼݧత͕ͩɺίϯϙʔωϯτͷςετٴͼɺϏδϡΞϧ
    ϦάϨογϣϯςετ΋Մೳ
    feature
    ࠓ೔͸ͪ͜Βʹ͍ͭͯ঺հ
    

    View Slide

25. Copyright© M&AΫϥ΢υ
    ΍ͬͯΈΑ͏🚀
    

    View Slide

26. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτςετ༻ͷґଘͱઃఆΛಋೖ
    ϑϨʔϜϫʔΫબ୒ʹSvelte͕͋Δʂ
    

    View Slide

27. Copyright© M&AΫϥ΢υ
    ίϚϯυΛ࣮ߦ͢ΔͱҎԼ͕มߋ͞ΕΔ
    ● @playwright/experimental-ct-svelte͕Πϯετʔϧ͞ΕΔ
    ● npm scriptsʹtest-ctίϚϯυ͕௥Ճ͞ΕΔ
    ● ϓϩδΣΫτϧʔτʹplaywright/index.html͕࡞੒͞ΕΔ
    ● ϓϩδΣΫτϧʔτʹplaywright-ct.config.ts͕࡞੒͞ΕΔ
    

    View Slide

28. Copyright© M&AΫϥ΢υ
    ઌఔ࡞੒ͨ͠ίϯϙʔωϯτΛςετ
    tests/Test.spec.ts
    

    View Slide

29. Copyright© M&AΫϥ΢υ
    $libͷΤΠϦΞεύε͕ղܾͰ͖ͳ͍ͷͰplaywright-ct.config.tsʹҎ
    ԼΛ௥Ճ
    

    View Slide

30. Copyright© M&AΫϥ΢υ
    npm run test-ctΛ࣮ߦ͢Δ
    ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ
    

    View Slide

31. Copyright© M&AΫϥ΢υ
    npm run test-ctΛ࣮ߦ͢Δ
    ※ॳճ࣮ߦ࣌͸֤ϒϥ΢βͷμ΢ϯϩʔυ͕࣮ߦ͞ΕΔ
    3ϒϥ΢βͰςετ͍ͯ͠ΔͷͰ
    3passedʹͳΔ
    

    View Slide

32. Copyright© M&AΫϥ΢υ
    npx playwright show-reportΛ࣮ߦ͢ΔͱϨϙʔτ͕ݟΕΔ
    

    View Slide

33. Copyright© M&AΫϥ΢υ
    ϏδϡΞϧϦάϨογϣϯςετ΋΍ͬͯΈΑ͏🎭
    

    View Slide

34. Copyright© M&AΫϥ΢υ
    ίϯϙʔωϯτ͕εΫϦʔϯγϣοτͱҰக͢Δ͜ͱΛςετ͢Δ
    

    View Slide

35. Copyright© M&AΫϥ΢υ
    npm scriptsʹεΫϦʔϯγϣοτऔಘίϚϯυΛ௥Ճ
    ࣮ߦ͢ΔͱεΫϦʔϯγϣοτ͕ग़ྗ͞ΕΔ
    

    View Slide

36. Copyright© M&AΫϥ΢υ
    σϑΥϧτͰ͸ϧʔτσΟϨΫτϦ͔Β__snapshots__σΟϨΫτϦ
    ʹεΫϦʔϯγϣοτ͕อଘ͞ΕΔ
    ͜ͷεΫϦʔϯγϣοτͱςετ࣌ʹҰக͢Δ͔ΛνΣοΫ͢Δɻ
    ίϯϙʔωϯτʹࠩ෼͕͋ΔͱςετࣦഊʹͳΔ
    

    View Slide

37. Copyright© M&AΫϥ΢υ
    εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹
    

    View Slide

38. Copyright© M&AΫϥ΢υ
    εΫϦʔϯγϣοτʹΑΔϦάϨογϣϯςετ͕ࣦഊͨ͠৔߹
    ςετର৅͕ڱ͍ͷͰςΩετϨϕϧ
    ͷςετͰ͸௨աͯ͠͠·͏
    

    View Slide

39. Copyright© M&AΫϥ΢υ
    ActualͰࣦഊΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

40. Copyright© M&AΫϥ΢υ
    ࠩ෼͕খ͍͞৔߹͸DiffͰࡉ͔֬͘ೝͰ͖Δ
    

    View Slide

41. Copyright© M&AΫϥ΢υ
    🚀 Pros
    ● ࢼݧతͰ͸͋Δ͕े෼ར༻Ͱ͖Δ
    ● PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠
    ΍͍͢
    ● Ϋϩεϒϥ΢βͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ
    ΢β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ
    ● ςΩετϨϕϧͷςετʹൺ΂ͯεΫγϣςετ͸ίϯϙʔωϯ
    τશମΛ୲อͰ͖Δ
    

    View Slide

42. Copyright© M&AΫϥ΢υ
    🫠 Cons
    ● jsdomʹΑΔςετʹൺ΂Δͱ࣮ߦ͕͔͔࣌ؒΔ
    ● ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ
    ͳΔ
    ● CIͰ࣮ߦ͢Δ৔߹ɺࣄલʹϒϥ΢β͕Πϯετʔϧ͞ΕͨDocker
    ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮ཰Α͘࢖͏ͨΊʹҰखؒ
    ඞཁ
    

    View Slide

43. Copyright© M&AΫϥ΢υ
    Thanks for watching this :)
    

    View Slide