We Are JavaScripters! @33rd【初心者歓迎・LT会】の登壇資料です
デモ動画:https://youtu.be/9qsX_UsyG-g
ChromaticͰखܰʹVisual Regression TestΛಋೖ͢Δ2019/06/28 We Are JavaScripters! @33rd
View Slide
࠷ۙௐ͍ͯͨπʔϧͷΛ͠·͢
• Shingo Yamazaki• αΠϘζגࣜձࣾ (2018/12~)• kintone ։ൃνʔϜɹ݉ ϑϩϯτΤϯυΤΩεύʔτνʔϜ• #WeJS ॳࢀՃͰ͢About mezaki-yamazaki___yama
• ͱ͋ΔUIίϯϙʔωϯτϥΠϒϥϦ։ൃͷ ͓ख͍Λ͍ͯ͠Δ• JS -> TypeScript Ҡߦ͕ϝΠϯ• ʮUI ίϯϙʔωϯτ͕σάϨͯ͠ͳ͍͜ͱΛ୲อ͢Δ͘͠Έʗπʔϧ͕΄͍͠Ͷʯͱ͍͏͕͋ͬͨ• ݱࡏ Storybook + Storyshots Λར༻தIntro
• UIίϯϙʔωϯτͷ։ൃ& ϒϥδϯάڥΛఏڙ͢ΔOSS• ίϯϙʔωϯτΛΞϓϦέʔγϣϯͱಠཱͨ͠ڥͰ։ൃͰ͖Δ• ಈ࡞͢Δίϯϙʔωϯτ͕ҰཡͰݟΒΕΔStorybook?
• StorybookͷΞυΦϯ• JestͷSnapshot TestingΛར༻• ίϯϙʔωϯτͷSnapshotΛऔಘ͠ɺอଘͯ͋͠Δͷͱൺֱ• DOMͷൺֱͳͷͰɺελΠϧͷ่Εͱ͔ݕͰ͖ͣStoryshots?IUUQTTUPSZCPPLKTPSHEPDTUFTUJOHTUSVDUVSBMUFTUJOH
https://twitter.com/domyen/status/1138861429669412864?s=20
https://twitter.com/domyen/status/1138861429669412864?s=20%FTJHOTZTUFN͓͖ͯ͜͞ͷπʔϧؾʹͳΔ
Chromatic
• Visual Testing Λͬͯ͘ΕΔαʔϏε• “Made for Storybook by Storybook maintainers”• OSSແྉChromatic
DEMO
͍ํ
• Storybook ಋೖࡁΈͷGitHubϦϙδτϦΛ༻ҙ• https://www.chromaticqa.com/ ʹΞΫηε• GitHubΞΧϯτͰSign in• Add project ͰϦϙδτϦΛબΞΧϯτొ#JUCVDLFU (JU-BCʹରԠ
ϦϙδτϦଆͰඞཁͳͷ3 Step$ISPNBUJDΛΠϯετʔϧTUPSZCPPLDPOpHKTʹߦՃεΫϦϓτ࣮ߦproject͝ͱʹϢχʔΫͳapp code
͜ͷ63-ʹΞΫηε
• ͋ͱchromatic testͷͨͼʹbuild & diffൺֱॳճͷbuildޭ
package.jsonCIͷઃఆ(CircleCIͷ߹).circleci/config.yml
• \•CIͷઃఆ(CircleCIͷ߹)BQQDPEFͰ͍ͯͨ͠
Ͱ͖ͨ
EJ⒎Λ֬ೝ͠ɺ"DDFQU%FOZશ෦νΣοΫ͢Δͱ(JU)VCଆͷεςʔλεߋ৽͞ΕΔ%0.ʹมߋ͋Ε͜͜ʹදࣔ͞ΕΔ
ศརͳػೳ
ίϯϙʔωϯτΛදࣔ͠ͳ͕ΒɺҟͳΔϒϥϯνաڈͷϏϧυ݁ՌʹΓସ͑ΒΕΔLibrary
※Standard/Pro ϓϥϯͷΈMulti Browser Support
ࢦఆͨ͠ViewportͰෳͷSnapshotΛࡱͬͯ͘ΕΔViewports
Tips
• ͕ࠩ͋ͬͯϏϧυࣗମPassʹ͢Δ• ͚ͭͳ͍ͱʮશ෦Accept͚ͨ͠ͲCircleCIͷεςʔλεFailedͰϚʔδͰ͖ͳ͍ʯͱͳΔCI༻ͷεΫϦϓτʹ--exit-zero-on-changesΛ͚ͭΔ
Open source plan৹͕ࠪඞཁ4JHOJOͨ͠Βී௨ʹ͑ͨͷͰ1VCMJD3FQPTJUPSZͳΒͳΜͰ0,ͳͷ͔ͱࢥͬͯ·ͨ͠
• ҰԠChatͰฉ͍͚ͨͲ ͬͺΓͦ͏ͬΆ͍Open source plan৹͕ࠪඞཁ
• ໌ه͞Εͯͳ͍͕ ͜ΕChatͰฉ͍ͯΈͨ• গͳ͘ͱBrowser ChromeͷΈͱͷ͜ͱOpen source planstarter planѻ͍ʁ
ຊޠϑΥϯτ͕…͜Ε͕͜͏ͳͬͨ
• .storybook/preview-head.htmlͰ web fontಡΈࠐ·ͤͯΈ͚ͨͲͩΊͰͨ͠ຊޠϑΥϯτ͕…
• ։ൃνʔϜʹ ϑΟʔυόοΫ͢Δɺ ͱݴͬͯͨຊޠϑΥϯτ͕…
• StorybookΛར༻͍ͯ͠ΔϓϩδΣΫτʹ ͔ͳΓ͓खܰʹಋೖͰ͖Δ• diffएׯݟͮΒ͍ʢओ؍ʣ͚Ͳػೳे• ଞπʔϧͱൺֱͨ͠Θ͚Ͱͳ͍Ͱ͕͢• OSSͳΒແྉʢͨͩ͠৹ࠪ͋Γʣ·ͱΊ