QUnit 可変エリアの初期化

qunit-fixtureを指定することで、そのエリア内を初期化することができる。
初期化は1テストケース毎となる。

次の例のようにボタンをクリックするたびに要素を追加していくような処理があるとき、
テストケースではタイミングが「初回」か「継続」かで期待値が異なる。

$(function() {
  $('#ctrl_btn_A').on("click", function() {
    $('#result').append('A');
  });

  $('#ctrl_btn_B').on("click", function() {
    $('#result').append('B');
  });
});

以下のようにすると、テスト実行時に初期化されるため「初回」のテストが可能となる。

  <button id="ctrl_btn_A">A_button</button>
  <button id="ctrl_btn_B">B_button</button>

  <div id="qunit-fixture">
    <div id="result"></div>
  </div>
<!--
  以下のようにqunit-fixtureエリア外にある場合は初期化は行われない
  <div id="result"></div>
-->

また、テストケース毎の初期化のため以下のようにしなければならない。

QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_A" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'A', 'A初回クリックの出力');
});

QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_B" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'B', 'B初回クリックの出力');
});

// 以下は1テストケース内の継続処理となるためBボタンクリック時はABが出力される。
QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_A" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'A', 'A初回クリックの出力');
    $( "#ctrl_btn_B" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'AB', 'B継続クリックの出力');
});