Tweet
Tweet

Slide 1

Slide 1 text

1 © 2012-2022 BASE, Inc. #vuefes Vue Fes Japan 2022（2022.10.16） 共通コンポーネントの テスト実装方法に あえてVRTを選択した話 プログラミングをするパンダ (@Panda_Program)

Slide 2

Slide 2 text

2 © 2012-2022 BASE, Inc. #vuefes 自己紹介 ● BASE株式会社 ● 所属：BASE / Product Dev / CRM3 ● 現在のお仕事：シニアエンジニア ○ フロントエンドで React（Next.js）を書いたり Vue.js を書いたり ○ バックエンドでは PHP を書いてます ○ 最近は顧客管理機能（CRM）を開発してます ● 好きなことと活動 ○ DevOps とアジャイルの開発プロセス（特にXP）が好き ○ Software Design 2022年3月号で TDD 特集の2,3部を執筆しました ○ twitter: @Panda_Program プログラミングをするパンダ（@Panda_Program）

Slide 3

Slide 3 text

3 © 2012-2022 BASE, Inc. #vuefes 自己紹介 個人開発が好き プログラミングをするパンダ（@Panda_Program） ブログ書いてます https://panda-program.com/ ビールの画像投稿サイト作りました https://beerbreak.info/ Next.js + Vercel + Supabase

Slide 4

Slide 4 text

4 © 2012-2022 BASE, Inc. #vuefes 本発表の対象者

Slide 5

Slide 5 text

5 © 2012-2022 BASE, Inc. #vuefes 本発表の対象者 フロントエンドで テスト方法の選定の 経験がない開発者

Slide 6

Slide 6 text

6 © 2012-2022 BASE, Inc. #vuefes 本発表の目標

Slide 7

Slide 7 text

7 © 2012-2022 BASE, Inc. #vuefes 本発表の目標 コンポーネントテストのみならず 課題に応じてテスト実装方法を 選ぶ視点を持つ

Slide 8

Slide 8 text

8 © 2012-2022 BASE, Inc. #vuefes 本発表の目標 アプリケーションに応じた最適なテスト 戦略を考えられるようになる １ 手動テストを自動テストにする（テスト自動 化）ために考慮すべきことを知る ２ ３

Slide 9

Slide 9 text

9 © 2012-2022 BASE, Inc. #vuefes 本発表の位置付け Frontend Developer（roadmap.sh） https://roadmap.sh/frontend

Slide 10

Slide 10 text

10 © 2012-2022 BASE, Inc. #vuefes 本発表の位置付け Frontend Developer（roadmap.sh） https://roadmap.sh/frontend

Slide 11

Slide 11 text

11 © 2012-2022 BASE, Inc. #vuefes 本発表の構成

Slide 12

Slide 12 text

12 © 2012-2022 BASE, Inc. #vuefes 本発表の構成 BASEの共通コンポーネントの課題と 前提知識 １ テスト実装方法の比較とVRTを選択した 意思決定 ２ ３ 導入後10ヶ月間の運用結果とまとめ

Slide 13

Slide 13 text

13 © 2012-2022 BASE, Inc. #vuefes 本発表の構成 BASEの共通コンポーネントの課題と 前提知識 テスト実装方法の比較とVRTを選択した 意思決定 導入後10ヶ月間の運用結果とまとめ １ ２ ３

Slide 14

Slide 14 text

14 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 ● ショップオーナーの管理画面を構築する ためのコンポーネント集である ○ Vue2 で2018年1月から開発開始 ○ 十分なコンポーネントが揃っている ● ライフサイクルでいえば成熟期 ○ 頻繁なアップデートはない ○ メンテナンスは続いている ● 有志のメンバーが手が空いた時間にメン テナンスの対応をしている（5名前後） 前提知識

Slide 15

Slide 15 text

15 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 ● テストがない ○ 変更でコンポーネントを壊すのが怖い ● 本体App側の影響範囲がわからない ○ 共通コンポーネントを呼び出す側にも 自動テストがない ● メンテナンスは続いているのでたまに変更 の要求がある ○ デザインシステムとの差分を解消 ○ 新しいPropsでバリエーションを追加 課題: 変更が怖い

