yaakaito.org

BusterJSでテストに使うHTMLの設定と手動実行

BusterJS, JavaScript, Testing

こんにちは!うきょーです! みなさんJavaScriptのテスト書いてますか?当然書いてますよね???

JSでテスト書く時に、こういうHTMLを使いたいんだけど的なことってあると思います。 BusterJSはデフォルトでいい感じのHTMLを作って使ってくれるので楽にテストをはじめられるんですが、まあ差し替えたいよねーってことで差し替えます。

BusterJSではこれをtestbedと呼んでいて、設定ファイル(だいたいの場合はbuster.js)で設定することができます。 設定の仕方はこんな感じなんだけど、いまんところtestbedってプロパティは設定できないので、resourcesから設定します。

1
2
3
4
5
6
7
8
9
10
var config = module.exports;

config["test"] = {
    sources: ["lib/*.js"],
    tests: ["test/*-test.js"],
    resources : {
      path : "/",
      file : "hoge.html"
  }
};

というわけでこんな感じに設定を追加します。こうするとhoge.htmlを使ってテストを走らせてくれます。 で、テスト用のファイルを読み込まなきゃいけないわけで(sourcesとかtestsに設定してるやつ)、それがどこに埋め込まれるのかなーというと、コードを見てみた感じ、

  1. {{scripts}} という文字列を探して、あったらそこを置き換える
  2. </body> を探して、あったらその直前に置く
  3. </html> を探して、あったらその直前に置く
  4. 何も見つからなかったら、一番最後に連結する

という順番になってた。(resource-middlewareとか読めば分かる) なので、例えばテストの時だけ initialize みたいな関数を、セットアップスクリプト走らせる前に置き換えたいんだけど的なときは、(↓みたいな感じの場合)

1
2
3
4
5
6
7
<script src="hoge.js"></script><!-- この中に initialize って関数があるとする -->
<script>
// この時点までにテストのときだけinitializeを置き換えてほしい ><
initialize({
  hoge : fuga
});
</script>

{{scripts}} を使って、

1
2
3
4
5
6
7
<script src="hoge.js"></script>
{{scripts}}
<script>
initialize({
  hoge : fuga
});
</script>

こういう感じにする。で、bootstrap.jsみたいなのを用意してあげて、

1
2
// bootstrap.js
initialize = function() { } // 何もしないでーーー^ー^

これをsourcesに追加する。

1
2
3
4
5
6
7
8
9
10
var config = module.exports;

config["test"] = {
    sources: ["lib/*.js", "bootstrap.js"],
    tests: ["test/*-test.js"],
    resources : {
      path : "/",
      file : "hoge.html"
  }
};

とすると、実際にテストで使われるファイルは、

1
2
3
4
5
6
7
<script src="hoge.js"></script>
<script src="bootstrap.js"></script><script src="テストとか"></script>
<script>
initialize({ // なにも・・・なかった・・・
  hoge : fuga
});
</script>

こんな感じになる。便利!

で、次にテストの実行開始タイミングをコントロールしたいと思うんだけど、割と簡単んで、この辺にも書いてあるように、

1
2
3
4
5
6
7
8
9
10
11
var config = module.exports;

config["test"] = {
  autoRun: false,
    sources: ["lib/*.js"],
    tests: ["test/*-test.js"],
    resources : {
      path : "/",
      file : "hoge.html"
  }
};

autoRunfalseにして、さっきの例だと、initializeまで呼ばれたら実行してほしい!とかなら、

1
2
3
4
// bootstrap.js
initialize = function() {
  buster.run();
}

みたいな感じ

というわけでテストに使うHTMLも設定できましたし、ガンガンテストできますね!

そういや別にもう一個なんか書こうと思ってたんですが、忘れたので知ってる人いたら教えてください。