VRTやってますか？reg-suitですか？

Transcript

1. VRTやってますか？
 reg-suitですか？
 ANDPAD TechLive #4
 Yuki Ichikawa


2. 自己紹介
 市川夕貴（いっちー）　
 
 @ebizo-0202
 
 施工管理Nuxt化 & 新機能開発
 
 好きな声優：水樹奈々さん


3. VRTやってますか？


4. VRTとは
 - Visual Regression Test
 - 画像回帰テスト
 - 現在の正しいコンポーネントやページのスクリーンショットと開発中の スクリーンショットを比較して差分を検知するテスト


   - ANDPAD 施工 Nuxt 化チームでは Storybook + Strorycap + reg-suit + S3 + CircleCI で実現している

5. None
6. None
7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None
15. None
16. None

17. VRTを運用していて感じること
 - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある
 - story を書かないと VRT が出来ないので Storybook

    のメンテ ナンスのモチベーションになる


18. 今日お話するのは運用する中でのひとコマ


19. ある日、reg-suit が
 おかしな差分を検知するようになったんです


20. 様子がおかしくなったのは dependabot で
 とある Pull Request が作られたとき


21. None
22. None
23. None

24. パッケージアップデートの Pull Request で
 差分が出ることは「まれによくある」


25. 実際に差分を見てみましょう


26. None

27. 詳細を見てみましょう


28. None
29. None
30. None
31. None

32. もう1つ詳細を見てみましょう


33. None
34. None
35. None
36. None
37. None

38. なるほど、わからん


39. Release notes を見てみよう


40. None
41. None

42. config.matchingThreshold が未定義の場合に
 差異を抑制するバグを修正しました


43. None

44. なるほど


45. regconfig.json を見てみよう


46. None

47. matchingThreshold 無いねぇ


48. つまり、今まで抑制されていた差分が
 Bug fix によって顕在化したってこと？


49. とりあえず merge してみて様子を見よう


50. None
51. None

52. eslint のプラグインのアップデートで
 コンポーネントの差分でるのは流石におかしいねぇ


53. 他の Pull Request でも意図していない差分が
 検知されてノイズになっちゃってるねぇ


54. None

55. 直そう


56. とりあえず reg-suit の設定を見直そう


57. もう一度 regconfig.json を見てみよう


58. None

59. reg-suit の README を見てみよう


60. None

61. thresholdRate 


62. 全体に対する差異が発生したピクセル数の比率のしきい値。 0か ら1の範囲である必要があります。


63. これがあやしい 


64. 今まで thresholdRate: 0 というとても厳しい「しきい値」で差分の検知を していたけど、バグで差分が出てこなかったのでは


65. None
66. None

67. 意図していない差分が出なくなった！


68. 🎉


69. 運用する中でのひとコマをお届けしましたが


70. VRT はいいぞ
 - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある
 - story を書かないと VRT が出来ないので

    Storybook のメンテ ナンスのモチベーションになる
 - thresholdRate は適切な値を設定しよう
 - 今回の小話が VRT をしている/しようとしている誰かの知見に なればなぁ


71. ご清聴ありがとうございました！