Skip to content
uupaa edited this page Oct 24, 2015 · 8 revisions

WebModule にはテストランナーが付属しており、Browser, WebWorkers, Node.js, NW.js, Electron, iPhone Simurator, Travic CI といった様々な環境で動作します。
ユニットテスト用のコードは test/testcase.js に記述します。

コード( lib/MyExample.js )を修正したら、品質の確認とテストを行います。

npm start で簡易httpサーバを起動し、その後に npm t とタイプすることでビルドとテストが行われます。 テスト対象は lib/MyExample.jsrelease/MyExample.*.min.js です。

ブラウザ用のテストページは http://localhost:8000/MyExample.js/test/browser/index.html にあります。

testcase.js

testcase.js のひな形は以下のようになっています。

var ModuleTestMyExample = (function(global) {

// テストする環境を指定する場合は、 以下のオプションを ture または false にします
var test = new Test("MyExample", {
        disable:    false,  // ユニットテスト全体を無効化します
        browser:    true,   // Browser のテストを有効にします
        worker:     true,   // WebWorkers のテストを有効にします
        node:       true,   // Node.js  のテストを有効にします
        nw:         true,   // nw.js  のテストを有効にします
        el:         true,   // electron (render process) のテストを有効にします
        button:     true,   // 個別テスト用のボタンを HTML に追加します
        both:       true,   // minify 前のコードと minify 後のコードの両方をテストします
        ignoreError:false,  // true を指定するとエラーが発生してもテストを止めません(エラーを無視します)
        callback:   function() { // テスト終了でコールバックします
        },
        errorback:  function(error) { // テスト失敗でコールバックします
        }
    }).add([
        testMyExample_concat,
    ]);

if (IN_BROWSER || IN_NW || IN_EL) {
    test.add([
        // browser and node-webkit test
    ]);
} else if (IN_WORKER) {
    test.add([
        // worker test
    ]);
} else if (IN_NODE) {
    test.add([
        // node.js and io.js test
    ]);
}

// --- test cases ------------------------------------------
function testMyExample_concat(test, pass, miss) {

    var result = {
            0: new MyExample(   ).concat("a") === "a", // true
            1: new MyExample("b").concat("b") === "bb" // true
        };

    if ( /false/.test(JSON.stringify(result, null, 2)) ) {
        test.done(miss());
    } else {
        test.done(pass());
    }
}

return test.run();

})(GLOBAL);

特定の環境用にテストを追加する場合は、以下のようにします。

if (IN_BROWSER) {
    test.add([
        testMyExample_newTest,   <-- 追加
    ]);
}

function testMyExample_newTest(test, pass, miss) {

    if (テスト成功) {
        test.done(pass());
    } else {
        test.done(miss());
    }
}

テストの成功で test.done(pass()) を実行してください。テストの失敗で test.done(miss()) を実行してください。

Async test

同期処理と非同期処理の両方をテストできます。

function testMyExample_async(test, pass, miss) {

    setTimeout(function() {
        test.done(pass());
    }, 1000);
}

テストが行われる順番について

最初に test/node/index.js による Node.js のテストが走り、
次に test/browser/index.htmltest/browser/worker.js を使ったブラウザのテストが始まります。

テストは最初 lib/MyExample.js に対して node → browser → worker の順番で行い、次に release/MyExample.*.min.js に対して行います。
テスト成功でブラウザの画面が緑に、失敗で赤くなります。
また、Closure Compiler による MyExample.*.min.js のコンパイルに失敗している場合も赤くなります。

Closure Compiler に対応するには

Closure Compiler の ADVANCED_OPTIMIZATIONS MODE に対応できていないコードはコンパイルに失敗します。恐らくはリネームが原因です。

たとえば、
function SomeAPI() { return { foo: 123 }; } はエラーになります。
function SomeAPI() { return { "foo": 123 }; } にしてください。

この場合は、恐らく foo がコンパイラにより別の短い名前(ab)にされています。
リネームされたくない名前やプロパティは global.MyExample.hoge = 1; の形ではなく global["MyExample"]["hoge"] = 1; のように保護します。

MyExample.*.min.js を DevTools で開き、Minify されているコードを展開({ }をクリック)し、リネーム状況を確認することができます。