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

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

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

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

50fc0fdc2327ecbe7350645812de52e3?s=128

Shingo Yamazaki

June 28, 2019
Tweet

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 %FTJHOTZTUFN͸͓͖ͯ͞ ͜ͷπʔϧؾʹͳΔ

  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͸৹͕ࠪඞཁ 4JHOJOͨ͠Βී௨ʹ࢖͑ͨͷͰ 1VCMJD3FQPTJUPSZͳΒͳΜͰ΋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ͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ ·ͱΊ