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

Visual Testing in FOLIO-sec

Visual Testing in FOLIO-sec

Yosuke Kurami

August 23, 2018
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

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