Slide 16

Slide 16 text

16 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 ● Storybookは入っているが一手間かかる ○ プルリクエストにスクショを貼る ○ レビュワーは master と feature ブ ランチの Storybook を見比べて検証 ● 本体App側の影響範囲はそれでもわから ない ○ コンポーネントが使われている箇所 に知識の差がある ○ レビューの質が属人的 課題: 変更のレビューをしにくい

Slide 17

Slide 17 text

17 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 ● Dependabotは入っているが... ○ 更新はパッケージごとで手間 ○ Storybook で一通り動かせて、ブラ ウザのコンソールに JS エラーが出 ていなければ OK ● 有志のメンバーの士気の低下 ○ 週一でチーム定例がある ○ 自分から手を上げたものの「まだ終 わっていません」と報告しなければ ならず気が重い 課題: 依存パッケージのアップデートに時間がかかる https://www.reddit.com/r/ProgrammerHumor/comments/6s0wov/heaviest_objects_in_the_universe/

Slide 18

Slide 18 text

18 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 共通コンポーネントの課題は 変更 + レビューに 手間がかかること

Slide 19

Slide 19 text

19 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 つまり

Slide 20

Slide 20 text

20 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識

Slide 21

Slide 21 text

21 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識

Slide 22

Slide 22 text

22 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 手動テストが辛い

Slide 23

Slide 23 text

23 © 2012-2022 BASE, Inc. #vuefes 共通コンポーネントの課題と前提知識 テスト自動化で解決しよう

Slide 24

Slide 24 text

24 © 2012-2022 BASE, Inc. #vuefes 本発表の構成 BASEの共通コンポーネントの課題と 前提知識 テスト実装方法の比較とVRTを選択した 意思決定 導入後10ヶ月間の運用結果とまとめ １ ２ ３

Slide 25

Slide 25 text

25 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 フロントエンドで 一般的なテスト実装方法は 何か？

Slide 26

Slide 26 text

26 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 テスティングトロフィー （Testing Trophy）

Slide 27

Slide 27 text

27 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 TESTING JAVASCRIPT with Kent C. Dodds https://testingjavascript.com/

Slide 28

Slide 28 text

28 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 インテグレーションテスト （結合テスト）

Slide 29

Slide 29 text

29 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 インテグレーションテストは 本当に目の前の 課題を解決できる？

Slide 30

Slide 30 text

30 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 テスト実装方法を比較する

Slide 31

Slide 31 text

31 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 コード例示用のサンプルアプリ（カウンター）

Slide 32

Slide 32 text

32 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● テスト対象はJSのロジック ○ 関数やクラスメソッドが対象 ○ Composition API や React Hooksも ○ サーバー（Node.jsなど）で実行 ○ 実行速度が早い ● HTML と CSS はテスト対象外 ● テストフレームワーク ○ Jest / Vitest ユニットテスト（単体テスト）

Slide 33

Slide 33 text

33 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● テスト対象は HTML + JS ○ ユニットテスト + α ○ ブラウザAPIやデータフェッチも ■ click や input イベントなど ○ サーバー（Node.jsなど）で実行 ○ 実行速度はまあまあ早い ● CSS はテスト対象外 ● テストフレームワーク ○ Testing Library / Test Utils インテグレーションテスト（結合テスト）

Slide 34

Slide 34 text

34 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● テスト対象はアプリケーション全体 ○ ブラウザからサーバーまで ○ ページ（URL）単位でテストする ○ ブラウザ（chromiumなど）で実行 ■ ユーザーに近い環境でテスト ○ 実行速度は遅く壊れやすい（flaky） ● テスト対象が広い ○ データベースや外部との通信も含む ● テストフレームワーク ○ Cypress / Playwright E2E（End to End テスト）

Slide 35

Slide 35 text

