Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、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)
図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コマンドで追加された単体テストのファイル
図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でない)ことを確認しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5