Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
MeetUP2_フロントエンド結合テスト_20220419
BrainPad
May 31, 2022
Programming
0
260
MeetUP2_フロントエンド結合テスト_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
BrainPad_Company_20230126
brainpadpr
0
87k
【技育祭2022】VUCA時代のサバイバル術!~ソフトスキルを獲得して強いエンジニアになろう_v3
brainpadpr
0
280
MeetUP4_データマネジメント_20221208
brainpadpr
0
350
MeetUP3_機械学習とプロダクト開発_20220929
brainpadpr
0
510
BrainPad_BZ_202209
brainpadpr
0
400
BrainPad_DE_202209ver
brainpadpr
1
4.6k
BrainPad_AN_202208
brainpadpr
1
6k
ブレインパッドPB本部紹介資料(キャリア採用向けweb公開版 )
brainpadpr
0
5.6k
MeetUP2_E2Eテストと自動化への取り組み_20220419
brainpadpr
0
120
Other Decks in Programming
See All in Programming
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
270
jq at the Shortcuts
cockscomb
1
440
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
Enumを自動で網羅的にテストしてみた
estie
0
1.3k
What's new in Shopware 6.5
shyim
0
110
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
190
TokyoR#103_DataProcessing
kilometer
0
540
2023年にクル(かもしれない)通信ミドルウェア技術(仮)
s_hosoai
0
220
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
120
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
Featured
See All Featured
Music & Morning Musume
bryan
37
4.6k
Atom: Resistance is Futile
akmur
256
24k
Building Your Own Lightsaber
phodgson
96
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Building Adaptive Systems
keathley
27
1.3k
The Cult of Friendly URLs
andyhume
69
5.1k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
In The Pink: A Labor of Love
frogandcode
132
21k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Transcript
株式会社ブレインパッド 田中 康平 2022年4月19日 フロントエンドのテスト方針と結合テストのすすめ
©BrainPad Inc. Strictly Confidential 自己紹介 | 田中 康平 2 所属
• 株式会社ブレインパッド プロダクトビジネス本部 開発部 趣味 • キャンプ • サウナ • Mリーグ • メディアアート
©BrainPad Inc. Strictly Confidential フロントエンドに関する • チームで運用しているテスト方針について • 結合テストについて ◦
実際の取り組み事例、結合テストの効果 ◦ 運用している結合テストのガイドライン ◦ 運用上得られたTipsや、苦労したこと 注記 - ここでは複数のモジュールを組み合わせたものを結合テストと呼びます - フレームワークはVue.jsを採用 本日お話すること 3
©BrainPad Inc. Strictly Confidential さまざまなデータを活用する Web・アプリのコンテンツ最適化プラットフォーム 多彩なパーソナライズやレコメンドで顧客一人ひとりに自然なアクションを促します Rtoaster action+ とは
4
©BrainPad Inc. Strictly Confidential 350社以上の導入実績 Rtoaster action+ とは 5
©BrainPad Inc. Strictly Confidential 技術スタック • Vue.js(v2), Nuxt, TypeScript, composition-api
• Riot.js(v3), jQuery, JavaScript 状況 • Riot.js -> Vue.js フレームワーク絶賛移行中 今回は移行中の Vue で新たに策定したテスト方針についてお話します。 Rtoaster action+ の技術スタック と 状況 6
©BrainPad Inc. Strictly Confidential • 品質を高めるための 1つの手段 • こちらの意図通りにユーザーがサイトを閲覧し、サイト上で機能を使用できるかを検証するもの •
開発の可能な限り早い段階でエラーを発見するためのもの フロントエンドのテスト目的 7
©BrainPad Inc. Strictly Confidential テストの種類 / 用語 8 種類 説明
ツール 静的解析(Static) 型や Lint などの静的なチェック TypeScript, ESLint 単体テスト(Unit) 個々のコンポーネントや関数などを個別に検証する テスト Jest, vue/test-utils 結合テスト(Integration) コンポーネント間、ページ単位など複数の要素の相 互作用を検証するテスト Jest, vue/test-utils Vue Testing Library E2Eテスト(End to End) アプリケーション全体をブラウザ環境で検証するテ スト TestCafe , Cypress
©BrainPad Inc. Strictly Confidential どのテストにどれだけコストを使うべきかをトロフィーの体積 で示している。 「結合テスト > 静的解析 >
単体テスト > E2Eテスト」 となって いる状態がコストパフォーマンスのバランスが取れた理想 状態である Testing Trophy 9 https://testingjavascript.com/
©BrainPad Inc. Strictly Confidential 内部実装を変更するとき、壊れてはいけない 小さなリファクタリングのテストで壊れてしまうと、コードを改善するときに信用できなくなる。また、テストを修正するためのコストが 発生し、コードの改善を妨げることになる。実装ではなく振る舞いのテストを行うことが重要 バグを検出できなければならない テストが期待する結果を具体的に明示しなかったり、または予測可能なシナリオをすべて検証しなければ、製品コードにあるバグを 発見できないことがある。また、モックオブジェクト(Mock)を過度に使用すると、依存性のあるオブジェクトの動作が変わっても、テ
ストコードが接続過程でバグを全く検出できなくなる。したがって、テスト仕様は具体的でなければならず、モックオブジェクトの使用 は可能な限り控えることが重要 良いテストの条件 10
©BrainPad Inc. Strictly Confidential • 実装ではなく振る舞いのテストを書く ◦ 内部実装を変更するとき壊れないテストにする • バグを検出できるテストを書く
◦ テストケース、テストが期待する結果を具体的に明示する ◦ 予測可能なシナリオを限りなく検証できるようにする • 結合テストを最も多く書く ◦ ここでは複数のモジュールを組み合わせた単体テストを統合テストと呼ぶ ◦ モックオブジェクトを多用し、実装の検証となるような単体テストは書かないようにする ◦ 結合テストでモジュール間の相互作用を確認することでバグを検出できるようにする action+ フロントエンドのテスト方針 11
©BrainPad Inc. Strictly Confidential 機能 • データの一覧取得・表示 • データの編集・取り消し etc
• データの新規作成 • etc 実際の取り組み 結合テストの効果 12 実装 • 各components(grid、button、 bread-crumbs, icon, popup, etc) • 各services(api, auth, i18n, etc ) • 各 utils (date, escape, etc) 関連するファイルは 60以上
©BrainPad Inc. Strictly Confidential テスト方針に沿ったテストと テストケースのサンプル 実際の取り組み 結合テストの効果 13
©BrainPad Inc. Strictly Confidential 以下7つのテストケースを実行 実際の取り組み 結合テストの効果 14
©BrainPad Inc. Strictly Confidential 結合テスト実行結果 15
©BrainPad Inc. Strictly Confidential 結合テスト実行結果 16 今回の例では、僅か 7つのテストケースで 振る舞いに使用される components,
services, utilsの相互作用(60 ファイル以上)を検証することができる 内部実装が変更になっても振る舞いが変わらないければこのテストは壊れないようになっている
©BrainPad Inc. Strictly Confidential • mock, stubsを利用して良い箇所をガイドライン化 ◦ mockを極力減らしモジュール間の相互作用を確認す ることを実現
◦ 具体的には api response、$router や $route、 stubs はnuxt-child, nuxt-link, portal-target 以外の使用はNG としている • i18nの対応 ◦ CustomFormatter 、リスト補間 {0} も表示可能とし、 productionと同じ動作ができるようにした • クリックの振る舞いを検証する際のselectorのガイドライン化 ◦ デザインに依存しないテスト ◦ data-testidの付与 compnent名-hoge テスト方針を実現するために工夫、苦労した(している)ところ 17
©BrainPad Inc. Strictly Confidential • pluginで context に inject した関数や値の対応
◦ testで動作できるよう に$nuxt.context の mocksに該 当コードを注入 • layout/default.vue に依存している箇所の対応 ◦ default.vueで使用しているコンポーネントが 各 page の結合テストで必要になる場合 ◦ wrapperを用意, loadingのflagなどは context mocks をハードコーディング • Jestのエラーがわかりにくい ◦ 慣れが必要.. • 予測可能なシナリオを検証できるようにする ◦ 工数が掛かるので効果が高いテストを絞るのが現実 的... テスト方針を実現するために工夫、苦労した(している)ところ 18
©BrainPad Inc. Strictly Confidential • テストの目的、種類、良いテストの条件 • action+で運用しているテスト方針の紹介 ◦ 実装ではなく振る舞いのテストを書く
◦ バグを検出できるテストを書く ◦ 結合テストを多く書く • 結合テストの事例紹介 ◦ mockの使用を極力減らすことで、モジュール間の相互作用 をテストすることができる ◦ 上記のテスト方針を実現するための工夫、苦労した点の紹介 品質を高めるための効率的なテスト手法の模索は続く ... まとめ 19
株式会社ブレインパッド 〒108-0071 東京都港区白金台3-2-10 白金台ビル3F TEL:03-6721-7002 FAX:03-6721-7010 www.brainpad.co.jp
[email protected]
本資料は、未刊行文書として日本及び各国の著作権法に基づき保護されております。本資料には、株式会社ブレインパッド所有の特定情報が含まれて おり、これら情報に基づく本資料の内容は、御社以外の第三者に開示されること、また、本資料を評価する以外の目的で、その一部または全文を複製、 使用、公開することは、禁止されています。また、株式会社ブレインパッドによる書面での許可なく、それら情報の一部または全文を使用または公開する ことは、いかなる場合も禁じられております。