Visual Testing in FOLIO-sec

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ʹ௨஌͕ඈͿ ϫʔΫϑϩʔ·ͱΊ
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 ※ ໋໊͸ʮࣗ෼Ͱٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢ Α͠ɺࣗ෼Ͱ࡞Ζ͏
31. - ֤ϝτϦΫε(DOMཁૉ਺/Ϧϑϩʔճ਺/ελΠϧ ࠶ܭࢉճ਺)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘ Λ஗Ԇ - CSSΞχϝʔγϣϯͷࣗಈOFF [JTVJͷಛ௃ɿ҆ఆੑ
32. - ෳ਺ىಈͨ͠PuppeteerͰฒྻʹը૾औಘ - Storybookͷը໘ϩʔυ͸1ճͷΈ - storyͷ੾Γସ͑͸ postMessage [JTVJͷಛ௃ɿੑೳ
33. - Ϧιʔε͸ <link rel=“preload” > ͰઌಡΈ
 ※ ݱঢ়͸preview-head.htmlʹgulpͰهड़ ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ
34. - StorybookͰը૾ճؼςετΛ͍ͯ͠·͢ - DOMϕʔεͷεφοϓγϣοτςετͱൺ΂Δ ͱɺϋʔυϧ͸ߴ͍͚Ͳɺಋೖ͢ΔՁ஋͸े෼ʹ ͋Δͱࢥ͏ ·ͱΊ