O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

668 visualizações

Publicada em

bitbank LT Night #3 Angularの資料

Publicada em: Engenharia
  • Seja o primeiro a comentar

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

  1. 1. 1 アプリケーション開発目線から考える テストの書き方について
  2. 2. 2 @kou
  3. 3. 3 今日話すこと ● テストのメンテナンスが負担にならないようにするには ? ● サンプルコードでいくつかのテストの書き方の紹介
  4. 4. 4 テストのメンテナンスが負担にならないようにするには? そもそもなぜ負担になってしまうのか ?
  5. 5. 5 テストのメンテナンスが負担にならないようにするには? そもそもなぜ負担になってしまうのか ? テストを書くのが楽しくないから
  6. 6. 6 テストのメンテナンスが負担にならないようにするには? そもそもなぜ負担になってしまうのか ? テストを書くのが楽しくないから ● Karmaが遅い ● DIの設定がめんどくさい
  7. 7. 7 テストのメンテナンスが負担にならないようにするには? そもそもなぜ負担になってしまうのか ? テストを書くのが楽しくないから ● Karmaが遅い ● DIの設定がめんどくさい この辺が解消されれば 楽しくなるはず!
  8. 8. 8 Jestを使おう ● ブラウザを立ち上げる必要がないので、 Karmaよりも圧倒的に速い ● 後述するSnapshotテストが強力で、テスト工数がだいぶ低くなる ● Jasmineよりも分かりやすいMock機能がある ● IDEの親和性も高い
  9. 9. 9 Jestを使ったテストの書き方を紹介 ● Component Template テスト ● Component @Output テスト ● テスト時のDIのモック設定 ● Http/Observableのテスト
  10. 10. 10 Component Template テスト ● プロパティがHTMLとして正しくレンダリングされているかを確認したい ● プロパティ一箇所ごとにテストを書くのは大変で、テストも腐りやすい ● Jest Snapshotでテストをしよう
  11. 11. 11
  12. 12. 12 class名が設定されること をテストしたい
  13. 13. 13 class名が設定されること をテストしたい レンダリング内容でファイルが 生成され、そのファイルとの比較 テストが行われる
  14. 14. 14 class名が設定されること をテストしたい
  15. 15. 15 class名が正しく設定されることを確認 class名が設定されること をテストしたい
  16. 16. 16 Component @Output テスト ● ユーザーのクリックなどの処理で EventEmitterがemitされることを確認した い ● Observableとしてテストをするのは手数が多く面倒くさい ● JestのspyOnを使用してemitが呼ばれるところまでをテストをする
  17. 17. 17
  18. 18. 18 methodのコールで このemit が呼ばれること をテストしたい
  19. 19. 19 methodのコールで このemit が呼ばれること をテストしたい EventEmitterの emit を spyする
  20. 20. 20 methodのコールで このemit が呼ばれること をテストしたい EventEmitterの emit を spyする emitを発火させるmethodをコールする
  21. 21. 21 methodのコールで このemit が呼ばれること をテストしたい EventEmitterの emit を spyする emitを発火させるmethodをコールする 意図通りにemitが呼ばれることを確認
  22. 22. 22 テスト時のDIのモック設定 ● DIするものが増えるとテストを書くモチベーションが下がってしまう ● 使い捨てで、すぐに準備できるように DIを上手く解決したい ● DIするモックについては再利用を考えず、それぞれのファイル作成する ● Provider の useValue と jest.fn を使う
  23. 23. 23
  24. 24. 24 これらのdependencyを解 決したい
  25. 25. 25 これらのdependencyを解 決したい providersにはuseValue を使用し、 必要なmethodなどを jest.fn で用意する
  26. 26. 26 これらのdependencyを解 決したい providersにはuseValue を使用し、 必要なmethodなどを jest.fn で用意する Serviceの DI が解決されてnew できる
  27. 27. 27 Http/Observableのテスト ● Httpのリクエスト結果を利用した処理などをテストしたい ● HttpClientTestingModuleを使うと煩雑な設定が多くなり、 テストを書くのが億劫になってしまう ● HttpClientの get をモック化して、コールされた内容をテスト 戻り値には jest.fn を使用して、必要なObservableを設定する
  28. 28. 28
  29. 29. 29 指定のIDのUserの名前を取得するmethod Userの名前を取得できることをテストしたい
  30. 30. 30 指定のIDのUserの名前を取得するmethod Userの名前を取得できることをテストしたい HttpClientに正しく引数を渡せてい るかテストする
  31. 31. 31 指定のIDのUserの名前を取得するmethod Userの名前を取得できることをテストしたい HttpClientに正しく引数を渡せてい るかテストする 正しくコールされていることを確認
  32. 32. 32 指定のIDのUserの名前を取得するmethod Userの名前を取得できることをテストしたい HttpClientに正しく引数を渡せてい るかテストする 正しくコールされていることを確認 Httpの結果を正しく操作していることを テストする
  33. 33. 33 指定のIDのUserの名前を取得するmethod Userの名前を取得できることをテストしたい HttpClientに正しく引数を渡せてい るかテストする 正しくコールされていることを確認 Httpの結果を正しく操作していることを テストする 正しくオブジェクトから名前だけを戻しているこ とを確認
  34. 34. 34 まとめ ● 表示専用のComponentのテストは、Jest Snapshotを使う ● DIは各テストファイルで、最小限のモックを jest.fn で作成する ● モックに対して指定の引数で正しくコールしているかどうかのテストを行う ● モックからの戻り値は jest.fn で随時設定して、各テストを進めていく
  35. 35. 35 ありがとうございました

×