Tweet
Tweet

Slide 1

Slide 1 text

フロントエンド一年生がテス トを考える 2019/12/12 Sendai Frontend Meetup #3 Kenta TSUNEMI / @tocomi0112

Slide 2

Slide 2 text

どうも、僕です Kenta TSUNEMI / @tocomi0112 - 栃木県出身 東京在住 - 学生時代の4(+1)年間を仙台で過ごす。 - Kスタ(当時)でバイトしてました - 初LTが仙台でできて嬉しい！ # すきなこと 野球観戦、競馬、お笑い、ランニング、ゲーム - 2015.04- ERPパッケージ開発 主にJava - 2019.10- Webエンジニア転身 昔は太ってたんですけど...

Slide 3

Slide 3 text

話すこと・目的 サーバーサイド出身の僕がフロントエンドのコンポーネント テストについてあれこれ考えてみた過程を話します。 フロントエンドのテストってよくわかんないって人にテスト 書いてみようかって思ってもらえたら嬉しい！ ※Vue.jsを題材として考えています

Slide 4

Slide 4 text

サーバーサイド出身の僕にとって テストというと...

Slide 5

Slide 5 text

テストというと... - 単体テスト JUnitテスト、メソッドの戻り値が期待通りになるか - 結合テスト Seleniumとか、決められた操作を問題なく実行できるか

Slide 6

Slide 6 text

コンポーネントのテストって何？

Slide 7

Slide 7 text

コンポーネントのテストって “単一のテストケースでは、コンポーネントに提供された入力 （ユーザーのやり取りやプロパティの変更）によって、期待 される出力（結果の描画またはカスタムイベントの出力）が 行われることが示されます。” https://vue-test-utils.vuejs.org/ja/guides/common-tips.html より

Slide 8

Slide 8 text

コンポーネントのテストって プロパティによってボタンの見た目が変わるとか エラーがあるときだけメッセージを表示するとか そういうのを確かめるものらしい。

Slide 9

Slide 9 text

どういうテストをすればいいの？

Slide 10

Slide 10 text

意味のあるテストをする

Slide 11

Slide 11 text

意味のあるテストをする htmlのテストをしたいわけではない。。

Slide 12

Slide 12 text

意味のあるテストをする

Slide 13

Slide 13 text

意味のあるテストをする 入力による変化は確認できたけど、 結局slotの機能をテストしている。。

Slide 14

Slide 14 text

意味のあるテストをする

Slide 15

Slide 15 text

意味のあるテストをする コンポーネント特有の振る舞いを テストすることができた！

Slide 16

Slide 16 text

意味のあるテストをする フレームワーク自体をテストしない。 ロジックの詳細ではなくコンポーネントの振る舞いをテスト する。 Vue NYC - Component Tests with Vue.js - Matt O'Connell より

Slide 17

Slide 17 text

どうしたらテストしやすい？

Slide 18

Slide 18 text

テストしやすい、しにくい “コンポーネントの描画結果が、単にプロパティの値によって のみ決まる場合、異なる引数を用いた関数の戻り値の検証と 同じ様に、シンプルに考えることができます。” https://jp.vuejs.org/v2/guide/unit-testing.html より

Slide 19

Slide 19 text

テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント

Slide 20

Slide 20 text

テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント 各コンポーネントが状態管理に依存しているので、 テストのためにモックを用意する必要がある。

Slide 21

Slide 21 text

テストしやすい、しにくい 状態管理・DB etc... 親コンポーネント 子コンポーネント 孫コンポーネント 親コンポーネントのみが状態管理に依存。 子や孫のコンポーネントはプロパティのみでテストできる。

Slide 22

Slide 22 text

テストしやすい、しにくい # 仮説 状態管理に依存するコンポーネントを特定のものだけに抑え て、プロパティベースで動くコンポーネントを多くすればテ ストも書きやすいのでは。 # 疑問 - コンポーネントが増えると実装が煩雑になりそう - バケツリレー大変そう

Slide 23

Slide 23 text

テストしやすさの先に テストがしやすい＝コンポーネントの役割が適切に分かれて いる、だと思う。 テストのしやすさを考えることで自然と設計もきれいになる (と信じている)。

Slide 24

Slide 24 text

一緒にテスト書きましょう！

Slide 25

Slide 25 text

終