ソフトウェアの品質を高めて作業効率も上げる、Angularの自動単体テスト

次世代Webアプリケーションフレームワーク「Angular」の活用 第13回

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はコマンドラインツール「Angular CLI」の利用方法を説明しました。今回は、Angular CLIのコマンドで実行できる単体テストを説明します。ソースコードを単体テストできるよう設定して、ソフトウェアの品質を高めることができます。

はじめに

　Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降アップデートが続いています。

　Angular CLIで生成したプロジェクトでは、表1のようなテストを設定できます。単体テストは、コンポーネントやサービスといったWebページの構成要素単位で行うテスト、e2e（End-to-End）テストは、ブラウザーを自動的に操作してWebページ全体に行うテストです。テストの記述はJasmineで行い、単体テストはKarma、e2eテストはProtractorで実行します。

表1　Angular CLIのプロジェクトで実行できるテスト

テストの種類	テスト対象	テスト用フレームワーク	テスト実行ツール
単体テスト	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）

　あいさつ文を取得するGreetServiceサービスをリスト1に示します。getGreetメソッドで、引数name（名前）、date（日時）、locale（ロケール）から、あいさつ文を生成して返却します。

［リスト1］あいさつ文を取得するGreetServiceサービス（P001-basic/src/app/greet.service.ts）

@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）のファイルが同時に生成されます。

［リスト2］Angularプロジェクトにサービスを追加するコマンド

ng generate service greet --module app

図2　ng generateコマンドで追加された単体テストのファイル

　生成直後の単体テストファイルを、リスト3に示します。

［リスト3］リスト2のコマンドで生成したサービスの単体テストファイル

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でない）ことを確認しています。