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
690
MeetUP2_フロントエンド結合テスト_20220419
BrainPad
May 31, 2022
Tweet
Share
More Decks by BrainPad
See All by BrainPad
【新卒研修資料】効果検証_因果推論 / Impact evaluation Causal inference
brainpadpr
6
1k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
2
190
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
3
550
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.3k
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
5
400
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
2
380
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
12
2.2k
「ビジネス現場でのデータ分析者」 東京大学 GCI 2024 Winter
brainpadpr
3
2k
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
4
1.8k
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
効率的な開発手段として VRTを活用する
ishkawa
0
150
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
650
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
A Tale of Four Properties
chriscoyier
160
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for humans not robots
tammielis
253
25k
Bash Introduction
62gerente
613
210k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Code Review Best Practice
trishagee
69
19k
A better future with KSS
kneath
238
17k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Practical Orchestrator
shlominoach
189
11k
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]
本資料は、未刊行文書として日本及び各国の著作権法に基づき保護されております。本資料には、株式会社ブレインパッド所有の特定情報が含まれて おり、これら情報に基づく本資料の内容は、御社以外の第三者に開示されること、また、本資料を評価する以外の目的で、その一部または全文を複製、 使用、公開することは、禁止されています。また、株式会社ブレインパッドによる書面での許可なく、それら情報の一部または全文を使用または公開する ことは、いかなる場合も禁じられております。