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ʹ௨஌͕ඈͿ ϫʔΫϑϩʔ·ͱΊ

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