ASP.NET MVC 5でJasmineを使う (Visual Studio 2013版)

Javascriptのテストフレームワークに**[Jasmine](https://github.com/jasmine/jasmine)**がある。これをVisual Studio 2013で利用する方法について下記に示す。(とりあえずお試しなので、RSpec感を無視してテストの雰囲気を使むことを優先した。)

なお、Visual Studio 2012でJasminを使いたい場合は「[Visual Studio 2012 と QUnit / Jasmine でおこなう JavaScript 単体テスト - THE TRUTH IS OUT THERE - Site Home - MSDN Blogs](https://blogs.msdn.com/b/chack/archive/2013/01/09/unit-test-for-javascript-using-qunit-jasmine-on-visual-studio-2012.aspx)」が参考になるだろう。

## 導入方法

Jasminを使うためには、Visual Studioに下記の拡張機能の追加が必要だ。

これらの拡張機能をインストールする方法は以下の通りだ。インストール後はVisual Studio再起動を促される。

  1. Visual Studio 2013を起動
  2. メニューバーの「ツール」 をクリック
  3. 「拡張機能と更新プログラム…」をクリック
  4. 検索してインストール

## コーディング方法

下記の動画で雰囲気が掴める。

<iframe width="560" height="315" src="https://www.youtube.com/embed/meJ94rAN7P8" frameborder="0" allowfullscreen></iframe>

空のASP.NET MVCプロジェクトを作るところが肝だ。この動画とは異なるアプローチだが、jasmineの感触がつかめたら、「[Setting up Jasmine for an ASP.NET MVC project](https://www.layerstack.net/blog/posts/setting-up-jasmine-for-an-aspnet-mvc-project)」を参考にプロジェクト構成を検討してみるのも良いだろう。

## jasmine-jquery

jQueryを使って動的にHTMLを生成するjavascriptをテストする場合は、[jasmine-jquery](https://github.com/velesin/jasmine-jquery)の利用がおすすめだ。これを使うと、テスト用に 用意したHTMLを読み込むことができる。

  1. jasmine-jquery.jsを追加
  2. loadFixtures()で読み込ませるHTMLファイルを記述する
  3. HTMLファイルはjasmine-jquery.jsがあるディレクトリを基準にして以下の場所に置く

例:

> spec/javascripts/loadFixtures/hoge.html

私が確認した時はMITランセンスだったが、この点については利用する前に各自で一度確認してほしい。

## 参考資料