複数のブラウザで一度にJavaScriptのテストを行う

JavaScriptでテストを書こう！ 第5回

IDEで使用する

　ここまでは、コマンドラインでのテストの方法を説明してきました。コマンドラインでのテストでも十分効果があるのですが、普段はIDE（統合開発環境）で開発しており、IDE経由でデバッグをしたいという方もいらっしゃるのではないでしょうか。js-test-driverには、EclipseやIntelliJのプラグインが提供されており、IDEでの実行が可能です。

Eclipseでテストを実行

　では、Eclipseでテストを実行してみましょう。手順は以下のとおりです。なお、以下の例はPleiadesの日本語版で行っています。

1）プラグインインストール

　「ヘルプ」-「新規ソフトウェアのインストール」を選択し、作業対象に「http://js-test-driver.googlecode.com/svn/update/」を入力します。表示された「JS Test Driver Plugin For Eclipse」を選択し、インストールを行います。インストール後、Eclipseが再起動されます。

図3　JS Test Driver Plugin For Eclipseをインストール

2）JSTestDriverのビューを表示

　「ウィンドウ」-「ビューの表示」-「その他」-「JavaScript」-「JsTestDriver」を選択します。

図4　JsTestDriverのビューの表示

図5　JsTestDriverのビュー

3）JsTestDriverビューの右上にある実行ボタンを押下し、js-test-driverのサーバを起動

4）表示されているURLにテスト対象のブラウザでアクセスする

図6　サーバ実行中

5）テスト対象のJavaScriptファイルを選択し、実行

図7　テスト実行

6）実行結果が表示される

図8　テスト実行結果表示

IntelliJ IDEAでテストを実行

　次に、IntelliJ IDEAでテストを実行してみましょう。手順は以下のとおりです。なお、以下の例はIntelliJ IDEA 13.1.3で行っています。

1）JSTestDriver Pluginのインストール

　「File」-「setting」-「plugin」-「Browse repositories...」を選択し、検索窓に「JsTest」と入力すると、JSTestDriver Pluginが表示されるので、右上のインストールボタンを押下します。インストール後、IntelliJが再起動されます。

図9　JSTestDriver Pluginのインストール

2）サーバを立ち上げる

　右下に表示されている、「JsTestDriver Server」をクリックすると、ビューが表示されます。左上の実行ボタンを押下してください。

図10　JsTestDriverサーバ立ち上げ

3）表示されているURLにテスト対象のブラウザでアクセスする

4）テストを実行する

　「Run」-「Run」を選択し、テストを実行します。テストの実行結果が表示されます。

図11　テストの実行結果表示

最後に

　今回は、js-test-driverを使ってクロスブラウザのテストを行いました。次回は、プロダクトコードの中でどれくらいテストが通っているか解析するために、カバレッジを取得する方法を説明します。