Visual Testing in FOLIO-sec

Transcript

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

   View Slide

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

   View Slide

3. ಥવͰ͕͢
   

   View Slide

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

   View Slide

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

   View Slide

6. locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ

   nodeName, textContent, classList શ෦֬ೝ͢Δʁ
   Ͳ͜·ͰΞαʔτ͠·͔͢ʁ
   
   
   
   Good evening, {{name}}.
   
   
   Bon soir, {{name}}.
   
   Other...
   
   
   

   View Slide

7. ʮલճ੒ޭͨ͠DOMग़ྗʯΛexpectedʹ͢Ε͹ɺ
   ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ
   4OBQTIPUςετͰָ͕Ͱ͖Δ
   The latest snapshot (DOM String)
   The actual snapshot (DOM String)
   Update if snapshot is accepted
   Assertion
   

   View Slide

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

   View Slide

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

   View Slide

10. Ͳ͏΍Δͷ͔
    

    View Slide

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

    View Slide

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

    View Slide

13. 4UPSZCPPL
    

    View Slide

14. - ඳըʹඞཁͳpropsΛ༩͑Ε͹UIΛ࠶ݱͰ͖Δ

    Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍
    - ΠϨΪϡϥʔͳέʔεͷݟͨ໨΋؆୯ʹ࡞ΕΔ
    4UPSZCPPL͸ίϯϙʔωϯτͷςετπʔϧ
    

    View Slide

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

    View Slide

16. https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલ
    ը૾ճؼςετͷͨΊͷCLI
    - ൺֱର৅ͱ͢ΔGit commitͷಛఆ
    - ը૾ͷࠩ෼ΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ
    - ൺֱ݁ՌΛAWS S3΍Google Cloud Storage΁Ξοϓϩʔυ
    - ݁ՌΛSlack΍GitHub΁௨஌
    औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ
    

    View Slide

17. - Reactίϯϙʔωϯτ΍CSSΛมߋͯ͠git push
    - CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ
    - reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ
    - SlackͱGitLabͷPRʹ௨஌͕ඈͿ
    ϫʔΫϑϩʔ·ͱΊ
    

    View Slide

18. View Slide

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

    View Slide

20. ݱ৔Ͱͷ࿩
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

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

    View Slide

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

    View Slide

33. - Ϧιʔε͸ ͰઌಡΈ

    ※ ݱঢ়͸preview-head.htmlʹgulpͰهड़
    ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ
    

    View Slide

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

    View Slide

35. View Slide