QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト：フレームワークで実践！ JavaScriptテスト入門（3）（3/3 ページ）

» 2012年11月29日 18時00分公開

[朝香貴寛，TIS　コーポレート本部戦略技術センター]

QUnitのコールバックを使うには

　ここまででヘッドレスなテスト実行ができるようになりましたが、先ほどの実行結果を見ても分かるように、どちらのテストランナーにおいても『何のテストがどこでpass/failしたか』が、いまいち分かりづらいです。そこで、前回と同じく今回もテストランナーを修正し、failしたテストとスタックトレースを表示するようにする方法を紹介したいと思います。

　上の方でもQUnitの主な特徴として外部ツールとの連携の容易性を挙げましたが、その理由として「QUnitには、テスト結果をAPIで取得するためのCallbackが用意されている」ことが挙げられます。これらのCallbackはQUnit側で提供されているPhantomJSのテストランナーの中でも利用されています。

　PhantomJSで提供されているテストランナーはQtWebKitでレンダリングされたテスト結果をJavaScriptで取得し、console.logで表示しているだけなので、細かい情報を取得するように変更するのは少し面倒ですが、QUnitで提供されているテストランナーはCallbackを利用してテストを取得するようになっているので、簡単に出力フォーマットを変更できます。

　今回はテストランナーのaddLogging関数を以下のように修正し、Webブラウザで出力される情報と同じような情報を出力するようにしてみました。

function addLogging() {
    window.document.addEventListener( "DOMContentLoaded", function() {
        var testCount = 0;
        var testModuleCount = 1;
        var current_test_assertions = [];
  
        QUnit.testDone(function(result) {
          testCount = 0;
          var moduleName = 'None';
          var testName = 'None';
          var i;
          if(result.module) moduleName = result.module;
          if(result.name != '') testName = result.name;
  
          console.log('\n' + testModuleCount + '. Test Module: "' + moduleName + '", Test Name: "' + testName + '"');
  
          for (i = 0; i < current_test_assertions.length; i++) {
              console.log(current_test_assertions[i]);
          }
  
          current_test_assertions = [];
              testModuleCount ++;
      });
  
    QUnit.log(function(details) {
      testCount ++;
      var response;
  
      response = '"' + details.message + '"' || '';
  
      if (details.result) {
        current_test_assertions.push('    ' + testCount + ') Passed: ' + response);
        return;
      }
  
      if (typeof details.expected !== 'undefined') {
        if (response) {
          response += ', ';
        }
  
        response += 'expected: ' + details.expected + ', but was: ' + details.actual;
      }
      response += '\x1b[36m \n    ';
      response += details.source.replace(/\n/g, '\n    ');
      current_test_assertions.push('\x1b[31m\n    ' + testCount + ') Failed assertion: ' + response + "\x1b[39m");
    });
  
    QUnit.done(function(result){
      console.log('\nTook ' + result.runtime +  'ms to run ' + result.total + ' tests. ' + result.passed + ' passed, ' + result.failed + ' failed.');
      window.qunitDone = result;
    });
  }, false );
}

　このテストランナーで実行すると、以下のような結果が出力されます。