Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

8847086af047cbf895ab3277b59529fe?s=128

ANDPAD inc

March 05, 2021
Tweet

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. ご清聴ありがとうございました!