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

Nuxt.js SSRにおけるE2Eテストの実装

51e415f1cbb2ad80955b8a70aef3d410?s=47 samayotta
December 18, 2019

Nuxt.js SSRにおけるE2Eテストの実装

Nuxt.js SSRにおけるE2Eテストの実装
第1回Scramble tech
https://scramble.connpass.com/event/157710/
Nuxt.js SSRにおけるE2Eテストの実装 太田一行 資料

51e415f1cbb2ad80955b8a70aef3d410?s=128

samayotta

December 18, 2019
Tweet

Other Decks in Programming

Transcript

  1. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ Scramble Tech#1 גࣜձࣾ ϛΫγΟ ଠా Ұߦ


  2. ߏ੒ Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ 1. ͋Β͢͡ 2. എܠ 3. ࣮૷ྫͱӡ༻ͯ͠Έͨ݁Ռ 4.

    ٞ࿦ͱࠓޙͷݟ௨͠ 5. [image citations] 6. [self introduction]
  3. ͋Β͢͡

  4. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετͷ࣮૷ ҆ఆͨ͠QAʹࣗಈԽͰߩݙ

  5. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ ࢖༻͢Δಓ۩ ͍͔ͭ͘ͷಓ۩Λ૊Έ߹Θͤ

  6. None
  7. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ Our Application Nuxt.jsͰ࡞੒͞Εͨϑϩϯτ & PhoenixͰ࡞੒͞Εͨαʔό

  8. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ …with SSR time-to-contentͷվળ͕ݟࠐ ΊΔɻϏδωεཁ݅ʹΑͬͯ ͸ߟ͍͑ͨબ୒ࢶɻ

  9. എܠ

  10. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετ
 ࣮૷ͷ໨త ❖ ػցతʹ֬ೝͰ͖Δ෦෼ΛࣗಈԽ͠ɺ
 QAͷলྗԽʹߩݙ͢Δ͜ͱ ❖ ͔ͭɺ୯ମςετ΍APIςετʹ͸
 ΧόʔͰ͖ͳ͍߲໨͕ଘࡏ͢Δ

  11. E2E ςετʹ͍ͭͯ ❖ ιϑτ΢ΣΞςετͷҰछ 1. ࣗಈͰϒϥ΢βΛૢ࡞ 2. ࡞੒ͨ͠γφϦΦΛ࣮ߦ 3. εΫϦʔϯγϣοτ(SS)ࡱӨ౳

    4. ظ଴ͨ͠ඳը݁Ռ͔ௐ΂Δ
  12. E2E ςετͷ໾ׂ ❖ νʔϜͰ͸3ͭΛఆٛͨ͠ 1.σβΠϯ่Εͷݕग़ 2.σάϨʔγϣϯͷݕग़ 3.ϖʔδભҠΛอূ

  13. E2E ςετͷཹҙ఺ ❖ ֎෦ཁҼʹӨڹΛड͚ಘΔ ❖ ωοτϫʔΫ஗Ԇ౳ ❖ มߋίετ΍΍૿ ❖ ͦΕࣗମʹอकίετ͕


    ͔͔Δ ୯ମςετͷ୅ΘΓͰ͸ͳ͘ɺ
 ิ׬ͱͯ͠
  14. ୅දతͳπʔϧ ❖ Puppeteer ❖ Headless Chrome Node.js API ❖ maintenance

    by Chrome dev team ❖ ཁ఺ ❖ ChromeΛεΫϦϓτ͔Β
 ૢΔϥΠϒϥϦ ❖ ࠾༻ཧ༝ ❖ vs puppeteer-core ❖ jest-puppeteerͷଘࡏ ❖ jest ςετ؀ڥ͕͢Ͱʹଘࡏͨͨ͠Ί
  15. Appཁ݅1:SSR֓ཁ ❖ WebApp͸Sever-Side- Rendering (SSR)Λ࠾༻ ❖ HTML&propsΛ߹Θͤͯ
 ࣄલϨϯμϦϯά͢Δ ❖ JSͰॻ͔Εͨcomponent͕

    propsΛࢀর͠ͳ͕Β஗Εͯ ඳը͞ΕΔ ❖ ΞϧΰϦζϜ͸ຊεϥΠυͷ είʔϓ֎
  16. Appཁ݅1:SSR֓ཁ ❖ ࠾༻ཧ༝ ❖ time-to-contentͷվળ͕
 Ϗδωε্ΫϦςΟΧϧ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖ Node.js

    ࣮ߦ؀ڥ͕ඞཁ ΞΫηεͯ͠Կ͔͕දࣔ ͞ΕΔ·Ͱͷ࣌ؒ
  17. Appཁ݅2:SMSೝূ ❖ ॴ༩ͷཁ݅ͱͯ͠ɺSMSೝূΛ ೝূʹ༻͍Δ ❖ Puppeteer͸ਖ਼نͷํ๏Ͱ SMSೝূΛಥഁͰ͖ͳ͍ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖

    SMSೝূΛϞοΫͨ͠
 ઐ༻ͷαʔόΛཱͯΔඞཁ
  18. ཁ݅ͷ੔ཧ 1. CI/CDͰఆظ࣮ߦ͢Δ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3.

    (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ
  19. ࣮૷ྫ

  20. None
  21. ΞϓϦέʔγϣϯ෦෼ ❖ Nuxt.js + Phoenix + Nginx ❖ Nuxt.js -

    Nginxؒ͸Docker ωοτϫʔΫͰܨ͕͍ͬͯΔ ❖ Phoenixʹ͸E2Eςετ༻ͷ ؀ڥઃఆΛ௥Ճ ❖ SMSೝূ͸ϞοΫ͞Ε͍ͯΔ
  22. ΞϓϦέʔγϣϯ෦෼ ❖ ޻෉ͨ͠ϙΠϯτ ❖ Nuxt.js͸Nodeίϯςφʹ ❖ Phoenixͷplugͱͯ͠
 SMSೝূػೳΛϞοΫ
 ՝୊̍ΛղܾͰ͖ͨʂ ՝୊̎ΛղܾͰ͖ͨʂ

  23. Docker-Compose on CircleCI ❖ Docker-Compose ❖ Nuxt.js ίϯςφ ❖ Nginx

    ίϯςφ ❖ Puppeteer ίϯςφ ❖ cronͰఆظ࣮ߦ $ docker-compose up
  24. Docker-Compose on CircleCI ❖ Nuxt.js ίϯςφ ❖ Node+ Appຊମ ❖

    Nginx ίϯςφ ❖ ຊ൪Ͱ͸S3-CloudFrontͷϝσΟΞ αʔό ❖ Puppeteer ίϯςφ ❖ Node + Puppeteer + Chrome ❖ γφϦΦεΫϦϓτ΍ਖ਼ղσʔ λɺ࣮ࡍʹࡱӨͨ͠SSͳͲͷσʔ λΛؚΉςετ࣮ߦओମ
  25. Docker-Compose on CircleCI ❖ ϩʔΧϧͰ΋ಉ͡ίϚϯυ
 
 Ͱςετ࣮ߦͰ͖Δ $ docker-compose up

  26. ςετͷ࣮ߦͱ௨஌ ❖ Puppeteer͕ςετΛ࣮ߦ ❖ S3͔Βਖ਼ղը૾Λऔಘ͠ɺ ίϯςφʹؚΊͯϏϧυ ❖ ࡞੒ͨ͠SS͸ArtifactԽ ❖ ϒϥ΢β͔Β͙͢ݟΒΕΔ!

    ❖ ݁Ռ͸URL͖ͭͰ
 Slackʹ௨஌ ໰୊ͷૣظಛఆʹ໾ཱͭʂ
  27. 1. Slackʹຖே࣮ߦ݁Ռ͕௨஌͞ΕΔ 2. ࣦഊ͍ͯͨ͠ΒɺArtifactͱͯ͠อଘͨ͠SSΛࢀরɻ
 ࣦഊͨ͠ཧ༝Λಛఆ͢Δɻ 3. ίʔυΛमਖ਼͢Δɻ 4. ϩʔΧϧ͔Β$docker-compose up

    5. ਖ਼͘͠ੜ੒ͨ͠ը૾ΛS3ʹϓογϡ ӡ༻ϑϩʔ CIͰ
 ఆظ࣮ߦ ! 2step!
  28. ཁ݅࠶ܝ 1. CI/CDͰఆظ࣮ߦ͍ͨ͠ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3.

    (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ ཁ݅Λຬͨͤͨʂ
  29. 2ϲ݄΄Ͳӡ༻ͨ݁͠Ռ ❖ ઃఆͨ͠໨ඪ͸࣮ݱͰ͖͍ͯͦ͏ ❖ σβΠϯ่Ε๷ࢭ ❖ σάϨʔγϣϯ๷ࢭ ❖ ϖʔδભҠͷอূ ❖

    ෭࣍తͳ͋Γ͕ͨΈ΋͍͘Β͔͋Δ ❖ ୯ମςετ΍APIςετͷψέ͕ݟ͔ͭΔ͜ͱ΋
  30. ٞ࿦ͱࠓޙͷݟ௨͠

  31. ٞ࿦ ❖ ͜Ε͸ਖ਼͍͠end-to-endςετͱݺ΂Δͷ͔ʁ ❖ end-to-endͱ͸͍͑ͳ͍
 ͳͥͳΒαʔόଆΛݫີʹอূͰ͖͍ͯͳ͍͔Β 1. DBɺΠϯϑϥͷੑ࣭͕ຊ൪ͱ͸ҟͳΔ 2. SMSೝূ෦͕ϞοΫ͞Ε͍ͯΔ

    ❖ SMSೝূΛճආͭͭ͠αʔόίʔυશମΛͦͷ··࢒͢͜ͱ ͕Ͱ͖Ε͹end-to-endͱݺ΂Δ͔ʁ 1΋ಉ༷ʹඞਢ͔ʁ օ͞Μͷྑ͍ΞΠσΞ͓଴͍ͪͯ͠·͢mm
  32. ࠓޙͷ՝୊ ❖ E2Eςετͷอकੑ޲্ ❖ E2Eςετ͸෗Γ΍͍͢ ❖ ߋ৽πʔϧΛ੔උͯ͠෗Γʹ͘͘ ❖ ୯ମςετɺAPIςετͷΧόϨοδ޲্ ❖

    E2Eςετʹґଘͤͣɺόϥϯεͷྑ͍ςετମ੍Λ
  33. ༨ஊ(࣮૷ͨ͠ײ૝) ❖ ࣮૷࣌ɺCORS͕Τϥʔ͕ͪ͠Ͱਏ͍ ❖ Chrome devtool, curlͷ༻๏ʹৄ͘͠ͳΔ ❖ ϑϩϯτɺαʔόɺΠϯϑϥΛԣஅ͢ΔλεΫ ❖

    શͯͷΤϯδχΞ͕શͯͷίʔυʹ੹೚Λ΋ͭ
 @ΨΠυϥΠϯ ❖ DockerͱCircleCIʹ਌͠ΈΛ࣋ͯΔΑ͏ʹͳͬͨ
  34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

  35. freepik contributions: https://jp.freepik.com/free-vector/flat-robot-character-with-different-poses-collection_1510587.htm#page=2&query=robot&position=1
 https://www.freepik.com/free-vector/businessman-holding-thumb-finger-stopwatch_1311422.htm#page=1&query=quickly&position=1 https://www.freepik.com/free-vector/maintenance-concept-illustration_5421740.htm#page=1&query=maintenance&position=0 https://jp.freepik.com/free-vector/bundle-of-engineering-set-icons_5984951.htm#query=computer%20tools&position=16 https://jp.freepik.com/free-vector/the-browser-window-with-the-donate-button_4015769.htm#page=1&query=browser&position=7 https://jp.freepik.com/free-photo/work-desk-coffee-documents-and-laptop_1189547.htm#page=1&query=%E6%9B%B8%E9%A1%9E&position=13
 Google2ஈ֊ೝূϓϩηε -

    Google https://www.google.com/landing/2step/?hl=ja phoenix - seeklogo https://seeklogo.com/vector-logo/273793/phoenix image citation
  36. ଠా Ұߦ ❖ Software Engineer1೥໨ ❖ ϑϩϯτΤϯυ ❖ ػցֶश ❖

    ུྺ ❖ 2019.4 גࣜձࣾϛΫγΟ ❖ 2019.3 ژ౎େֶେֶӃ 
 ৘ใֶݚڀՊ ஌ೳ৘ใֶઐ߈ ଔ ❖ ࿈བྷઌ ❖ @samayotta ❖ samayotta@gmail.com