Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kubotak
October 27, 2022

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

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

kubotak

October 27, 2022
Tweet

More Decks by kubotak

Other Decks in Programming

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 :)