jasmineを用いたBDD (1) 環境準備

JavaScriptのBDD(Behavior Driven Development)をやってみる。 jasmineを用いてBDD。とりあえず、今回は環境作り。

jasmineのStand Alone版をダウンロード。

ダウンロードページ→ GitHub : pivotal / jasmine(現時点最新「v1.2.0」を取得しました。)
ちなみにWebページはこちら→Jasmine(英語 ToT)
ダウンロードしたzipを展開。
展開したら次のような構成になっている…ハズ。
```
+ lib
  + jasmine-1.2.0
    - jasmine.css         <- スタイルシート
    - jasmine.js          <- 本体
    - jasmine-html.js     <- HTML描画エンジン
    - MIT.LICENSE
+ spec
  - PlayerSpec.js         <- Specファイル(テストコード)
  - SpecHelper.js
+ src
  - Player.js             <- テスト対象(ソースコード)
  - Song.js
- SpecRunner.html         <- テスト実行HTML
```
使うファイルは次のもの(上でオレンジ色のもの)
- 「libフォルダ以下のコアファイル」
- 「SpecRunner.html」
その他は、これからプログラマが作る部分。

ちなみに、テストの実行はQUnitと同じく「SpecRunner.html」を開くのみ。 HTMLを開くと自動的にテストが実行されて結果が画面に表示される。こんな感じ↓

"SpecRunner.html"を少し編集(必要であれば…)

"SpecRunner.html"を開くと何やら処理するコードが見あたります…が、個人的な感想は、「このコードをここに書かなくてもよくね？？」と、思うので、このコードをコピペして外出しします (外出しjsファイルは念のためUTF-8で保存がオススメ。最近のハヤリ？ですかね。 HTML5へ右ならえです。)。その他、そもそもないファイルへのリンクとか消して整理し、コメントも修正してしまいます。その結果のHTML(SpecRunner.html)、jsファイル(jasmine-helper.js)は次のようになります。

"SpecRunner.html"

<!DOCTYPE HTML>
<html>
<head>
  <title>Jasmine Spec Runner</title>
  <link rel="stylesheet" type="text/css" href="lib/jasmine-1.2.0/jasmine.css">
  <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine-html.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine-helper.js"></script>

  <!-- 読み込むソースファイルを記述します... -->
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>

  <!-- 読み込むSpecファイルを記述します... -->
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>

</head>
<body></body>
</html>

"jasmine-helper.js"

(function () {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var htmlReporter = new jasmine.HtmlReporter();

    jasmineEnv.addReporter(htmlReporter);

    jasmineEnv.specFilter = function (spec) {
        return htmlReporter.specFilter(spec);
    };

    var currentWindowOnload = window.onload;

    window.onload = function () {
        if (currentWindowOnload) {
            currentWindowOnload();
        }
        execJasmine();
    };

    function execJasmine() {
        jasmineEnv.execute();
    }

})();

コピペとちょっとした編集で"SpecRunner.html"をQUnitちっくに変化させられてとっても魅力的…(@_@;)

Visual Studioに統合してBDDできる開発環境を作る
今回は Visual Studio での利用をしてみようと思います。(と、大袈裟に言ってもやることはやっぱりコピペなんですが…) 構成としては「ASP.NET MVC & BDD」の環境にします。
1. 「ASP.NET MVC プロジェクト」と「空のプロジェクト」を新規作成
2. (個人的な趣味ですが…)MVC プロジェクトの jquery、Microsoft、modernizrを適当なフォルダ(third_party←closure libraryにならってみた)へ移動
  あわせて_Lyout.cshtmlのjqueryへのリンクも変更
3. とりあえず、ダウンロードしてきたjasmineのStand Aloneを次のように配置
4. "SpecRunner.html"の中でソースコードへの相対パスが違うので修正
```
  
  <script type="text/javascript" src="../../WebApplication/Scripts/Player.js"></script>
  <script type="text/javascript" src="../../WebApplication/Scripts/Song.js"></script>
```
実行&テスト

作業は以上ですが、テストとして"SpecRunner.html"を右クリック→「ブラウザーで表示」してみます。ちゃんと動いていれば環境としては完成。あとはゴリゴリとコードを書いていく…

SpecRunner.htmlが動かない場合(エラーになってしまう場合)、自分の場合はソースコードへの相対パスが間違っていたので、ブラウザのデバッグツール(IEだと開発者ツール←個人的に好み)使って "../"を足したり引いたりしてたwwww

これでよく聞くTDD…ではなく、BDDができるようになる…ハズ！！

→ jasmineを用いたBDD (2) 正常系

最後に… このブログに興味を持っていただけた方は、ぜひ「Facebookページにいいね！」または「Twitter のフォロー」お願いします！！

galife

jasmineを用いたBDD (1) 環境準備

Labels

Archives

Pages

Contact