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

2021/03/05 ANDPAD TechLive #4　ANDPAD FrontEnd NOW!!

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 で実現している

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

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

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

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

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

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

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

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

38. なるほど、わからん

39. Release notes を見てみよう

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

44. なるほど

45. regconfig.json を見てみよう

47. matchingThreshold 無いねぇ

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

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

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

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

55. 直そう

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

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

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

61. thresholdRate 

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

63. これがあやしい 

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

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

68. 🎉

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

70. VRT はいいぞ
 - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある
 - story を書かないと VRT が出来ないので Storybook のメンテ ナンスのモチベーションになる
 - thresholdRate は適切な値を設定しよう
 - 今回の小話が VRT をしている/しようとしている誰かの知見に なればなぁ

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