Chromaticで手軽にVisual Regression Testを導入する / Visual Regression Testing with Chromatic

Transcript

1. 1.

   ChromaticͰ खܰʹ Visual Regression TestΛ ಋೖ͢Δ 2019/06/28 We Are JavaScripters!

   @33rd
2. 2.

   ࠷ۙௐ΂͍ͯͨ πʔϧͷ࿩Λ͠·͢

3. 3.

   • Shingo Yamazaki • αΠϘ΢ζגࣜձࣾ (2018/12~) • kintone ։ൃνʔϜɹ݉
 ϑϩϯτΤϯυΤΩεύʔτνʔϜ

   • #WeJS ॳࢀՃͰ͢ About me zaki-yama zaki___yama
4. 4.

   • ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ
 ͓ख఻͍Λ͍ͯ͠Δ • JS -> TypeScript Ҡߦ͕ϝΠϯ • ʮUI

   ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏࿩͕͋ͬͨ • ݱࡏ͸ Storybook + Storyshots Λར༻த Intro
5. 5.

   • UIίϯϙʔωϯτͷ։ൃ & ϒϥ΢δϯά؀ڥΛఏڙ ͢ΔOSS • ίϯϙʔωϯτΛΞϓϦ έʔγϣϯͱಠཱͨ͠؀ڥ Ͱ։ൃͰ͖Δ •

   ಈ࡞͢Δίϯϙʔωϯτ͕ ҰཡͰݟΒΕΔ Storybook?
6. 6.

   • StorybookͷΞυΦϯ • JestͷSnapshot TestingΛར༻ • ίϯϙʔωϯτͷSnapshotΛऔ ಘ͠ɺอଘͯ͋͠Δ΋ͷͱൺֱ • DOMͷൺֱͳͷͰɺελΠϧͷ

   ่Εͱ͔͸ݕ஌Ͱ͖ͣ Storyshots? IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
7. 7.

   https://twitter.com/domyen/status/1138861429669412864?s=20

8. 8.

   https://twitter.com/domyen/status/1138861429669412864?s=20 %FTJHO
   TZTUFN͸͓͖ͯ͞
   ͜ͷπʔϧؾʹͳΔ

9. 9.

   Chromatic

10. 10.

    Chromatic 

11. 11.

    • Visual Testing Λ΍ͬͯ͘ΕΔαʔϏε • “Made for Storybook by Storybook

    maintainers” • OSS͸ແྉ Chromatic
12. 12.

    DEMO

13. 13.

    ࢖͍ํ

14. 14.

    • Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ • https://www.chromaticqa.com/ ʹΞΫηε • GitHubΞΧ΢ϯτͰSign in •

    Add project ͰϦϙδτϦΛબ୒ ΞΧ΢ϯτొ࿥ #JUCVDLFU
    (JU-BC
    ʹ΋ରԠ
15. 15.

    ϦϙδτϦଆͰඞཁͳͷ͸3 Step $ISPNBUJDΛ
    Πϯετʔϧ TUPSZCPPLDPOpHKTʹ
    ߦ௥Ճ
    εΫϦϓτ࣮ߦ project͝ͱʹϢχʔΫͳapp code

16. 16.

    ͜ͷ63-ʹΞΫηε

17. 17.

    • ͋ͱ͸chromatic testͷͨͼʹbuild & diffൺֱ ॳճͷbuild੒ޭ

18. 18.

    package.json CIͷઃఆ(CircleCIͷ৔߹) .circleci/config.yml

19. 19.

    • \ • CIͷઃఆ(CircleCIͷ৔߹) BQQDPEF
    Ͱ౉͍ͯͨ͠஋

20. 20.

    Ͱ͖ͨ

21. 21.

    EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZ
    શ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλ ε΋ߋ৽͞ΕΔ %0.ʹมߋ͋Ε͹͜͜ʹදࣔ͞ΕΔ

22. 22.

    ศརͳػೳ

23. 23.

    ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯ ν΍աڈͷϏϧυ݁Ռʹ੾Γସ͑ΒΕΔ Library

24. 24.

    ※Standard/Pro ϓϥϯͷΈ Multi Browser Support

25. 25.

    ࢦఆͨ͠ViewportͰෳ਺ͷSnapshotΛࡱͬͯ͘ ΕΔ Viewports

26. 26.

    Tips

27. 27.

    • ࠩ෼͕͋ͬͯ΋Ϗϧυࣗମ͸Passʹ͢Δ • ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷ εςʔλε͸FailedͰϚʔδͰ͖ͳ͍ʯͱͳΔ CI༻ͷεΫϦϓτʹ͸ --exit-zero-on-changesΛ͚ͭΔ

28. 28.

    Open source plan͸৹͕ࠪඞཁ 4JHO
    JOͨ͠Βී௨ʹ࢖͑ͨͷͰ
    1VCMJD
    3FQPTJUPSZͳΒͳΜͰ΋0,ͳͷ͔ͱࢥͬͯ·ͨ͠

29. 29.

    • ҰԠChatͰฉ͍͚ͨͲ
 ΍ͬͺΓͦ͏ͬΆ͍ Open source plan͸৹͕ࠪඞཁ

30. 30.

    • ໌ه͞Εͯͳ͍͕
 ͜Ε΋ChatͰฉ͍ͯΈͨ • গͳ͘ͱ΋Browser͸
 ChromeͷΈͱͷ͜ͱ Open source plan͸ starter

    planѻ͍ʁ
31. 31.

    ೔ຊޠϑΥϯτ͕… ͜Ε͕ ͜͏ͳͬͨ

32. 32.

    • .storybook/preview-head.htmlͰ
 web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ ೔ຊޠϑΥϯτ͕…

33. 33.

    • ։ൃνʔϜʹ
 ϑΟʔυόοΫ͢Δɺ
 ͱ͸ݴͬͯͨ ೔ຊޠϑΥϯτ͕…

34. 34.

    • StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ͸
 ͔ͳΓ͓खܰʹಋೖͰ͖Δ • diff͸एׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳ͸े෼ • ଞπʔϧͱൺֱͨ͠Θ͚Ͱ͸ͳ͍Ͱ͕͢ • OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