AngularJSはフルスタックなフレームワークで有名ですが、テストもサポートします。
AngularJSではテスティングフレームワークとテストランナーと呼ばれるツールを用いて、ユニットテストとE2Eテストを実行します。

テスティングフレームワーク

ソフトウェアテストの自動化を支援するフレームワーク。
テストコードの自動実行プログラム作成・テスト通過判定・カバレッジ集計などをやってくれます。
今回はテスティングフレームワークにJasmineを使用します。

テストランナー

テストを実際に自動実行するツール。
今回はJavaScriptテストランナーであるKarmaを使用します。

ユニットテスト環境を構築する

Node.jsをインストール

後述するパッケージ管理ツールnpm使用のため、Node.jsをインストールします。
Macであればhomebrewでインストール可能。

$ brew install node

npm をインストール

nodeがインストールできたら、npmをインストールします。

$ brew install npm

Jasmineをインストール

テスティングフレームワークJasmineをインストールします。

$ npm install jasmine-core --save-dev

Karmaをインストール

テストランナーKarmaをインストールします。
Karmaのインストールはテストを実行したいアプリケーションプロジェクトのディレクトリに移動してから行います。
便利のため、KarmaのCLIツールであるKarma-CLIもインストール。

# プロジェクトディレクトリに移動
$ cd [プロジェクトディレクトリ]

$ npm install karma
$ npm install -g karma-cli

以下のファイルが展開されていたら成功。

node_modules/
package-lock.json

CDNをローカルファイルに落とす

karmaがCDN上のライブラリを読み込めないので、
<script>や<link>のCDNをローカル参照に切り替えます。

今回はサンプルテストプログラムを実行するので依存ファイルはありませんが、
実際のアプリケーションコードをテストする際には対応する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

↓

<script src="../../lib/js/angular.min.js"></script>

.
├── css
│   └── mui.min.css
└── js
    ├── angular.min.js
    └── mui-angular.min.js

Karma初期化

次にKarmaを初期化します。
karma initコマンドを打つと下のように対話的に入力ができるようになるので、
各項目を順番に設定していきます。

# プロジェクトディレクトリに移動
$ cd [プロジェクトディレクトリ]
$ karma init

# テストランナーの指定（デフォルトでjasmineと入力されているので、そのままEnter）
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

# Require.js（JSファイルを非同期に読み込むライブラリ）を使うかどうか（noでEnter）
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

# テストランナーがブラウザに何を使うか（デフォルトでChromeと入力されているので、そのままEnter）
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> 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.
> 

# テスト対象外とするファイル（空白で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.
> 

# Karma起動中、ファイル変更時にテストを自動実行するか（yesでEnter）
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

# Configファイル完成
Config file generated at "/Users/kanairen/Projects/js/Geeky/karma.conf.js".

初期化終了後、node_modules/配下のライブラリが増えていることが確認できます。
また、karma.conf.jsがkarma init実行時のディレクトリ生成されます。
Karmaの設定はこのファイルを経由して行うことになります。

テストを作成する

いよいよテストを作成していきます。
プロジェクト直下にディレクトリtestを作成し、その下にサンプルテストコードtest_spec.jsを作成します。

test
└── test_spec.js

# test_spec.js
describe('Hello, Jasmine', function(){
    beforeEach(function(){
            // 初期化処理、JUnitでいうsetUp()
    });

    it('test start', function(){
        // テストケース実行
        expect(1 + 2 + 3 + 4 + 5).toEqual(15); 
    });:;
});

さらに、さきほどkarma initで作成したkarma.conf.jsを編集します。
テスト対象ファイルへのパスと、必要とするソースコード/ライブラリへのパスをfile:リストに追加します。
ファイルパスには正規表現が利用可能です。

    // list of files / patterns to load in the browser
    files: [
        'lib/js/angular.min.js',
        'lib/js/mui-angular.min.js',
        'lib/css/mui.min.css',
        'src/js/*.js',
        'test/*_spec.js'  // テストファイルへのパス
    ],

テストを実行する

作成したテストを実行してみます。
karma.conf.jsに指定したブラウザが表示され、テストが実行されます。

$ karma start karma.conf.js          
05 03 2018 22:57:21.867:WARN [karma]: No captured browser, open http://localhost:9876/
05 03 2018 22:57:21.876:INFO [karma]: Front-end scripts not present. Compiling...
05 03 2018 22:57:22.564:INFO [karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
05 03 2018 22:57:22.564:INFO [launcher]: Launching browser Chrome with unlimited concurrency
05 03 2018 22:57:22.581:INFO [launcher]: Starting browser Chrome
05 03 2018 22:57:25.828:INFO [Chrome 64.0.3282 (Mac OS X 10.11.5)]: Connected on socket wOBo_tCUqrACSe3HAAAA with id 54719492
Chrome 64.0.3282 (Mac OS X 10.11.5): Executed 1 of 1 SUCCESS (0.123 secs / 0 secs)

f:id:rennnosukesann:20180305230031p:plain