JasmineによるJavaScriptのテスト その2
前回のJasmineによるJavaScriptのテスト その1に引き続き、今回もJasmineのチュートリアルになります。今回は、JavaScriptの組み込みクラスであるArray
を対象に、簡単なテストの作成と実行を行います。
基本的なテストの書き方
前回、Jasmineのインストール方法として
- JavaScript単独のプロジェクトで使用する場合(
jasmine-standalone-X.X.X.zip
を展開) - Rubyプロジェクトとともに使用する場合(
gem install jasmine
を実行)
の2通りの方法を紹介しましたが、テストの書き方は基本的にいずれの場合も同じで実行方法が異なっています。このチュートリアルでは、より汎用的な「JavaScript単独のプロジェクトで使用する場合」を例に説明していきます(Rubyプロジェクトとともに使用する場合については機会を改めて解説する予定です)。
最初のテスト
最初のサンプルとして、JavaScriptの組み込みクラスArray
のテストを以下に示します。
上記のように、テストは、
describe
メソッドにクラス等のテスト対象を記述し...describe
メソッド内に入れ子になったit
メソッドにテスト対象の振る舞いを記述し...it
メソッド内に入れ子になったexpect
メソッドの引数にテスト対象を記述し...toXXXXX
メソッドの引数に期待値を記述する
という構造をしています。
ちなみに、上記のサンプルは、
- テスト対象となる配列
arr
を作成し... arr.length
が3
であることを確認する
という内容です(expect
メソッドの書き方については次回解説します)。
では実際に上記サンプルの動作を確認してみましょう。
テストを実行するには、まず上記のテストコードをプロジェクトディレクトリのspec/ArraySpec.js
として保存します。
次に、保存したArraySpec.js
を実行するため、プロジェクトディレクトリ直下のSpecRunner.html
を以下のような内容にします。
あとはSpecRunner.html
をブラウザで開くだけです。
ん、文字化けしてますね。デフォルトのSpecRunner.html
のままでは、日本語を使用した場合にブラウザによっては文字化けすることがあります。
Web開発をされている方ならもちろんお分かりだと思いますが、これはJasmineの問題ではなく、よくあるHTMLの文字化けです。SpecRunner.html
のHEAD要素内に以下の1行を記述すれば文字化けは直ります(ファイルの文字コードエンコーディングがUTF-8の場合)。
ブラウザをリロードすると、以下のようにテストの実行結果が正しく表示されます。
このテスト結果をよく見ると、
「Array
クラスはlength
プロパティで配列長を取得する事ができる」という仕様が成功(グリーン)
と読めるのではないでしょうか?
このことからも、Jasmineのテストは「自然言語で記述された要求仕様書のように見える」というビヘイビア駆動開発(BDD)の特徴を持っていることがわかるかと思います。
次回は、xUnit系のテスティングフレームワークとの対比を中心に説明していきます。