Visual Testing in FOLIO-sec

Visual Testing in FOLIO-sec

893f54413c2bd9ba41d11d753aacaf2c?s=128

Yosuke Kurami

August 23, 2018
Tweet

Transcript

  1. FOLIOʹը૾ճؼςετΛಋೖ ͨ͠࿩ 2018/8/23 Bonfire Frontend#2

  2. - ૔ݟ ༸ี a.k.a. @Quramy - WebϑϩϯτΤϯυΤϯδχΞ - ൒೥લʹFOLIOͱ͍͏ωοτূ݊ձࣾʹೖࣾ ࣗݾ঺հ

  3. ಥવͰ͕͢

  4. ը໘ͷςετॻ͍ͯ·͔͢ʁ

  5. - DOMͷΞαʔγϣϯΛॻ͘ͷ͸໘౗ - Ͳ͜·ͰΞαʔτ͢Δ͔ɺ։ൃऀ࣍ୈʹͳΓ͕ͪ - Ξαʔτ͕গͳ͚Ε͹ɺෆ҆ - Ξαʔτ͕ଟ͗͢Ε͹ɺϝϯς͕େม ը໘ςετ͋Δ͋Δ

  6. locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ
 nodeName, textContent, classList શ෦֬ೝ͢Δʁ Ͳ͜·ͰΞαʔτ͠·͔͢ʁ <template> <div

    class="greeting"> <div v-if="locale === 'en'"> Good evening, {{name}}. </div> <div v-else-if="locale === 'fr'"> Bon soir, {{name}}. </div> <div v-else>Other...</div> </div> </template>
  7. ʮલճ੒ޭͨ͠DOMग़ྗʯΛexpectedʹ͢Ε͹ɺ ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ 4OBQTIPUςετͰָ͕Ͱ͖Δ The latest snapshot (DOM String) The actual

    snapshot (DOM String) Update if snapshot is accepted Assertion
  8. DOMϕʔεsnapshotςετ͸ಋೖ͕༰қɻ ҰํͰɺDOMϕʔεͰ͸ελΠϧͷݕূ͸೉͍͠ɻ CSSͷద༻݁Ռ·ͰؚΊͯࣗಈςετͰ͖Δͱخ͍͠ɻ %0.WT*NBHF

  9. ͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ಺༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ౓΋͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ ը૾࢖ͬͨΒ͑͑΍Μ͚

  10. Ͳ͏΍Δͷ͔

  11. - UIίϯϙʔωϯτͷΩϟϓνϟը૾ੜ੒ - औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ ը૾ճؼςετʹඞཁͳཁૉ

  12. FOLIOͷϑϩϯτΤϯυ͸ React + Reduxߏ੒ɻ Reactίϯϙʔωϯτ։ൃͰ͸StorybookΛར༻ɻ ͜ΕΛ࢖Θͳ͍ख͸ͳ͍ 6*ίϯϙʔωϯτͷΩϟϓνϟը૾ੜ੒

  13. 4UPSZCPPL

  14. - ඳըʹඞཁͳpropsΛ༩͑Ε͹UIΛ࠶ݱͰ͖Δ
 Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍ - ΠϨΪϡϥʔͳέʔεͷݟͨ໨΋؆୯ʹ࡞ΕΔ 4UPSZCPPL͸ίϯϙʔωϯτͷςετπʔϧ

  15. Storybook͔ΒΩϟϓνϟը૾Λऔಘ͢Δπʔϧ΋৭ʑ ex: imageshots / roki / storybook-chrome-screenshot, etc… ※ Ωϟϓνϟऔಘʹ͍ͭͯ͸ޙड़

    ΩϟϓνϟΛࡱΔͷ΋༰қ
  16. https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલ ը૾ճؼςετͷͨΊͷCLI - ൺֱର৅ͱ͢ΔGit commitͷಛఆ - ը૾ͷࠩ෼ΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ - ൺֱ݁ՌΛAWS

    S3΍Google Cloud Storage΁Ξοϓϩʔυ - ݁ՌΛSlack΍GitHub΁௨஌ औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ
  17. - Reactίϯϙʔωϯτ΍CSSΛมߋͯ͠git push - CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ - reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ - SlackͱGitLabͷPRʹ௨஌͕ඈͿ ϫʔΫϑϩʔ·ͱΊ

  18. None
  19. ͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ಺༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ౓΋͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ

  20. ݱ৔Ͱͷ࿩

  21. ίʔυϕʔεͷมߋʹର͢Δݟͨ໨ͷӨڹ͕Ұ໨ྎવͳͷͰɺ ϒϥϯσΟϯά࡮৽ʢ8/8ʹਖ਼ࣜϦϦʔε͠·ͨ͠ʂʣͰ͸ ໾ʹཱͬͨɻ ҰํͰɺҰےೄͰ͸͍͔ͳ͍՝୊΋ු্ɻ ࣮ࡍʹӡ༻ͯ͠Έͯ

  22. ِཅੑޡݕग़(ຊ౰͸ਖ਼͍͠ͷʹɺޡͬͯࠩ෼ൃੜ ͱΈͳ͞ΕΔ)͕ଟൃ - ΞηοτಡΈࠐΈͷ௥͍ӽ͠ - CSSͷద༻ͷ௥͍ӽ͠ ൃੜͨ͠໰୊ᶃεΫγϣ͕ෆ҆ఆ

  23. ը૾ͷಡΈࠐΈલʹεΫγϣ͞Εͯϩΰ͕ܽམ ൵͍ࣦ͠ഊྫͦͷ

  24. webϑΥϯτͷಡΈࠐΈલʹεΫγϣ͞Εͯจࣈ͕ζϨΔ ൵͍ࣦ͠ഊྫͦͷ

  25. PCͱεϚϗ྆ํͷViewportͰεΫγϣΛࡱΔstoryͰɺ Viewportͷมߋʹ෇ਵ͢ΔελΠϦϯάܭࢉ׬ྃલʹΩϟϓ νϟ͞ΕͯɺຊདྷSP༻ͷΩϟϓνϟ͕PC޲͚ͷը૾ʹͳͬ ͯ͠·ͬͨɻ ൵͍ࣦ͠ഊྫͦͷ

  26. ൃੜͨ͠໰୊ᶄɿ$*͕௕͍ 1ճpushͯ͠CI͕ճΓ͖Δ·Ͱɺ15෼Ҏ্ඞཁ

  27. 10෼ఔ౓ΛStorybookΩϟϓνϟऔಘ͕઎Ί͍ͯͨɻ (Ωϟϓνϟର৅ը૾਺͸500ఔ౓) 1ຕ͝ͱʹϒϥ΢βͷϖʔδϩʔυ͕ൃੜ͢Δ࣮૷Ͱ͋ͬͨ ͨΊɺjsͷධՁ࣌ؒ౳͕ਖੵঢ়ଶͰ݁ߏͳϘϦϡʔϜɻ $*͕࣌ؒ௕͍

  28. ʮ҆ఆͯ͠ྔ࢈͢ΔʯΛߟ͑ͳ͚Ε͹ɺͷ࿩ɻ ҆ఆੑɾੑೳͷ՝୊ͱ΋ʹʮStorybookͷΩϟϓνϟऔಘʯ ʹىҼ͍ͯ͠ΔͨΊɺ͜ͷ෦෼Λ1͔Βݟ௚͢͜ͱʹɻ (౰ॳ͸طଘͷOSSΛར༻͍ͯͨ͠) ΩϟϓνϟΛࡱΔͷ͸༰қʜ

  29. StorybookͷΩϟϓνϟΛࡱΔCLIΛ࡞Γ·ͨ͠ɿ https://github.com/Quramy/zisui ※ ໋໊͸ʮࣗ෼Ͱٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢ Α͠ɺࣗ෼Ͱ࡞Ζ͏

  30. None
  31. - ֤ϝτϦΫε(DOMཁૉ਺/Ϧϑϩʔճ਺/ελΠϧ ࠶ܭࢉճ਺)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘ Λ஗Ԇ - CSSΞχϝʔγϣϯͷࣗಈOFF [JTVJͷಛ௃ɿ҆ఆੑ

  32. - ෳ਺ىಈͨ͠PuppeteerͰฒྻʹը૾औಘ - Storybookͷը໘ϩʔυ͸1ճͷΈ - storyͷ੾Γସ͑͸ postMessage [JTVJͷಛ௃ɿੑೳ

  33. - Ϧιʔε͸ <link rel=“preload” > ͰઌಡΈ
 ※ ݱঢ়͸preview-head.htmlʹgulpͰهड़ ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ

  34. - StorybookͰը૾ճؼςετΛ͍ͯ͠·͢ - DOMϕʔεͷεφοϓγϣοτςετͱൺ΂Δ ͱɺϋʔυϧ͸ߴ͍͚Ͳɺಋೖ͢ΔՁ஋͸े෼ʹ ͋Δͱࢥ͏ ·ͱΊ

  35. None