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

by yuto hara

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Copyright © 2019 Classi Corp. All Rights Reserved. コンポーネントでこんなメソッドを書いてないですか? routerからパラメータを受け取って、そのパラメータをパラメーターにして httpリクエストして、そのレスポンスのObservableをsubscribeして、表示用にデータを整形してコンポーネントの変数に代入する。。やりすぎで複雑なメソッドはテストがしづらい 28

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Copyright © 2019 Classi Corp. All Rights Reserved. 例. リプレイスプロジェクトのコンポーネント設計ディレクトリ構成 - pages/ - URLから取得するパラメータを引数にactionをdispatch(APIコール) - containers/ - storeから状態を取得(selector)しcomponentsへ渡す - components/ - containersから値を受け取り、表示する役割が簡潔でわかりやすい。テストしやすい。 31