Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MeetUP2_フロントエンド結合テスト_20220419
Search
BrainPad
May 31, 2022
Programming
0
680
MeetUP2_フロントエンド結合テスト_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
520
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.2k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
5
370
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
2
360
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
12
2.1k
「ビジネス現場でのデータ分析者」 東京大学 GCI 2024 Winter
brainpadpr
3
1.9k
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
3
1.8k
白金鉱業Meetup Vol.16_【初学者向け発表】 数理最適化のはじめの一歩 〜身近な問題で学ぶ最適化の面白さ〜
brainpadpr
11
2.2k
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
480
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Select API from Kotlin Coroutine
jmatsu
1
190
エンジニア向け採用ピッチ資料
inusan
0
160
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
XSLTで作るBrainfuck処理系
makki_d
0
210
C++20 射影変換
faithandbrave
0
530
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Gamification - CAS2011
davidbonilla
81
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Raft: Consensus for Rubyists
vanstee
140
7k
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]
本資料は、未刊行文書として日本及び各国の著作権法に基づき保護されております。本資料には、株式会社ブレインパッド所有の特定情報が含まれて おり、これら情報に基づく本資料の内容は、御社以外の第三者に開示されること、また、本資料を評価する以外の目的で、その一部または全文を複製、 使用、公開することは、禁止されています。また、株式会社ブレインパッドによる書面での許可なく、それら情報の一部または全文を使用または公開する ことは、いかなる場合も禁じられております。