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
350
フロントエンド一年生がテストを考える
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
53
型チェック 速度改善 奮闘記⌛
tocomi
3
760
CSSセレクタを戦わせてみた⚔️
tocomi
0
23
PWA x firebase x Auth0 での認証
tocomi
1
490
Other Decks in Technology
See All in Technology
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
720
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.5k
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
130
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
140
OCI見積もり入門セミナー
oracle4engineer
PRO
0
110
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
Symfony in 2025: Scaling to 0
fabpot
2
170
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
270
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Facilitating Awesome Meetings
lara
53
6.3k
How to Ace a Technical Interview
jacobian
276
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Producing Creativity
orderedlist
PRO
344
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Why Our Code Smells
bkeepers
PRO
336
57k
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... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。
テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう
テストしやすさの先に テストがしやすい=コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。
一緒にテスト書きましょう!
終