Fork me on GitHub

テストの実行環境について

Buster.JS では大きく分けて、2つの実行環境でテストを実行できます。

  1. Node.js環境
  2. ブラウザ環境

簡単なテストを動かしてみよう ではNode.js環境でのテストを実行しました。

今回はそれぞれで実行する buster.js(設定ファイル) とテストの書き方と、両方で実行できるハイブリッドなテストファイルを見ていきます。

参考

busterjs-kumite/config-patterns at develop · azu/busterjs-kumite · GitHub
cd `git rev-parse --show-toplevel`/config-patterns

/busterjs-kumite/config-patterns/buster.js

var config = module.exports;

config["node tests"] = {
    env : "node",
    tests : [
        "test/node-test.js",
        "test/hybrid-test.js"
    ]
};

config["browser tests"] = {
    env : "browser",
    tests : [
        "test/browser-test.js",
        "test/hybrid-test.js"
    ]
};

Node環境の場合

上記の buster.js(設定ファイル) には、Nodeとブラウザの二種類のテスト設定が書かれています。 Buster.JSでは一つの buster.js(設定ファイル) に複数の設定ファイルを書くことができるようになっています。

課題

詳細はconfigの項に書く

env : "node" と設定されているNode環境向けのテストを見ていきます。

テストを実行するには config-patterns ディレクトリにいる状態で、 buster test-e/--environment オプションをnodeに指定して実行します。

$ cd config-patterns
$ buster-test -e node
type: .
Multi-environment: .
Skipping Multi-environment dependent on dom context, unsupported requirement: DOM

2 test cases, 2 tests, 2 assertions, 0 failures, 0 errors, 0 timeouts

-e/--environment オプションを指定すると、 buster.js(設定ファイル) で envが該当してるコンフィグのテストを実施します。 つまりこの場合は、 -e node と指定したので config[“node tests”] のテストが実行されます。

hybrid-test.js はとりあえず置いておいて、以下のテストファイルが読みこまれて実行されます。

/busterjs-kumite/config-patterns/test/node-test.js

var buster = require("buster");
buster.testCase("type", {
    "isNull is null" : function(){
        assert.isNull(null);
    }
});

テスト自体は 簡単なテストを動かしてみよう と代わり映えしないので、次はブラウザ環境のテストを見ていきます。

ブラウザ環境の場合

Buster.JSでブラウザを使ったテストを行う場合は、Node環境のテストと違って少し準備が必要です。

大まかな手順を書くと以下のようになります。

  1. buster server を立ち上げる
  2. テストしたいブラウザで http://localhost:1111/capture へアクセスする
  3. buster test でテストを実行する
$ buster server
buster-server running on http://localhost:1111
$ open http://localhost:1111/capture # もしくは手動で開く
$ buster test -e browser # configがbrowserしかない場合は-eは指定しなくてもいい

実際に config-patterns ディレクトリのテストを動かしてみましょう。

$ buster server
$ open http://localhost:1111/capture
$ buster test -e browser
Chrome 19.0.1084.56, OS X 10.7 (Lion):
Firefox 13.0.1, OS X 10.7 (Lion):Ï
4 test cases, 6 tests, 8 assertions, 0 failures, 0 errors, 0 timeouts

ブラウザテストを実行すると、それぞれのブラウザで実行したテストの合計が表示されているので、 実際に書かれている テストケースの数 * ブラウザ数 の結果が表示されています。

config[“browser tests”] の中身を見ていきます。

/busterjs-kumite/config-patterns/test/browser-test.js

buster.testCase("DOM", {
    "test exist DOM API" : function(){
        var div = document.createElement("div");
        assert.tagName(div, "div");// div or DIV
        assert.tagName(div, "DIV");// 大文字小文字はどちらもいい
    }
});

Node環境とは違い、最初に手動で var buster = require("buster"); する必要はありません。 また、実際にブラウザで動作するテストのため、DOM APIを使ったテストを実行する事ができます。

Buster.JSではassert.tagNameのようにDOMに関するassertionメソッドも用意されています。

ハイブリッドなテスト

最後にどちらの config でも読み込まれている、 hybrid-test.js について見ていきます。

このテストファイルでは、Node、ブラウザ どちらから読み込んでも動作し、また特定の環境でのみ評価されるようなテストも書かれています。

/busterjs-kumite/config-patterns/test/hybrid-test.js

if (typeof module == "object" && typeof require == "function"){
    var buster = require("buster");// node環境なら読み込む
}

buster.testCase("Multi-environment", {
    "runs in all environments" : function(){
        assert(true);
    },

    "dependent on dom context" : {
        // requiresSupportFor で trueの場合のみ、contextのテストが実行される
        requiresSupportFor : { "DOM" : typeof document !== "undefined" },
        "only runs in browser-like environments" : function(){
            var el = document.createElement("p");
            el.className = "item feed";
            assert.className(el, "item");
        }
    }
});

requiresSupportFor に判定するためのオブジェクトを設定して、その中身がtrueなら そのコンテキスト(この場合は”dependent on dom context”の中)に書かれているテストが実行されます。

つまり、”dependent on dom context” の中に書かれているテストはNodeの場合documentオブジェクトがないため、評価されません。 実際に実行すると

$ buster test -e browser && buster test -e node
Firefox 13.0.1, OS X 10.7 (Lion):
2 test cases, 3 tests, 4 assertions, 0 failures, 0 errors, 0 timeouts
type: .
Multi-environment: .
Skipping Multi-environment dependent on dom context, unsupported requirement: DOM

2 test cases, 2 tests, 2 assertions, 0 failures, 0 errors, 0 timeouts

Nodeの方ではスキップされているため、結果に表示されるテスト数も異なる事が分かります。

このように、Buster.JSでは一つの buster.js(設定ファイル) に複数の設定を書いたり、 一つのテストファイルに複数の実行環境を場合分けして行うのを簡単にできるような仕組みが備わっています。

どの buster.js(設定ファイル) を使うかは buster-test-c/--config オプションで指定できるので、 buster.js(設定ファイル) 自体を分割してやる方法でもいいと思います。

ブラウザ内でも使える機能が異なる事は多いため、 requiresSupportFor で実行されるブラウザのfeature detectをして、 実行されるテストを分けることでテストが複雑化し過ぎないようにする事もできます。