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
AIエージェント元年@日本生成AIユーザ会
shukob
1
190
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
630
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.5k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
4.8k
AIエージェント元年
shukob
0
150
Active Directory攻防
cryptopeg
PRO
8
5.4k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.1k
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
270
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
140
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
360
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Applications with DynamoDB
mza
93
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
4 Signs Your Business is Dying
shpigford
182
22k
Automating Front-end Workflow
addyosmani
1368
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。
テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう
テストしやすさの先に テストがしやすい=コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。
一緒にテスト書きましょう!
終