35 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● テスト対象は HTML + CSS ○ E2Eテストの一種 ○ ブラウザでスクショを撮り、　　 サーバーで画像を比較 ○ 実行速度は遅い ● JS はテスト対象外 ○ Storybook で Play functions を使 えばある程度は可能 ● テストツール ○ reg-suit / Chromatic VRT（ビジュアルリグレッションテスト、画像回帰テスト） Visual testing for React, Vue, and Angular • Chromatic https://www.chromatic.com/features/test

Slide 36

Slide 36 text

36 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 テストレベルによる比較 [1], [2] フロントエンドエンジニアの視点から、正確性・網羅性よりわかりやすさを重視した表現にしている [3] フロントエンドで「Viewのコンポーネントに対するテスト」の意味で使われている。但し、テスト界隈ではコンポーネントテストはユニットテストを指す（「テスト 技術者資格制度 Foundation Level シラバス Version 2018V3.1.J03」ISTQB p. 32 より） https://jstqb.jp/dl/JSTQB-SyllabusFoundation_Version2018V31.J03.pdf

Slide 37

Slide 37 text

37 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 参考: 実行環境（サーバーとブラウザ）

Slide 38

Slide 38 text

38 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 どのテスト実装方法が 課題を解決してくれるのか それぞれ検討する

Slide 39

Slide 39 text

39 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● JS のロジックを切り出しにくい ○ 共通コンポーネントは Vue 2.6 ○ Composition API が使われていない ○ クラスで state を利用したロジック を多用している ● 何年も使われていてロジックは信頼でき る ○ ロジックが変わることは滅多にない ○ バグが出るたびに修正されてきた ユニットテスト（単体テスト）

Slide 40

Slide 40 text

40 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 👋

Slide 41

Slide 41 text

41 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● 全部のコンポーネントにテストを書くの が大変 ○ 直近で発生しているのはロジックの バグではなくCSS崩れ ○ 共通コンポーネントの機能追加は活 発ではない ● ROIが見合わない ○ 投資対効果の点で疑問 ○ 例えば5人、3ヶ月間でテストを書い ても、表示崩れを検出できない = outcomeに繋がらない インテグレーションテスト（結合テスト）

Slide 42

Slide 42 text

42 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 👋

Slide 43

Slide 43 text

43 © 2012-2022 BASE, Inc. #vuefes ● E2Eは範囲が広い ○ ページにアクセスしたり、フォーム を提出して画面遷移するテストなど ○ パフォーマンステストもE2Eテスト ● スクショの差分比較（VRT）もE2E ○ Cypress, Playwright ■ × ページ単位の差分 ■ ○コンポーネント単位差分 ● こちらを実施したい ○ VRTは良いが惜しい テスト実装方法の比較とVRTを選択した意思決定 E2Eテスト - ページ単位のVRT（ビジュアルリグレッションテスト）

Slide 44

Slide 44 text

44 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 💪

Slide 45

Slide 45 text

45 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● VRTで開発者が表示崩れに気づける ○ 修正は HTML や CSS がメイン ○ JSのロジックが変わることは稀 ● 差分比較がコンポーネント単位 ○ レビューが簡単 ● Storybook を書くモチベになる ○ Storybook を書けばテストが動く ○ 安心感UP E2Eテスト - コンポーネント単位のVRT（ビジュアルリグレッションテスト） Visual testing for React, Vue, and Angular • Chromatic https://www.chromatic.com/features/test

Slide 46

Slide 46 text

46 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 🙌

Slide 47

Slide 47 text

47 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 VRTが課題に マッチする

Slide 48

Slide 48 text

48 © 2012-2022 BASE, Inc. #vuefes VRTツールの選定 テスト実装方法の比較とVRTを選択した意思決定

Slide 49

Slide 49 text

49 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 ● 画像比較のOSS ● 比較結果の差分がわかりやすい ○ エンジニア以外への共有がしやすい ● 環境構築に一手間かかる ○ 画像は別で準備が必要 ○ 環境整備が必要がある ■ CIでスクショを撮ってS3にアッ プするなど ■ メンテチームはボランティアな ので、手間が少ない方がいい Reg Suit https://github.com/reg-viz/reg-suit

Slide 50

Slide 50 text

