はじめに
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)で、サービスに対する単体テストの記述法を説明します。このサンプルは画面のコンポーネントと、あいさつ文を取得するサービスで構成されており、名前とロケール(言語)を入力してボタンを押すと、あいさつ文を画面に表示します。
![図1 あいさつ文を表示するサンプル(P001-basic)](http://cz-cdn.shoeisha.jp/static/images/article/10838/10838_001.png)
あいさつ文を取得する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
![図2 ng generateコマンドで追加された単体テストのファイル](http://cz-cdn.shoeisha.jp/static/images/article/10838/10838_002.png)
生成直後の単体テストファイルを、リスト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でない)ことを確認しています。