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
360
フロントエンド一年生がテストを考える
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
76
型チェック 速度改善 奮闘記⌛
tocomi
4
1k
CSSセレクタを戦わせてみた⚔️
tocomi
0
35
PWA x firebase x Auth0 での認証
tocomi
1
540
Other Decks in Technology
See All in Technology
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
380
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
200
トヨタ生産方式(TPS)入門
recruitengineers
PRO
5
1.4k
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
620
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
340
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
420
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
2
320
Flutterでキャッチしないエラーはどこに行く
taiju59
0
200
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
300
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.7k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
240
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
A better future with KSS
kneath
239
17k
Designing for Performance
lara
610
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Become a Pro
speakerdeck
PRO
29
5.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Scaling GitHub
holman
463
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
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... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。
テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう
- バケツリレー大変そう
テストしやすさの先に テストがしやすい=コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。
一緒にテスト書きましょう!
終