50 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 Chromatic ● 画像撮影 + 画像比較のSaaS ● 導入が簡単 ○ コマンド一つで導入可能 ○ GitHub Actions で簡単に実行 ■ CIに組み込める ○ ただし、Storybook は必須 ● ビルドごとにURLが発行される ○ PRにURLが表示される ○ 差分の有無を確認するだけ https://www.chromatic.com

Slide 51

Slide 51 text

51 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 https://devblog.thebase.in/entry/2021/12/08/203039

Slide 52

Slide 52 text

52 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 Chromatic を選択

Slide 53

Slide 53 text

53 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 🤝

Slide 54

Slide 54 text

54 © 2012-2022 BASE, Inc. #vuefes テスト実装方法の比較とVRTを選択した意思決定 Chromaticの導入準備 ● マネージャーへの説明 ○ ここまでの以上の思考過程を共有 ○ ダメだったらやめる選択肢もあり ○ 無料枠でまず導入してみる ● Storybook のコンポーネントを増やす ○ Storybook の数が多ければ多いほどカバー範囲が広い ○ コンポーネントのバリエーション（Variant）を作成 ■ Props の組み合わせパターンをたくさん作った ○ Play functions でモーダルの開閉や文字入力なども対応 + テスト可能に

Slide 55

Slide 55 text

55 © 2012-2022 BASE, Inc. #vuefes 本発表の構成 BASEの共通コンポーネントの課題と 前提知識 テスト実装方法の比較とVRTを選択した 意思決定 導入後10ヶ月間の運用結果とまとめ １ ２ ３

Slide 56

Slide 56 text

56 © 2012-2022 BASE, Inc. #vuefes 導入後10ヶ月間の運用結果とまとめ 冒頭の課題を解決できた ● 課題: 変更が怖い ○ スクショがあるので、予期せぬ変更 は入らないことがわかる ● 課題: 変更のレビューをしにくい ○ 差分をピンポイントで確認できる ○ レビューがとても簡単になった ● 課題: 依存パッケージのアップデート に時間がかかる ○ 月に1度パッケージアップデート会 ○ 動作確認とマージが1時間以下で可能 に

Slide 57

Slide 57 text

57 © 2012-2022 BASE, Inc. #vuefes 導入後10ヶ月間の運用結果とまとめ メンテナンスチームの感想 ● 手元で Storybook を立ち上げていたが、 その必要がなくなった ● 変更点をまとめて Chromatic で見れる ● 変更があったコンポーネント数が表示さ れる ● 差分が全て記録されているので安心感が ある ● 人の目でわからないような細かい差分も 検知してくれた

Slide 58

Slide 58 text

58 © 2012-2022 BASE, Inc. #vuefes Before 導入後10ヶ月間の運用結果とまとめ

Slide 59

Slide 59 text

59 © 2012-2022 BASE, Inc. #vuefes After 導入後10ヶ月間の運用結果とまとめ

Slide 60

Slide 60 text

60 © 2012-2022 BASE, Inc. #vuefes テスト対象ごとに 最適なテスト方法がある

Slide 61

Slide 61 text

61 © 2012-2022 BASE, Inc. #vuefes テスト自動化で 楽をしよう

Slide 62

Slide 62 text

62 © 2012-2022 BASE, Inc. #vuefes Chromatic の使い方、導入方法 https://devblog.thebase.in/entry/2021/12/08/203039

Slide 63

Slide 63 text

63 © 2012-2022 BASE, Inc. #vuefes まだまだ フロントエンドで 課題があります

Slide 64

Slide 64 text

© 2012-2022 BASE, Inc. 64 We are hiring! https://herp.careers/v1/base

Slide 65

Slide 65 text

65 © 2012-2022 BASE, Inc. #vuefes ご清聴 ありがとうございました

Slide 66

Slide 66 text

66 © 2012-2022 BASE, Inc. #vuefes Special Thanks 資料レビューありがとうございました！ 02さん （@cocoeyes02） mk0812さん （@mk0812__） Takepepeさん （@takepepe） broccoliさん （@nihonbuson）