Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
テストカバレッジ100%のプロジェクトで学んだ、 ユニットテストの書き方
yuto hara
March 27, 2019
1
1.3k
テストカバレッジ100%のプロジェクトで学んだ、 ユニットテストの書き方
yuto hara
March 27, 2019
Tweet
Share
More Decks by yuto hara
See All by yuto hara
componentの分け方
hxrxchang
0
43
SPAの状態管理
hxrxchang
0
250
インドカレー屋で学ぶ非同期処理
hxrxchang
1
530
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Building Adaptive Systems
keathley
25
1.1k
Writing Fast Ruby
sferik
612
57k
Music & Morning Musume
bryan
35
4.2k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Infographics Made Easy
chrislema
233
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
A better future with KSS
kneath
225
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Transcript
Copyright © 2019 Classi Corp. All Rights Reserved. テストカバレッジ100%の プロジェクトで学んだ、
ユニットテストの書き方 2019/03/27 Classi Angular Night #2 原 悠人
Copyright © 2019 Classi Corp. All Rights Reserved. - 原悠人
- Classi 2019新卒 (2019/02 ~ Join) - リプレイスプロジェクトのフロントエンド担当 - プログラミング歴 1年半 - Angular歴 1年弱 1 自己紹介
Copyright © 2019 Classi Corp. All Rights Reserved. - 原悠人
- Classi 2019新卒 (2019/02 ~ Join) - リプレイスプロジェクトのフロントエンド担当 - プログラミング歴 1年半 - Angular歴 1年弱 - 昨日大学を卒業しました! 2 自己紹介
Copyright © 2019 Classi Corp. All Rights Reserved. はじめに ClassiにJoinして約2ヶ月。
今携わってるプロジェクトのこれめっちゃいいな と思ったところを紹介したいと思います! 3
Copyright © 2019 Classi Corp. All Rights Reserved. 4
Copyright © 2019 Classi Corp. All Rights Reserved. Renovateとは -
パッケージの自動アップデートツール - 対象リポジトリの package.json を監視し、パッケージに更新があった場 合に Pull Request(PR) を作成してくれる - Renovateのおかげでアプリケーションが依存してるライブラリがほぼ最 新に保てる - 詳しくは https://qiita.com/kasaharu/items/1af74b49e98658cf9a8e 5
Copyright © 2019 Classi Corp. All Rights Reserved. 6
Copyright © 2019 Classi Corp. All Rights Reserved. 7 カバレッジ100%!!!
Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジ100%の単体テスト -
パッケージアップデート、機能追加の際の安心材料に 8
Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジ100%の単体テスト -
パッケージアップデート、機能追加の際の安心材料に - 他にもいいことがあるかも... ↑これが今日話したいことです 9
Copyright © 2019 Classi Corp. All Rights Reserved. ところで みなさんテスト書いてますか??
10
Copyright © 2019 Classi Corp. All Rights Reserved. テスト難しいですよね -
僕はClassiに入るまで、書こう書こうと思って書けていませんでした。 - ng new した時を最後にテストがパスしなくなる。 - 既存の程よく育ったテストのないアプリだと、 どこから手をつけていいのかわららない 11
Copyright © 2019 Classi Corp. All Rights Reserved. そもそもテストとは -
ユニットテスト component、serviceなどの振る舞いのテスト Jasmine(フレームワーク)とkarma(テストランナー)を使用 - End to Endテスト ブラウザの動きを再現してアプリケーションの動作を確認 (バックエンドとの通信なども) protractorを使用 どちらも@angular/cliが提供してくれる 12
Copyright © 2019 Classi Corp. All Rights Reserved. そもそもテストとは -
ユニットテスト component、serviceなどの振る舞いのテスト Jasmine(フレームワーク)とkarma(テストランナー)を使用 今日はこっちの話をします - End to Endテスト ブラウザの動きを再現してアプリケーションの動作を確認 (バックエンドとの通信なども) protractorを使用 どちらも@angular/cliが提供してくれる 13
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -
なぜng newした時を最後にテストが通らなくなるのか 14
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -
なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから 15
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -
なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから - templateで依存している子componentをimportする。 - componentが利用しているmoduleをimportする。 16
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテスト -
なぜng newした時を最後にテストが通らなくなるのか - 依存関係を解決出来てないから - templateで依存している子componentをimportする。 - NO_ERRORS_SCHEMAを利用する - componentが利用しているmoduleをimportする。 17
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
Copyright © 2019 Classi Corp. All Rights Reserved. こんな感じのテストコードが生成されてます 19
Copyright © 2019 Classi Corp. All Rights Reserved. テストを通すには ←
beforeEach(async() => で依存関係を解決 20 ← beforeEach(async() => で依存関係を解決 ← beforeEach(() => でcomponentのインスタンスを 作成
Copyright © 2019 Classi Corp. All Rights Reserved. とりあえずテストが通るようになるはず 21
Copyright © 2019 Classi Corp. All Rights Reserved. どれくらいテストが書けてるか確かめる 22
Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 angular.json
23
Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 24
Copyright © 2019 Classi Corp. All Rights Reserved. カバレッジの表示方法 /coverage/{app-name}/index.html
25
Copyright © 2019 Classi Corp. All Rights Reserved. あとはカバレッジを高めるだけ 26
Copyright © 2019 Classi Corp. All Rights Reserved. コンポーネントでこんなメソッドを書いてないですか? routerからパラメータを受け取って、そのパラメータをパラメーターにして
httpリクエストして、レスポンスのObservableをsubscribeして、表示用にデー タを整形してコンポーネントの変数に代入する。。 27
Copyright © 2019 Classi Corp. All Rights Reserved. コンポーネントでこんなメソッドを書いてないですか? routerからパラメータを受け取って、そのパラメータをパラメーターにして
httpリクエストして、そのレスポンスのObservableをsubscribeして、表示用に データを整形してコンポーネントの変数に代入する。。 やりすぎで複雑なメソッドはテストがしづらい 28
Copyright © 2019 Classi Corp. All Rights Reserved. テストを書きやすくする -
コンポーネントはロジック、状態をなるべく持たない - httpリクエストするメソッドはserviceで - httpレスポンスを整形するのはmapで - レスポンスのデータはserviceでBehaviorSubjectとして持つ コンポーネントはサービスのメソッドコール、serviceは 関数のテストで済む。 29
Copyright © 2019 Classi Corp. All Rights Reserved. そもそもユニットテストとは -
component, service, pipe (reducer) などが、どんな振る舞いをするか確 認すること - それぞれのファイルがどんな仕事をするのかを簡潔に説明できれば、 テストがしやすいと言えるのではないか 30
Copyright © 2019 Classi Corp. All Rights Reserved. 例. リプレイスプロジェクトのコンポーネント設計
ディレクトリ構成 - pages/ - URLから取得するパラメータを引数にactionをdispatch(APIコール) - containers/ - storeから状態を取得(selector)しcomponentsへ渡す - components/ - containersから値を受け取り、表示する 役割が簡潔でわかりやすい。テストしやすい。 31
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテストがもたらすもの -
パッケージアップデートや機能追加時の安心感 32
Copyright © 2019 Classi Corp. All Rights Reserved. ユニットテストがもたらすもの -
パッケージアップデートや機能追加時の安心感 - テストを書きやすくするために考えることが、設計の見直しのチャンスに なる 33
Copyright © 2019 Classi Corp. All Rights Reserved. 今後の課題 -
現状ユニットテストのみ - ロジックしか見れていない - UIのテスト - スナップショットテスト - DOMの変更を検知するためのテスト - ビジュアルリグレッションテスト - 画像で見た目の変更を検知するテスト Jest使いたい 34
Copyright © 2019 Classi Corp. All Rights Reserved. 今後の課題 -
今は開発フェーズ - 仕様変更が無い(少ない)からカバレッジ100%でも辛く無い - 運用フェーズで仕様変更が頻発すると辛くなる? 35
Copyright © 2019 Classi Corp. All Rights Reserved. テストカバレッジ100%のメモ帳を作ったので よかったらご覧ください!
https://github.com/hxrxchang/ng-test-sample 36
Copyright © 2018 Classi Corp. All Rights Reserved. 37 We
are Hiring! Classiでは一緒に働く仲間を募集しています 詳細はWantedlyページにて https://www.wantedly.com/companies/classi/projects