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

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ͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