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

0 件のコメント

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

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

    ダウンロードページ→ GitHub : pivotal / jasmine(現時点最新「v1.2.0」を取得しました。)
    ちなみにWebページはこちら→Jasmine(英語 ToT)

  2. ダウンロードした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を開くと自動的にテストが実行されて結果が画面に表示される。 こんな感じ↓

  3. "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ちっくに変化させられて とっても魅力的…(@_@;)

  4. 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"の中でソースコードへの相対パスが違うので修正
        <!-- include source files here... -->
        <script type="text/javascript" src="../../WebApplication/Scripts/Player.js"></script>
        <script type="text/javascript" src="../../WebApplication/Scripts/Song.js"></script>
      
  5. 実行&テスト

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

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

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

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