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
320
フロントエンド一年生がテストを考える
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
1
66
CSSセレクタを戦わせてみた⚔️
tocomi
0
3
PWA x firebase x Auth0 での認証
tocomi
1
450
Other Decks in Technology
See All in Technology
Storybook との上手な向き合い方を考える
re_taro
1
180
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Platform Engineering for Software Developers and Architects
syntasso
1
520
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
BBQ
matthewcrist
85
9.3k
Rails Girls Zürich Keynote
gr2m
94
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Being A Developer After 40
akosma
87
590k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
The Language of Interfaces
destraynor
154
24k
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... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。
テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう
テストしやすさの先に テストがしやすい=コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。
一緒にテスト書きましょう!
終