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
フロントエンド一年生がテストを考える
Search
Kenta TSUNEMI
December 12, 2019
Technology
1
340
フロントエンド一年生がテストを考える
2019.12.12
Sendai Frontend Meetup #3
Kenta TSUNEMI
December 12, 2019
Tweet
Share
More Decks by Kenta TSUNEMI
See All by Kenta TSUNEMI
配列にまつわる型検査をしたら思ったより大変だった話
tocomi
0
45
型チェック 速度改善 奮闘記⌛
tocomi
3
680
CSSセレクタを戦わせてみた⚔️
tocomi
0
19
PWA x firebase x Auth0 での認証
tocomi
1
460
Other Decks in Technology
See All in Technology
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5k
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.4k
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
930
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
230
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
190
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
290
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Designing Experiences People Love
moore
140
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building Applications with DynamoDB
mza
93
6.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Automating Front-end Workflow
addyosmani
1368
200k
Site-Speed That Sticks
csswizardry
4
410
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Docker and Python
trallard
44
3.3k
Transcript
フロントエンド一年生がテス トを考える 2019/12/12 Sendai Frontend Meetup #3 Kenta TSUNEMI /
@tocomi0112
どうも、僕です Kenta TSUNEMI / @tocomi0112 - 栃木県出身 東京在住 - 学生時代の4(+1)年間を仙台で過ごす。
- Kスタ(当時)でバイトしてました - 初LTが仙台でできて嬉しい! # すきなこと 野球観戦、競馬、お笑い、ランニング、ゲーム - 2015.04- ERPパッケージ開発 主にJava - 2019.10- Webエンジニア転身 昔は太ってたんですけど...
話すこと・目的 サーバーサイド出身の僕がフロントエンドのコンポーネント テストについてあれこれ考えてみた過程を話します。 フロントエンドのテストってよくわかんないって人にテスト 書いてみようかって思ってもらえたら嬉しい! ※Vue.jsを題材として考えています
サーバーサイド出身の僕にとって テストというと...
テストというと... - 単体テスト JUnitテスト、メソッドの戻り値が期待通りになるか - 結合テスト Seleniumとか、決められた操作を問題なく実行できるか
コンポーネントのテストって何?
コンポーネントのテストって “単一のテストケースでは、コンポーネントに提供された入力 (ユーザーのやり取りやプロパティの変更)によって、期待 される出力(結果の描画またはカスタムイベントの出力)が 行われることが示されます。” https://vue-test-utils.vuejs.org/ja/guides/common-tips.html より
コンポーネントのテストって プロパティによってボタンの見た目が変わるとか エラーがあるときだけメッセージを表示するとか そういうのを確かめるものらしい。
どういうテストをすればいいの?
意味のあるテストをする
意味のあるテストをする htmlのテストをしたいわけではない。。
意味のあるテストをする
意味のあるテストをする 入力による変化は確認できたけど、 結局slotの機能をテストしている。。
意味のあるテストをする
意味のあるテストをする コンポーネント特有の振る舞いを テストすることができた!
意味のあるテストをする フレームワーク自体をテストしない。 ロジックの詳細ではなくコンポーネントの振る舞いをテスト する。 Vue NYC - Component Tests with
Vue.js - Matt O'Connell より
どうしたらテストしやすい?
テストしやすい、しにくい “コンポーネントの描画結果が、単にプロパティの値によって のみ決まる場合、異なる引数を用いた関数の戻り値の検証と 同じ様に、シンプルに考えることができます。” https://jp.vuejs.org/v2/guide/unit-testing.html より
テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント
テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント 各コンポーネントが状態管理に依存しているので、 テストのためにモックを用意する必要がある。
テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。
テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう
テストしやすさの先に テストがしやすい=コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。
一緒にテスト書きましょう!
終