Let's Testacular!

こんにちは、開発のkoyaです

今回はJavaScript向けのTest Runner、Testacularを紹介します。

TestacularはGoogleのJavaScript MVCフレームワークAngularJSで利用されています（というかAngularJSの開発のために作られたようです）。

先日社内の勉強会でAngularJSが取り上げられ、そのときTestacularに興味を持ったので調べてみました。

Testacularについて

TestacularはNode.jsで実装されたサーバー型のTest Runnerです（テストフレームワークではないです）。

Testacularは自分にアクセスしてきたブラウザに対してJavaScriptのテストコードを渡し、その実行結果を取りまとめて出力します。

複数のブラウザに対して同時にテストを実行できる上、別のマシンで実行されているブ

ラウザ（例えばモバイルデバイスやタブレットなど）に対するテストも簡単に実行することができます。

Socket.IOを利用しているのも特徴で、一度接続が確立された後はHTTPを介さずにブラウザとやりとりするので繰り返しテストを走らせる場合に効率的です。
さらに、Web Storm(JavaScript IDE) でデバックしやすいように作られていたり、JenkinsやTravis CIなどのCIサーバーでも利用できるように考慮されています。

今回は、Testacularの導入からテストの実行、Jenkins上での実行までを紹介したいと思います。

インストール

はじめに、環境にNode.jsがインストールされていない場合はNode.jsをインストールしてください。

Node.jsのインストールが終わったら、npm（Node.jsのパッケージ管理）からTestacularをインストールします。

npm -g install testacular

# 今回の記事では Node.js v0.8.14, Testacular v0.4.0 を利用しました。

テストコード

今回はTestacularがサポートしているJasmineでテストを書きます。

ディレクトリ構成は次の通りです。

testacular-sample/

- src/HelloWorld.js

- spec/HelloWorldSpec.js

HelloWorld.js

function helloWorld() {
    return "Hello world!";
}

HelloWorldSpec.js

describe("Hello world", function() {
    it("returns hello world", function() {
        expect(helloWorld()).toEqual("Hello world!");
    });
});

コンフィグ
testacular init コマンドでコンフィグファイルを作成します。次のような設定をしました。

テストフレームワーク： jasmine(default)
ブラウザの自動起動：なし（タブで変更）
テストファイル/ソースファイル： src/*.js、spec/*.js
無視するファイル：なし
ファイル変更時にテストを走らせるかどうか： yes

※デフォルトではブラウザの自動起動設定は空ではありませんが、自動起動したブラウザでなくてもテストが流れることを見るため空に設定しました（仕組みを知らなかったときに自動起動できるブラウザだけがテストできると勘違いしてしまったので）。

設定が終わるとtestacular.conf.jsが出力されます。

コンフィグファイルの修正

Testacularサーバーの基準となるパスを示すbasePathパラメータがデフォルトでrootディレクトリを指すようになっているのでコンフィグファイルのパス基準になるように変更します。

basePath='';

※修正しない場合はテストファイルなどのパスをbasePath基準に修正する必要があります。

Testacularの起動

testacular startコマンドでTestacularを起動します。

デフォルトでtestacular.conf.jsが使われます。startの後にコンフィグファイルを指定すればそちらが使われます。

起動したら、テストしたいブラウザでTestacularのアドレスにアクセスします。

アクセスすると同時にテストが実行され、コンソールに結果が出力されます。

Chromeでアクセスした場合

同様に複数のブラウザで接続すればそれぞれでテストが走ります。

また、監視対象に設定したソースやテストを変更するたびに各ブラウザでテストが走ります。

(testacular runコマンドでテストを手動実行することもできます。

変更の度にテストが走らないで欲しい場合は変更時の自動テスト（autoWatch）をオフにしてこちらを利用するとよいと思います。）

サクサクとテストと開発が進められてなかなかいい感じです。
次は、CIサーバー（Jenkins）で動かす場合について見ていきます。

Jenkinsでの実行

Jenkins上での実行向けにTestacularのコンフィグを変更します。

Jenkins向けのコンフィグ

まず、JUnit形式のテスト結果を利用するための設定を追加します。reporters設定に'junit'を追加し、junitReportersの設定で結果XMLファイルの出力先を設定します。

reporters = ['progress', 'junit'];

junitReporter = {

outputFile: 'test-results.xml'

};

次に、JenkinsとTestacularのデフォルトポートが8080でかぶっているので変更します。

port = 8090;

また、Testacular起動時にブラウザを起動する設定を追加します。今回は開発環境で試していたのでChromeを選びました。

browsers = ['Chrome'];

対応ブラウザは

Chrome
ChromeCanary
Firefox
Opera
Safari (only Mac)
PhantomJS
IE (only Windows)

です。

最後に、singleRunフラグをオンにします。このフラグがオンの時、Testacularはstartした後ブラウザを起動しテストを実行した後終了します。

singleRun = true;

設定が終わったらtestacular startを実行して、ブラウザが自動起動した上でテストが終了するか確認します。コンフィグが間違っている場合はうまく実行されないので、Jenkinsの設定に進む前にちゃんとテストが実行されるか確認しましょう。

無事テストがうまくいったらJenkinsの設定に進みます。

Jenkinsのジョブ設定

Jenkinsではフリースタイルのジョブを作成し、必要に応じてSCMの設定（Gitリポジトリの指定など）をします。