Reports

Twitter: @mtknnktm.

QUnitの処理順とかを調べてみた

はじめに

JavaScript単体テストツールの一つとしてQUnitがあります.
最近のお気に入りです.
QUnit - jQuery JavaScript Library

解説・チュートリアルは例えば以下にあるので,よく知らない方はいろいろ参照してみてください.
お手軽かついろいろできます.
【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (1) QUnitとは? | エンタープライズ | マイナビニュース

で,QUnitにはJUnitなどと同じくsetupやteardown機能があります.また,IDが 'main' の要素の中身を自動でリセットしてくれる機能もあります.リセットはQUnit.reset() という関数で自動的に行われます.
それらの処理順や挙動がわからなかったので調べてみました.

処理順について

説明用QUnitサンプルコード

module("Module A",{
  setup:function(){
    【前処理 A】
  },
  teardown:function(){
    【後処理 A】
  }
});
test('A - 1', function() {
  【テスト A-1】
});
test('A - 2', function() {
  【テスト A-2】
});

module("Module B",{
  setup:function(){
    【前処理 B】
  },
  teardown:function(){
    【後処理 B】
  }
});
test('B - 1', function() {
  【テスト B-1】
});
test('B - 2', function() {
  【テスト B-2】
});

処理順

上記のソースコードは以下の順で処理されます.

  1. Module A
    1. setup関数【前処理 A】
    2. test関数【テスト A-1】
    3. teardown関数【後処理 A】
    4. QUnit.reset関数【ID=main である要素のリセット】
    5. setup関数【前処理A】
    6. test関数【テスト A-2】
    7. teardown関数【後処理 B】
    8. QUnit.reset関数【ID=main である要素のリセット】
  2. Module B
    1. setup関数【前処理 A】
    • 以下略.

QUnit.reset() の挙動

ちなみにQUnit.reset()ですが,IDが 'main' である要素の子要素を「初期状態」に戻してくれるようで,例えば,以下のように書いておくと,QUnit.reset()が呼び出されるたびに,p要素まで復元してくれます.
空っぽにするだけだと思っていたので,個人的に意外でした.


<div id='main'>
  <p>初期状態</p>
</div>