テストカバレッジ100%のプロジェクトで学んだ、 ユニットテストの書き方

Transcript

1. Copyright © 2019 Classi Corp. All Rights Reserved. テストカバレッジ100%の
 プロジェクトで学んだ、


   ユニットテストの書き方
 2019/03/27 Classi Angular Night #2 原　悠人

2. Copyright © 2019 Classi Corp. All Rights Reserved. - 原悠人


   
 - Classi 2019新卒 (2019/02 ~ Join)
 
 - リプレイスプロジェクトのフロントエンド担当
 
 - プログラミング歴 1年半
 
 - Angular歴 1年弱
 1 自己紹介


3. Copyright © 2019 Classi Corp. All Rights Reserved. - 原悠人


   
 - Classi 2019新卒 (2019/02 ~ Join)
 
 - リプレイスプロジェクトのフロントエンド担当
 
 - プログラミング歴 1年半
 
 - Angular歴 1年弱
 
 - 昨日大学を卒業しました！
 2 自己紹介


4. Copyright © 2019 Classi Corp. All Rights Reserved. はじめに ClassiにJoinして約2ヶ月。

   今携わってるプロジェクトのこれめっちゃいいな と思ったところを紹介したいと思います！ 3

5. Copyright © 2019 Classi Corp. All Rights Reserved. 4

6. Copyright © 2019 Classi Corp. All Rights Reserved. Renovateとは -

   パッケージの自動アップデートツール - 対象リポジトリの package.json を監視し、パッケージに更新があった場 合に Pull Request(PR) を作成してくれる - Renovateのおかげでアプリケーションが依存してるライブラリがほぼ最 新に保てる - 詳しくは https://qiita.com/kasaharu/items/1af74b49e98658cf9a8e 5

7. Copyright © 2019 Classi Corp. All Rights Reserved. 6

8. Copyright © 2019 Classi Corp. All Rights Reserved. 7 カバレッジ100%！！！


9. Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジ100%の単体テスト -

   パッケージアップデート、機能追加の際の安心材料に 8

10. Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジ100%の単体テスト -

    パッケージアップデート、機能追加の際の安心材料に - 他にもいいことがあるかも... ↑これが今日話したいことです 9

11. Copyright © 2019 Classi Corp. All Rights Reserved. ところで みなさんテスト書いてますか？？

    10

12. Copyright © 2019 Classi Corp. All Rights Reserved. テスト難しいですよね -

    僕はClassiに入るまで、書こう書こうと思って書けていませんでした。 - ng new した時を最後にテストがパスしなくなる。 - 既存の程よく育ったテストのないアプリだと、 どこから手をつけていいのかわららない 11

13. Copyright © 2019 Classi Corp. All Rights Reserved. そもそもテストとは -

    ユニットテスト component、serviceなどの振る舞いのテスト Jasmine(フレームワーク)とkarma(テストランナー)を使用 - End to Endテスト ブラウザの動きを再現してアプリケーションの動作を確認 (バックエンドとの通信なども) protractorを使用 どちらも@angular/cliが提供してくれる 12

14. Copyright © 2019 Classi Corp. All Rights Reserved. そもそもテストとは -

    ユニットテスト component、serviceなどの振る舞いのテスト Jasmine(フレームワーク)とkarma(テストランナー)を使用 今日はこっちの話をします - End to Endテスト ブラウザの動きを再現してアプリケーションの動作を確認 (バックエンドとの通信なども) protractorを使用 どちらも@angular/cliが提供してくれる 13

15. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -

    なぜng newした時を最後にテストが通らなくなるのか 14

16. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -

    なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから 15

17. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -

    なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから - templateで依存している子componentをimportする。 - componentが利用しているmoduleをimportする。 16

18. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -

    なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから - templateで依存している子componentをimportする。 - NO_ERRORS_SCHEMAを利用する - componentが利用しているmoduleをimportする。 17

19. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -

    なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから - templateで依存している子componentをimportする。 - NO_ERRORS_SCHEMAを利用する - componentが利用しているmoduleをimportする。 - componentが依存しているserviceやstoreが使っている moduleもimportする必要がある (httpリクエストするserviceのメソッドをcallしてたり、 dispatchしたactionがそのserviceをcallする場合など） 18

20. Copyright © 2019 Classi Corp. All Rights Reserved. こんな感じのテストコードが生成されてます 19

21. Copyright © 2019 Classi Corp. All Rights Reserved. テストを通すには ←

    beforeEach(async() =>
 　 で依存関係を解決
 20 ← beforeEach(async() =>
 　 で依存関係を解決
 ← beforeEach(() =>
 　 でcomponentのインスタンスを
 　 作成


22. Copyright © 2019 Classi Corp. All Rights Reserved. とりあえずテストが通るようになるはず 21

23. Copyright © 2019 Classi Corp. All Rights Reserved. どれくらいテストが書けてるか確かめる 22

24. Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 angular.json

    23

25. Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 24

26. Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 /coverage/{app-name}/index.html

    25

27. Copyright © 2019 Classi Corp. All Rights Reserved. あとはカバレッジを高めるだけ 26

28. Copyright © 2019 Classi Corp. All Rights Reserved. コンポーネントでこんなメソッドを書いてないですか? routerからパラメータを受け取って、そのパラメータをパラメーターにして

    httpリクエストして、レスポンスのObservableをsubscribeして、表示用にデー タを整形してコンポーネントの変数に代入する。。 27

29. Copyright © 2019 Classi Corp. All Rights Reserved. コンポーネントでこんなメソッドを書いてないですか? routerからパラメータを受け取って、そのパラメータをパラメーターにして

    httpリクエストして、そのレスポンスのObservableをsubscribeして、表示用に データを整形してコンポーネントの変数に代入する。。 やりすぎで複雑なメソッドはテストがしづらい 28

30. Copyright © 2019 Classi Corp. All Rights Reserved. テストを書きやすくする -

    コンポーネントはロジック、状態をなるべく持たない - httpリクエストするメソッドはserviceで - httpレスポンスを整形するのはmapで - レスポンスのデータはserviceでBehaviorSubjectとして持つ 　　コンポーネントはサービスのメソッドコール、serviceは 　　関数のテストで済む。 29

31. Copyright © 2019 Classi Corp. All Rights Reserved. そもそもユニットテストとは -

    component, service, pipe (reducer) などが、どんな振る舞いをするか確 認すること - それぞれのファイルがどんな仕事をするのかを簡潔に説明できれば、 テストがしやすいと言えるのではないか 30

32. Copyright © 2019 Classi Corp. All Rights Reserved. 例. リプレイスプロジェクトのコンポーネント設計

    ディレクトリ構成 - pages/ - URLから取得するパラメータを引数にactionをdispatch(APIコール) - containers/ - storeから状態を取得(selector)しcomponentsへ渡す - components/ - containersから値を受け取り、表示する 役割が簡潔でわかりやすい。テストしやすい。 31

33. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテストがもたらすもの -

    パッケージアップデートや機能追加時の安心感 32

34. Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテストがもたらすもの -

    パッケージアップデートや機能追加時の安心感 - テストを書きやすくするために考えることが、設計の見直しのチャンスに なる 33

35. Copyright © 2019 Classi Corp. All Rights Reserved. 今後の課題 -

    現状ユニットテストのみ - ロジックしか見れていない - UIのテスト - スナップショットテスト - DOMの変更を検知するためのテスト - ビジュアルリグレッションテスト - 画像で見た目の変更を検知するテスト Jest使いたい 34

36. Copyright © 2019 Classi Corp. All Rights Reserved. 今後の課題 -

    今は開発フェーズ - 仕様変更が無い(少ない)からカバレッジ100%でも辛く無い - 運用フェーズで仕様変更が頻発すると辛くなる？ 35

37. Copyright © 2019 Classi Corp. All Rights Reserved. テストカバレッジ100%のメモ帳を作ったので よかったらご覧ください！

    https://github.com/hxrxchang/ng-test-sample 36

38. Copyright © 2018 Classi Corp. All Rights Reserved. 37 We

    are Hiring！ Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects