チュートリアル（基本編） » 07.単体テスト

07.単体テスト

Last modified by kashi on 2015/01/28, 19:15

チュートリアル目次

概要
QUnitの導入・テスト実施方法
参照

このページでは、QUnit 1.8.0 を使用しています。
QUnitは https://github.com/jquery/qunit/tags からダウンロードできます。

概要

ロジックで複雑な処理を実装する場合等、JavaScriptでも単体テストを行っておくことが、品質担保に効果的です。
JavaScriptの単体テストツールは、JSUnitやQUnit、JSSpecなど様々なものがあります。
hifiveでは、

非同期処理を含め、一通りのことが実行可能。
簡単で使いやすい。
jQueryでも採用されている。

といった理由でQUnitを採用しています。

QUnitの導入・テスト実施方法

qunit.jsと、qunit.cssをダウンロードします。
テストしたいページに、qunit.jsとqunit.cssを含めます。
2.のHTMLにテストケースを記述します。
3.のHTMLファイルを開くと、テストが開始され結果が表示されます。

基本構文

以下にQUnitを利用する際のサンプルコードを示します。なお、このサンプルコードは
http://docs.jquery.com/QUnit#source を参考としています。

<!doctype html>
<html>
  <head>
      <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
      
      <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
      <script>
                     // モジュールに所属しないテスト
          test("a basic test example", function(){
               ok(true, "this test is fine");
              var value = "hello";
               equal("hello", value, "We expect value to be hello");
           });

           module("Module A"); // モジュール"Module A"の定義

           test("first test within module", function(){ // モジュール"Module A" のテスト
              ok(true, "all pass");
           });

           module("Module B"); // モジュール"Module B"の定義

           test("some other test", function(){ // モジュール"Module B" のテスト
              expect(2); // このテスト関数内部では2つの成功があればOK
              equal(true, false, "failing test"); // ここで失敗する為、成功数が足りずexpect()は失敗
              equal(true, true, "passing test");
           });

           module("Module C");// モジュール"Module C"の定義

           asyncTest("asyncTest", function(){ // モジュール"Module C" のテスト
              // 時間のかかる処理を実行する
              setTimeout(function(){
                  // 時間のかかる処理についてのアサートを行う
                  ok(true, "always fine");
                   start();
               }, 100); // 100ミリ秒後にsetTimeOut()関数の第1引数である関数を実施
          });

           test("asyncTest by normal test", function(){ // モジュール"Module C" のテスト
              stop(1); // test()で非同期のテストを実行する為、stop()関数でセマフォの数を設定する(start()を実行する回数)
              // 時間のかかる処理を実行する
              setTimeout(function(){
                  // 時間のかかる処理についてのアサートを行う
                  ok(true, "always fine");
                   start();
               }, 200); // 200ミリ秒後にsetTimeOut()関数の第1引数である関数を実施

           });
      </script>
  </head>
  <body>
     
     <div id="qunit"></div>
     <div id="qunit-fixture">test markup, will be hidden</div>
  </body>
</html>

非同期通信を行う場合

stop()関数で一時的にテストを停止し、非同期通信の結果が帰った関数の中でstart()関数を実行し、テストを再開します。

test("asyncTest", function(){
    stop(1); // 非同期処理完了後に呼ぶstart()の回数は1回なので、セマフォに1を指定する
   $.getJSON("/someurl", function(result) {// 1秒間待機する間にJSONの結果を取得
       equal(result.value, "someExpectedValue"); //結果を比較する
       start(); // アサーションが実行された後でテストを再開する
   });
});

stop()関数は、パラメータにセマフォの値を取ります。(未指定の場合は1が設定されます)

Timerを設定する場合

asyncTest()関数を使ってテストを実行する例を以下に記述します。

asyncTest("asyncTest", function(){
    setTimeout(function(){
       // 時間のかかる処理についてのアサートを行う
       equal(obj.value, expectValue);
        start();
    },100 /* 100ms待機する */);
});

start();が呼ばれるまで、このテストは終了しません。この間にほかのテストが呼ばれることはありません。
参考：http:d.hatena.ne.jp/Jxck/20100721/1279681676

DOM操作時にAssertする場合

DOMノードの要素を変更する簡単な例について例を示します。

test("domTest", function(){
   var domtest = document.getElementById("dom_test");
    equal(domtest.id, "dom_test");

    domtest.setAttribute("id", "dom_test2");

    notEqual(domtest.id, "dom_test");
    equal(domtest.id, "dom_test2");
});

次のステップ⇒チュートリアル08.ドキュメント記述・生成(JSDoc)

参照

自習室/QUnit API