はじめに
Angular のテスト、難しくないですか？
TestBed とか async とか見慣れないものがたくさん出てきて、何をどう使えばいいのか迷いますよね。
公式ドキュメントの説明が長くて読むのにひと苦労なのと、その割にあまりテストのサンプルは載っていません。
ネットでサンプルのテストコードを探すといろいろなパターンのコードが出てきて混乱します。
つぎはぎで作った理解の浅いテストコードは使い回しが効かず、謎のコンパイルエラーがどうにも解決できなくなります。
何か実装するためにはそれを検証するためのテストが必要で、実装が書けたのにテストを書くのが異常に遅いという状況が続いてイライラしていました。せめてコンポーネントの基本的なテストだけでもササッと書けるようになりたいですよね。
私は Angular の開発経験が浅く、技術力も情報量も圧倒的に不足しています。
冒頭から何ですが、Angular の仕組みについて詳しい方が素敵なマニュアルを書いてくれるのをとても期待しています。
この記事はそれまでのつなぎで、自分用のまとめとして書いたものです。
ソースコードは https://github.com/ringtail003/angular-testing にアップしています。
また、記事の内容に間違いがありましたら、編集リクエストをいただけると大変助かります。
前提条件
この記事は以下の環境で検証しています。
- node v9.9.0 (npm v5.6.0)
- angular/cli v1.7.3
本文中に記載している Angular の Github リポジトリへのリンクは、2018年3月時点での最新安定版 v5.2.8 を参照しています。
目次
- angular/cli で生成されるコンポーネントのテストコード
- sample1 / フォームに含まれない単体のHTML要素のテスト
- sample2 / Template driven Form を利用したコンポーネントのテスト
- sample3 / Reactive form を利用したコンポーネントのテスト
- sample4 / サービスが注入されたコンポーネントのテスト
- sample5 / ネストしたコンポーネントのテスト
- sample6 / 入出力を伴うコンポーネントのテスト
おまけ
テスト実行時にブラウザが起動しないようにする
angular/cli で作成したアプリケーションで npm test を実行するとブラウザが起動します。
Chrome ヘッドレスブラウザを使うと cli だけで完結するので便利です。
// package.json
"scripts": {
...
+ "test:dev": "npm test -- --browser ChromeHeadless",
}
$ npm run test:dev
カバレッジ
さらにカバレッジがオプションひとつで簡単に出力できます。
出力先は {ROOT_DIRECTORY}/coverage です。
// package.json
"scripts": {
...
- "test:dev": "npm test -- --browser ChromeHeadless",
+ "test:dev": "npm test -- --browser ChromeHeadless --code-coverage",
}