イマドキのIDE事情 第7回手軽に導入! JS Test DriverでJavaScriptをテストしてみよう
skill

イマドキのIDE事情 第7回
手軽に導入! JS Test DriverでJavaScriptを
テストしてみよう

2014.06.10

ent39_img01.jpg

JS Test DriverはオープンソースのJavaSscript用テスティングフレームワークで、Googleによって開発されたものだ。ブラウザを制御してテストを実行するサーバ(複数のブラウザを制御可能)と、そのサーバと通信するクライアントからなり、コマンドラインから実行できるためCIとも組み合わせることが可能だ。
また、コマンドラインから実行するだけでなく、IDE用のプラグインも用意されている。今回はこのJsTestDriverについて見ていきたい。(竹添直樹

■JS Test DriverでJavaScriptをテストしてみる

はじめに基本的なコマンドラインでの利用方法から見ていこう。まずダウンロードページからJsTestDriver-x.x.x.jar(x.x.xの部分はバージョンによって異なる。本稿執筆時点では1.3.5)をダウンロードする。ここではテスト対象として以下のようなディレクトリ構成のJavaScriptプロジェクトがあるものとする。

+-JsTestDriver-1.3.5.jar(ダウンロードしたjarファイル)
|
+-JsTestDriver.conf(JSTestDriverの設定ファイル)
|
+-src/
| |
| +-HelloWorld.js(テスト対象のJavaScriptファイル)
|
+-test/
|
+-HelloWorldTest.js(テストケース)

それぞれのファイルの内容は以下の通りだ。

server: http://localhost:4224
load:
- src/*.js
- test/*.js

JsTestDriver.conf(JsTestDriverの設定ファイル)

function hello(name){
return 'Hello ' + name + '!';
}

src/HelloWorld.js(テスト対象のJavaScriptファイル)

TestCase('HelloWorldTest', {
'test hello': function() {
assertEquals('Hello Naoki!', hello('Naoki'));
}
});

test/HelloWorldTest.js(テストケース)

実際にテストを実行してみよう。コマンドラインから以下を実行してサーバを起動する。

> java -jar JsTestDriver-1.3.5.jar --port 4224

続いてテストを行うブラウザでhttp://localhost:4224にアクセスすると以下のような画面が表示されるので「Capture This Browser」をクリックする。

ent39_img02.jpg
テストを行うブラウザのキャプチャ

以下のような画面になったらテストの準備は完了だ(ここで複数のブラウザをキャプチャしておくことで同時に複数のブラウザでテストを実行することができる)。

ent39_img03.jpg
テストの準備ができたところ

コマンドラインから以下のコマンドでテストを実行することができる。

> java -jar JsTestDriver-1.3.5.jar --test all

テストが実行されると以下のように表示され、テストが成功したことがわかる。

setting runnermode QUIET
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (1.00 ms)
Firefox 22.0 Windows: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1.00 ms)

JsTestDriverでは単純なアサートだけでなく、テスト用のDOMツリーを定義したり、console.log()で出力したログを標準出力に表示する機能やカバレッジを取得する機能などがある。

また、プロジェクトの構成や依存するJavaScriptファイルのインポート等についてはJsTestDriver.confの設定で柔軟に対応することが可能だ。
詳細についてはJsTestDriverのプロジェクトサイトにあるWikiを参照して欲しい。

■プラグインでIDE上からの利用も可能

JS Test DriverにはEclipse上でテストを実行するためのプラグインも用意されており、以下の更新サイトからインストールすることができる。

http://js-test-driver.googlecode.com/svn/update/

ここでは前述の構成のプロジェクトがEclipse上のワークスペース内にインポートされているものとする(ただし、jarファイルはEclipseプラグインに含まれているため不要だ)。

プラグインのインストール後、まず設定画面でサーバのポート番号やテストの実行に使用するブラウザのパスを指定する。

ent39_img04.jpg
JsTestDriverプラグインの設定

JsTestDriverビューを開き、ビューの右上に配置されているアイコンからサーバを起動後、テストを実行したいブラウザのアイコンをクリックするとキャプチャされ、準備状態となるのでテストケースを右クリックして「Run As」→「Js Test Driver Test」を選択するとテストが実行され、結果が表示される。

ent39_img05.jpg
JsTestDriverビュー

ent39_img06.jpg
テスト結果が表示されたところ

このようにEclipseプラグインを使用することでIDE上から直接テストを実行できるうえ、結果をグラフィカルに確認することができ便利だ。コーディングにEclipseを使っているのであればこちらを使用するといいだろう。また、Eclipseの他にIntelliJ用のプラグインも提供されている。近年Web開発用途にはRubyMineやWebStormといったIntelliJベースのIDEが人気を集めているが、これらを使用している方も是非試してみて欲しい。

■まとめ

近年Web開発におけるJavaScriptの重要性は増すばかりだ。そのためJavaScriptのテスト技法も注目を集めるようになってきている。JsTestDriverは導入が容易なうえ、CIに組み込むことも可能だ。JavaScriptのユニットテストを行いたいが、どのツールを使えばよいかわからないという方は、まずは気軽にJsTestDriverを試してみてはどうだろうか。

原稿:竹添直樹
株式会社ビズリーチ所属。Scalaを愛するJVM系プログラマ。業務の傍らOSS開発や執筆活動を行っている。
https://twitter.com/takezoen

※本記事は2013年11月14日にマイナビニュースに掲載された記事からの転載です。

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW