AngularJS TIPS
AngularJSアプリの単体テストを実施するには？（準備編）
AngularJSで一般的に採用されているテスティングフレームワーク「Karma＋Jasmin」による単体テスト環境を構築する手順を説明する。
単体テスト（ユニットテスト）とは、アプリを構成する個々の要素――AngularJSアプリであれば、サービスをはじめ、コントローラー、ディレクティブ、フィルターなどが正しく動作するかどうかを確認するためのテストです。JavaScriptの世界では、単体テストを自動化するためのテスティングフレームワークがあまた提供されていますが、AngularJSでは、まずKarma＋Jasmineの組み合わせを採用するのが一般的で、ドキュメントも充実しています。本稿でも、まずはKarma／Jasmineについて概要を触れた後、利用するための環境を準備していきます。
JasmineとKarma
最初に、単体テストで利用するJasmineとKarmaについて軽く触れておきます。
まず、Jasmineはテスティングフレームワークに分類されるライブラリで、スクリプトで表されたテストを実行し、テスト対象のコード（例えばサービスやフィルター）が期待した値を返すかどうかを検証します。JavaScriptで利用できるテスティングフレームワークには、Jasmineの他にも、Mocha、QUnit、Nodeunitなどがあります。この中でも、JasmineではBDD（Behavior Driven Development）形式の構文を採用しており、テストコードを英文に近い形式で、アプリの振る舞い（behavior）として表現できることから可読性に優れています。
そして、Karmaはテストを実行するためのランナーです。Jasmineでもランナーは付属していますが、KarmaはもともとがAngularJSのために開発されていることから、AngularJSとの親和性も高く、実行スピードにも優れています。また、複数のブラウザー環境を同時にテストできる、CI（継続的インテグレーション）ツールであるJenkinsとも連携できるなど、効率的にテストを進めるための機能が充実しています。
冒頭でも触れたように、まずはKarma＋Jasmineの組み合わせを採用するのが無難でしょう。ただし、Karmaは別にJasmine専用のランナーではなく、Mocha、QUnit、Nodeunitなど、主要なテストティングフレームワークに対応しています。
単体テストのための環境を整える
それでは、ここからはKarma＋Jasmineでの環境を構築していきます。
1Node.jsをインストールする
Karmaを実行するには、あらかじめNode.jsをインストールしておく必要があります。公式サイトからインストーラー（本稿ではnode-v6.3.0-x64.msi）を入手し、起動してください。インストールそのものはウィザードに従っていくだけなので、特に迷うところはないはずです。
2Karmaをインストールする
Karmaと、そのクライアントツール（karma-cli）、Jasmine本体（jasmine-core）をインストールするには、Node.jsのパッケージ管理ツールであるnpm（Node Package Manager）を利用します。コマンドプロンプト（Windows）やターミナル（Mac）を使ってアプリケーションルートに移動した上で、以下のコマンドを実行してください。
|
*1
|
> cd C:\xampp\htdocs\angular_tips\UnitTest
> npm install karma jasmine-core
> npm install -g karma-cli
|
C:\xampp\htdocs\angular_tips\UnitTestは、本稿で作成したサンプルのアプリケーションルートとなるディレクトリを意味します。
※MacやLinuxの場合は、cdコマンドによるディレクトリ移動先を適宜、環境に合わせたものにしてください。
- *1
-gオプションは、「ライブラリをグローバルにインストールしなさい」という意味です。クライアントツールのように、アプリによらず、その環境全体で利用するようなものは、グローバルにインストールします。-gオプションを付けない場合、アプリケーションルートの下にnode_modulesフォルダーが作成され、その配下にJasmineとKarmaの実行に必要となる基本的なライブラリやフレームワークがインストールされます。
また、AngularJSで利用するライブラリを、テスト環境にも配置しておきましょう。本稿では/angular_tips/UnitTest/libフォルダーに、以下のファイルをコピーしておきます。
3Karmaの設定ファイルを初期化する
Karmaを利用するに先立って、karma initコマンドでKarmaの設定ファイルを生成します。途中、必要な情報を訊かれますので、以下のコメントに従って情報を入力してください。
|
> cd C:\xampp\htdocs\angular_tips\UnitTest …… アプリルートに移動
> karma init …… 初期化コマンドを実行
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine …… 利用するテストフレームワーク
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no …… Require.js*2利用するか
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome …… 複数ブラウザーの指定が可能。ここではChromeを指定
> （そのままEnterキー押下で次の設問へ）
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> lib/angular.js …… 以下を手動で入力
> lib/angular-mocks.js
> lib/angular-sanitize.js
> scripts/*.js
12 07 2016 15:00:34.930:WARN [init]: There is no file matching this pattern.
> spec/*_spec.js …… テストに使用するファイル
12 07 2016 15:01:24.668:WARN [init]: There is no file matching this pattern.
> （Enterキー押下で次の設問へ）
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> …… テスト対象から除外するファイル（ここでは、なし。Enterキー押下）
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes …… コード変更時にテストを再実行するか
Config file generated at "C:\xampp\htdocs\angular_tips\UnitTest\karma.conf.js".
|
※MacやLinuxの場合は、ディレクトリを適宜、環境に合わせたものにしてください。
テストスクリプトは「～_spec.js」*3のように命名するのが一般的ですので、本稿でもその規則に則り、/specフォルダーの配下にbasic_spec.js*3のような名前でテストスクリプトを配置するものとします。
- *2
Require.jsはJavaScriptのモジュールを非同期に読み込むためのライブラリです。参考：http://requirejs.org/（英語）。 - *3 「～」の部分は、テスト対象のファイル名と同じにするのが通例です。
basic_spec.jsであれば、basic.jsをテストするファイルであると、対象関係が明確になります。
設定ファイルの初期化が完了すると、ウィザードでの指定に従って、関連するライブラリも/node_modulesフォルダーの配下にインストールされます。
フォルダーとして生成されている/karma-chrome-launcherはKarmaでChromeと連携するためのプラグインで、/karma-jasmineはKarmaからJasmineを呼び出すためのプラグインです。どんなプラグインがインストールされるかは、選択したテスティングフレームワーク、ブラウザー環境によって変化します。
また、アプリケーションルートにはKarmaの設定ファイルであるkarma.conf.jsが、以下のように生成されます（コメント部分は筆者によるもの）。以後、設定を変更する際には、適宜、こちらのファイルを編集してください。
|
// Karma configuration
// Generated on Tue Jul 12 2016 15:43:53 GMT+0900 (東京 (標準時))
module.exports = function(config) {
config.set({
// files／excludeなどのパスを解決する際の基底パス
basePath: '',
// 利用するテスティングフレームワーク
frameworks: ['jasmine'],
// ブラウザーで読み込むファイル（パターンも可）
files: [
'lib/angular.js',
'lib/angular-mocks.js',
'lib/angular-sanitize.js',
'scripts/*.js',
'spec/*_spec.js'
],
// filesパラメーターから除外するリスト
exclude: [
],
// テスト実行前に実行すべき処理
preprocessors: {
},
// テスト状況を知らせる方法
reporters: ['progress'],
// HTTPサーバーのポート
port: 9876,
// ログ／テスト結果をカラー表示するか
colors: true,
// ログレベル
logLevel: config.LOG_INFO,
// コードの監視機能を有効にするか
autoWatch: true,
// テストに利用するブラウザー
browsers: ['Chrome'],
// テスト実行後にすぐに終了するか
singleRun: false,
// 同時実行レベル
concurrency: Infinity
})
}
|
以上で、現在のアプリをテストするための準備は完了です。
処理対象：Karma＋Jasmine カテゴリ：基本
※以下では、本稿の前後を合わせて5回分（第66回～第70回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
66. アプリ内でよく利用するビジネスロジックを定義するには？（factoryメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
67. パラメーター付きのサービスを定義するには？（providerメソッド）
value／service／factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。
68. 【現在、表示中】≫ AngularJSアプリの単体テストを実施するには？（準備編）
AngularJSで一般的に採用されているテスティングフレームワーク「Karma＋Jasmin」による単体テスト環境を構築する手順を説明する。
69. AngularJSアプリの単体テストを実施するには？（実行編）
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSアプリの単体テストを記述して、それをテスト実行するまでの手順を説明する。
70. AngularJSのサービスを単体テストするには？
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「サービス」の単体テストを記述し、それを実行する方法を解説する。
