はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降アップデートが続いています。
Angular CLIで生成したプロジェクトでは、表1のようなテストを設定できます。単体テストは、コンポーネントやサービスといったWebページの構成要素単位で行うテスト、e2e（End-to-End）テストは、ブラウザーを自動的に操作してWebページ全体に行うテストです。テストの記述はJasmineで行い、単体テストはKarma、e2eテストはProtractorで実行します。
| テストの種類 | テスト対象 | テスト用フレームワーク | テスト実行ツール |
|---|---|---|---|
| 単体テスト | Webページの構成要素単位 | Jasmine | Karma |
| e2eテスト | Webページ全体 | Jasmine | Protractor |
これらのうち、本記事では単体テストに着目して、記述や実行の方法を説明していきます。e2eテストは次回以降で取り上げる予定です。
対象読者
- Angularでテスト駆動開発を実践したい方
- 単体テストの実行をお客さまから要求されている方
- 自分の実装したコードが信用できず、品質確保したい方
必要な環境
Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 5.2
- Node.js v8.11.1 64bit版
- Angular CLI 1.7.4
- Microsoft Edge 41.16299.248.0（Webページ表示用）
- Google Chrome 65.0.3325.181（単体テスト実行用）
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。--aotは、実行前にスクリプトの変換処理をまとめて行うオプション、--openは、ブラウザーを自動的に起動するオプションです。また、単体テストを実行するには「ng test」コマンドを実行します。
サービスの単体テスト（1）
最初に、図1のサンプル（P001-basic）で、サービスに対する単体テストの記述法を説明します。このサンプルは画面のコンポーネントと、あいさつ文を取得するサービスで構成されており、名前とロケール（言語）を入力してボタンを押すと、あいさつ文を画面に表示します。
あいさつ文を取得するGreetServiceサービスをリスト1に示します。getGreetメソッドで、引数name（名前）、date（日時）、locale（ロケール）から、あいさつ文を生成して返却します。
@Injectable()
export class GreetService {
// あいさつ文を取得
getGreet(name: string, date: Date, locale: string) {
// あいさつ文配列
const greetJP = ['おはようございます', 'こんにちは', 'こんばんは'];
const greetEN = ['Good morning', 'Hello', 'Good evening'];
// 日本語と英語のあいさつ文を選択
const greet = locale === 'ja-JP' ? greetJP : greetEN;
// 時間に合致したあいさつ文を生成して返却
const hour = date.getHours();
if (0 <= hour && hour <= 10) {
return greet[0] + ', ' + name;
}
（略：hourによって異なるあいさつ文を返す処理）
}
}
単体テストファイルの構成
単体テストを記述するファイルのひな型は、Angular CLIで生成できます。サービスを生成する「ng generate」コマンドをリスト2のように実行すると、サービス本体（greet.service.ts）と、単体テスト（greet.service.spec.ts）のファイルが同時に生成されます。
ng generate service greet --module app
生成直後の単体テストファイルを、リスト3に示します。
describe('GreetService', () => { // ...（1）
beforeEach(() => { // ...（2）
TestBed.configureTestingModule({ // ...（3）
providers: [GreetService] // ...（4）
});
});
it('should be created', // ...（5）
inject([GreetService], (service: GreetService) => { // ...（6）
expect(service).toBeTruthy(); // ...（7）
}));
});
（1）のdescribeは、あるテストのグループを表します。第1引数はグループの名前で、第2引数の関数内に1つ以上のテスト内容を記述できます。
（2）のbeforeEachは、各テストの実行前に実行される初期化処理です。なお、各テストの終了後に実行する処理はafterEachメソッドに記述できます。
（3）のTestBedは、Angularがテスト用にさまざまな機能を提供するクラスです。configureTestingModuleはテスト対象を設定するメソッドで、ここではproviders属性にGreetServiceを指定して（4）、テスト実行時にGreetServiceを依存性注入で受け取れるように設定しています。
（5）のitは、1つのテストを表します。第1引数はテスト名で、第2引数にテストの処理を実装します。（6）のinjectメソッドは、（4）で設定した依存性注入で、GreetServiceを変数serviceに取得する処理です。
（7）のexpectメソッドで、変数serviceがTruthyであることを確認します。Truthyは、変数をbooleanとして評価したときにtrueになることを表し、ここではオブジェクトが正しく生成されている（nullでない）ことを確認しています。
