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

We Are JavaScripters! @33rd【初心者歓迎・LT会】の登壇資料です

デモ動画：https://youtu.be/9qsX_UsyG-g

Transcript

1. ChromaticͰ खܰʹ Visual Regression TestΛ ಋೖ͢Δ 2019/06/28 We Are JavaScripters! @33rd
2. ࠷ۙௐ΂͍ͯͨ πʔϧͷ࿩Λ͠·͢
3. • Shingo Yamazaki • αΠϘ΢ζגࣜձࣾ (2018/12~) • kintone ։ൃνʔϜɹ݉
 ϑϩϯτΤϯυΤΩεύʔτνʔϜ • #WeJS ॳࢀՃͰ͢ About me zaki-yama zaki___yama
4. • ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ
 ͓ख఻͍Λ͍ͯ͠Δ • JS -> TypeScript Ҡߦ͕ϝΠϯ • ʮUI ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏࿩͕͋ͬͨ • ݱࡏ͸ Storybook + Storyshots Λར༻த Intro
5. • UIίϯϙʔωϯτͷ։ൃ & ϒϥ΢δϯά؀ڥΛఏڙ ͢ΔOSS • ίϯϙʔωϯτΛΞϓϦ έʔγϣϯͱಠཱͨ͠؀ڥ Ͱ։ൃͰ͖Δ • ಈ࡞͢Δίϯϙʔωϯτ͕ ҰཡͰݟΒΕΔ Storybook?
6. • StorybookͷΞυΦϯ • JestͷSnapshot TestingΛར༻ • ίϯϙʔωϯτͷSnapshotΛऔ ಘ͠ɺอଘͯ͋͠Δ΋ͷͱൺֱ • DOMͷൺֱͳͷͰɺελΠϧͷ ่Εͱ͔͸ݕ஌Ͱ͖ͣ Storyshots? IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
7. https://twitter.com/domyen/status/1138861429669412864?s=20
8. https://twitter.com/domyen/status/1138861429669412864?s=20 %FTJHO
   TZTUFN͸͓͖ͯ͞
   ͜ͷπʔϧؾʹͳΔ
9. Chromatic
10. Chromatic 
11. • Visual Testing Λ΍ͬͯ͘ΕΔαʔϏε • “Made for Storybook by Storybook maintainers” • OSS͸ແྉ Chromatic
12. DEMO
13. ࢖͍ํ
14. • Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ • https://www.chromaticqa.com/ ʹΞΫηε • GitHubΞΧ΢ϯτͰSign in • Add project ͰϦϙδτϦΛબ୒ ΞΧ΢ϯτొ࿥ #JUCVDLFU
    (JU-BC
    ʹ΋ରԠ
15. ϦϙδτϦଆͰඞཁͳͷ͸3 Step $ISPNBUJDΛ
    Πϯετʔϧ TUPSZCPPLDPOpHKTʹ
    ߦ௥Ճ
    εΫϦϓτ࣮ߦ project͝ͱʹϢχʔΫͳapp code
16. ͜ͷ63-ʹΞΫηε
17. • ͋ͱ͸chromatic testͷͨͼʹbuild & diffൺֱ ॳճͷbuild੒ޭ
18. package.json CIͷઃఆ(CircleCIͷ৔߹) .circleci/config.yml
19. • \ • CIͷઃఆ(CircleCIͷ৔߹) BQQDPEF
    Ͱ౉͍ͯͨ͠஋
20. Ͱ͖ͨ
21. EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZ
    શ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλ ε΋ߋ৽͞ΕΔ %0.ʹมߋ͋Ε͹͜͜ʹදࣔ͞ΕΔ
22. ศརͳػೳ
23. ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯ ν΍աڈͷϏϧυ݁Ռʹ੾Γସ͑ΒΕΔ Library
24. ※Standard/Pro ϓϥϯͷΈ Multi Browser Support
25. ࢦఆͨ͠ViewportͰෳ਺ͷSnapshotΛࡱͬͯ͘ ΕΔ Viewports
26. Tips
27. • ࠩ෼͕͋ͬͯ΋Ϗϧυࣗମ͸Passʹ͢Δ • ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷ εςʔλε͸FailedͰϚʔδͰ͖ͳ͍ʯͱͳΔ CI༻ͷεΫϦϓτʹ͸ --exit-zero-on-changesΛ͚ͭΔ
28. Open source plan͸৹͕ࠪඞཁ 4JHO
    JOͨ͠Βී௨ʹ࢖͑ͨͷͰ
    1VCMJD
    3FQPTJUPSZͳΒͳΜͰ΋0,ͳͷ͔ͱࢥͬͯ·ͨ͠
29. • ҰԠChatͰฉ͍͚ͨͲ
 ΍ͬͺΓͦ͏ͬΆ͍ Open source plan͸৹͕ࠪඞཁ
30. • ໌ه͞Εͯͳ͍͕
 ͜Ε΋ChatͰฉ͍ͯΈͨ • গͳ͘ͱ΋Browser͸
 ChromeͷΈͱͷ͜ͱ Open source plan͸ starter planѻ͍ʁ
31. ೔ຊޠϑΥϯτ͕… ͜Ε͕ ͜͏ͳͬͨ
32. • .storybook/preview-head.htmlͰ
 web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ ೔ຊޠϑΥϯτ͕…
33. • ։ൃνʔϜʹ
 ϑΟʔυόοΫ͢Δɺ
 ͱ͸ݴͬͯͨ ೔ຊޠϑΥϯτ͕…
34. • StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ͸
 ͔ͳΓ͓खܰʹಋೖͰ͖Δ • diff͸एׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳ͸े෼ • ଞπʔϧͱൺֱͨ͠Θ͚Ͱ͸ͳ͍Ͱ͕͢ • OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