0.前置き
ASP.NET MVCでのビューを開発する際や、Win8のメトロスタイルアプリを開発する際において、
JavaScriptの重要性がどんどん高まっています。
今までなんとなしに逃げてきたJavaScriptですが、本格的に取り組まなくてはいけません。
今回はそんなJavaScriptの開発におけるコンポーネントテストの方法をまとめておこうと思います。
普段仕事でReSharperを使っているので、ReSharper+QUnitの組み合わせでのテスト方法を簡単にまとめます。
1.それぞれのツールの紹介
QUnitとは
QUnitはもともとjQuery開発のために作成されたテスティングフレームワークです。
いまやjQueryへの依存がないため、JavaScriptのテスト一般に利用可能です。
ドキュメントは、こちらにあります。
ReSharper
ReSharperはVisualStudioのアドオンです。
開発生産性向上ツール？とでも言うのでしょうか。
コーディング支援、リファクタリング支援、コンポーネントテスト支援などなど多くの機能を搭載しています。
開発している会社は、JetBrainsで最新バージョンは6.1です。
詳しい情報は、こちらからどうぞ。
2.インストール
※ReSharperのインストールの話は省きます。
ReSharper（Ver.6以降）が入っていれば、QUnitのインストール作業は不要です。
ReSharperがビルドされた際には最新のQUnitが組み込まれているようです。
設定も特にないです。オプションにQUnitのテスト結果を表示するブラウザーを設定するぐらいです。
3.実際に使ってみる
3-1.テスト対象のJSファイルを作成する
calculate.jsとして、以下のコードを作成しました。
[sourcecode language=”javascript”]
function add(x,y) {
return x + y;
}
function substract(x,y) {
return x – y;
}
function muliply(x,y) {
return x * y;
}
[/sourcecode]
3-2.テストを行うJSファイルを作成する
test/calculate.test.jsとして以下のコードを作成しました。
[sourcecode language=”javascript”]
//↓ReSharperにテスト対象のコードを教えてあげます。
/// <reference path="../calculate.js"/>
//↓個々のテストメソッドをグループ化します。(QUnitの構文)
module("Calculator tests");
test("SumTest", function() {
var result = add(2, 3);
equals(5, result, "Sum of 2 and 3 is 5");
});
test("SubstractTest", function() {
var result = substract(5, 1);
equals(4, result, "Substracting 1 from 5 gives 4");
});
[/sourcecode]
3-3.テストを実行する
*1. テストを実行する*
テストモジュールや、テストメソッドの左にテスト実行マーク（ReSharperの機能）が出るので
これを選択して実行します。
*2.Visual Studio上でテスト結果を確認する*
Visual Studio上で結果は確認できます。
*3.QUnitの標準の方法でテスト結果を確認する*
もちろんQUnit標準の方法で結果を確認することができます。
4.サンプルを書いてみての補足
QUnitの標準の方法ですと、テスト結果を表示するHTMファイルを作成する必要があります。
しかし、ReSharperを用いる場合は必要ないです。ReSharperがテスト実行時に勝手に作ってくれます。
5.サンプルコード
サンプルコードはgithubにホスティングしてあります。
QUnitのサンプル
テストコード本体
6.最後に
MsTestと同じ手法でコンポーネントテストを実施できるのは魅力的ですね。
コメント