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Ϋϥ΢υ Profile ٱอా ݡೋ࿕ kubotak-is kubotak_public kenjiro.kubota גࣜձࣾM&AΫϥ΢υॴଐ TypeScript

    PHP https://kubotak.page ϓϩϑΣογϣφϧWebϓϩάϥϛϯά Laravel (ڞஶ) Ѫݘɿ౾ࣲ
  2. Copyright© M&AΫϥ΢υ ٻਓ޿ࠂαΠτͷΑ͏ͳM&AμΠϨΫτϚονϯά 5 ങ͍ख ɾҊ݅ใु͸M&A੒ޭใुͷΈ ɾ࠷௿ख਺ྉͳ͠ ɾചΓखιʔγϯάͷνϟωϧ͕૿͑Δ ɾM&AχʔζΛൃ৴͢Δ͚ͩͰചΓखΛू٬ ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ

    ɾજࡏ૚ʹ΋Ϧʔν͕Մೳ ख਺ྉແ ྉ ※ϓϥοτϑΥʔϜҊ݅ͷ৔߹ ※ ചΓख 1.ܝࡌ͢Δ ɾങ͍खͷM&AχʔζΛࣗΒௐ΂Δ͜ͱ͕Մೳ
 ɾ஥հۀऀΛհͣ͞ʹμΠϨΫτʹ΍ΓऔΓՄೳ
 ɾങ͍खͷM&A୲౰ऀʹ௚઀ίϯλΫτΛͱΕΔ
 ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ 2.ΦϑΝʔ͢Δ M&Aɾग़ࢿχʔζΛܝࡌ ങ͍खͷϝϦοτ ചΓखͷϝϦοτ ɾ஥հۀऀΛ࢖Θͳ͍ͷͰख਺ྉ͕ແྉ ʓʓྖҬͷձࣾΛ ืू͠·͢ ͜ͷձࣾͱҰॹʹ ΍͍͖͍ͬͯͨʂ 5 PR
  3. Copyright© M&AΫϥ΢υ Svelteͱ͸ʁ Svelte • Write less code ◦ গͳ͍هड़

    • No virtual DOM ◦ Ϗϧυ࣌ʹVanilla JSʹίϯύΠϧ • Truly reactive ◦ એݴతͳ state ۦಈܕͷίʔυΛॻ͘ඞཁ͕ͳ͍ React΍Vue.jsʹྨ͢ΔUIߏஙͷͨΊͷίϯϙʔωϯτϑϨʔϜϫʔΫ feature
  4. Copyright© M&AΫϥ΢υ SvelteKitͷجຊతͳσΟϨΫτϦߏ੒ ࡞੒࣌ʹҎԼΛબ୒͢ΔͱPlaywrightʹ ΑΔςετ͕ॳظಋೖ͞ΕΔ ✔ Add Playwright for browser

    testing? … No / Yes ※Playwrightʹ͍ͭͯ͸ޙ൒Ͱ͓࿩͠·͢ ※ެࣜखॱͰεέϧτϯΛ࡞੒ͨ͠௚ޙͷσΟϨΫτϦ
  5. Copyright© M&AΫϥ΢υ 🚀 Pros • ࢼݧతͰ͸͋Δ͕े෼ར༻Ͱ͖Δ • PR࣌ʹίϯϙʔωϯτͷεΫϦʔϯγϣοτ͕͋ΔͱϨϏϡʔ͠ ΍͍͢ •

    Ϋϩεϒϥ΢βͰεΫϦʔϯγϣοτ͕ࡱΒΕΔͷͰಛఆͷϒϥ ΢β่Εʹࣄલʹؾͮ͘͜ͱ͕Ͱ͖Δ • ςΩετϨϕϧͷςετʹൺ΂ͯεΫγϣςετ͸ίϯϙʔωϯ τશମΛ୲อͰ͖Δ
  6. Copyright© M&AΫϥ΢υ 🫠 Cons • jsdomʹΑΔςετʹൺ΂Δͱ࣮ߦ͕͔͔࣌ؒΔ • ϦϙδτϦʹը૾Λͦͷ··ஔ͍͍ͯΔͷͰকདྷతͳ༰ྔ͕ؾʹ ͳΔ •

    CIͰ࣮ߦ͢Δ৔߹ɺࣄલʹϒϥ΢β͕Πϯετʔϧ͞ΕͨDocker ΠϝʔδΛϗεςΟϯά͓ͯ͘͠ͳͲޮ཰Α͘࢖͏ͨΊʹҰखؒ ඞཁ