bitbank LT Night #3 Angularの資料

1. 1
アプリケーション開発目線から考える
テストの書き方について

2. 2
@kou

3. 3
今日話すこと
● テストのメンテナンスが負担にならないようにするには ?
● サンプルコードでいくつかのテストの書き方の紹介

4. 4
テストのメンテナンスが負担にならないようにするには?
そもそもなぜ負担になってしまうのか ?

5. 5
テストのメンテナンスが負担にならないようにするには?
そもそもなぜ負担になってしまうのか ?
テストを書くのが楽しくないから

6. 6
テストのメンテナンスが負担にならないようにするには?
そもそもなぜ負担になってしまうのか ?
テストを書くのが楽しくないから
● Karmaが遅い
● DIの設定がめんどくさい

7. 7
テストのメンテナンスが負担にならないようにするには?
そもそもなぜ負担になってしまうのか ?
テストを書くのが楽しくないから
● Karmaが遅い
● DIの設定がめんどくさい
この辺が解消されれば
楽しくなるはず!

8. 8
Jestを使おう
● ブラウザを立ち上げる必要がないので、 Karmaよりも圧倒的に速い
● 後述するSnapshotテストが強力で、テスト工数がだいぶ低くなる
● Jasmineよりも分かりやすいMock機能がある
● IDEの親和性も高い

9. 9
Jestを使ったテストの書き方を紹介
● Component Template テスト
● Component @Output テスト
● テスト時のDIのモック設定
● Http/Observableのテスト

10. 10
Component Template テスト
● プロパティがHTMLとして正しくレンダリングされているかを確認したい
● プロパティ一箇所ごとにテストを書くのは大変で、テストも腐りやすい
● Jest Snapshotでテストをしよう

11. 11

12. 12
class名が設定されること
をテストしたい

13. 13
class名が設定されること
をテストしたい
レンダリング内容でファイルが
生成され、そのファイルとの比較
テストが行われる

14. 14
class名が設定されること
をテストしたい

15. 15
class名が正しく設定されることを確認
class名が設定されること
をテストしたい

16. 16
Component @Output テスト
● ユーザーのクリックなどの処理で EventEmitterがemitされることを確認した
い
● Observableとしてテストをするのは手数が多く面倒くさい
● JestのspyOnを使用してemitが呼ばれるところまでをテストをする

17. 17

18. 18
methodのコールで
このemit が呼ばれること
をテストしたい

19. 19
methodのコールで
このemit が呼ばれること
をテストしたい
EventEmitterの emit を spyする

20. 20
methodのコールで
このemit が呼ばれること
をテストしたい
EventEmitterの emit を spyする
emitを発火させるmethodをコールする

21. 21
methodのコールで
このemit が呼ばれること
をテストしたい
EventEmitterの emit を spyする
emitを発火させるmethodをコールする
意図通りにemitが呼ばれることを確認

22. 22
テスト時のDIのモック設定
● DIするものが増えるとテストを書くモチベーションが下がってしまう
● 使い捨てで、すぐに準備できるように DIを上手く解決したい
● DIするモックについては再利用を考えず、それぞれのファイル作成する
● Provider の useValue と jest.fn を使う

23. 23

24. 24
これらのdependencyを解
決したい

25. 25
これらのdependencyを解
決したい
providersにはuseValue を使用し、
必要なmethodなどを jest.fn で用意する

26. 26
これらのdependencyを解
決したい
providersにはuseValue を使用し、
必要なmethodなどを jest.fn で用意する
Serviceの DI が解決されてnew できる

27. 27
Http/Observableのテスト
● Httpのリクエスト結果を利用した処理などをテストしたい
● HttpClientTestingModuleを使うと煩雑な設定が多くなり、
テストを書くのが億劫になってしまう
● HttpClientの get をモック化して、コールされた内容をテスト
戻り値には jest.fn を使用して、必要なObservableを設定する

28. 28

29. 29
指定のIDのUserの名前を取得するmethod
Userの名前を取得できることをテストしたい

30. 30
指定のIDのUserの名前を取得するmethod
Userの名前を取得できることをテストしたい
HttpClientに正しく引数を渡せてい
るかテストする

31. 31
指定のIDのUserの名前を取得するmethod
Userの名前を取得できることをテストしたい
HttpClientに正しく引数を渡せてい
るかテストする
正しくコールされていることを確認

32. 32
指定のIDのUserの名前を取得するmethod
Userの名前を取得できることをテストしたい
HttpClientに正しく引数を渡せてい
るかテストする
正しくコールされていることを確認
Httpの結果を正しく操作していることを
テストする

33. 33
指定のIDのUserの名前を取得するmethod
Userの名前を取得できることをテストしたい
HttpClientに正しく引数を渡せてい
るかテストする
正しくコールされていることを確認
Httpの結果を正しく操作していることを
テストする
正しくオブジェクトから名前だけを戻しているこ
とを確認

34. 34
まとめ
● 表示専用のComponentのテストは、Jest Snapshotを使う
● DIは各テストファイルで、最小限のモックを jest.fn で作成する
● モックに対して指定の引数で正しくコールしているかどうかのテストを行う
● モックからの戻り値は jest.fn で随時設定して、各テストを進めていく

35. 35
ありがとうございました