All Articles

buster.jsを導入&オレオレ継続テスト的な何かをやってみる

TLでFrontrend vol.4行ってきたというエントリが流れてきてていいなー行きたかったなーなんて思いながら、その中でJSのテストツールについてのセッションがあり、あー自分もテストの環境をやらないとなーなんて思いつつ書きました。

Buster.jsを使ってみた

JSのテストツールは色々あるようですね。

  • Jasmine(一番有名かな?)
  • QUnit(jQueryが使ってるらしい)
  • mocha(モカ、と読むらしい)

で、どれ使うのよ?ってなった時に、「うーんできたらマイナーなのが面白いなー」という悪いクセが出まして、ちょこちょこ探してた所、Buster.jsを見つけました。(ただセッションで紹介されてなかっただけでそれほどマイナーでないかもしれないですね)

Buster.js

現在0.6.3が最新版のようです。あと、すでに日本語ドキュメントを作られてる方が…! いやーほんと頭が上がりません。ありがとうございます。

The little book of Buster.JS

とりあえず、ここを参考にインストールから進めてみます。

インストール

これは簡単ですね。グローバルフラグをつけてインストール。

``` npm install -g buster ```

busterコマンドが実行できればOKですね。

テストの設定と実行

続いてテストケースを書いてみるところまで。ファイル構成は以下のようにしました。

``` /var/www/buster_test - buster.js : 設定ファイル + tests - mod.js : テストファイル + src - mod.js : モジュールファイル ```

んで、buster.jsにテストの設定を書きます。

``` var config = module.exports;

config[‘sample’] = { env: ‘node’, tests: [ ‘tests/*.js’ ] };

<p>設定の方法は<a href="http://docs.busterjs.org/en/latest/modules/buster-configuration/" target="_blank">公式ドキュメント</a>を見ていただくとして、node、つまりコマンドラインから、tests/ディレクトリ内のテストリソースを実行するような設定です。
設定によっては、ブラウザからのテストもできます。これは便利ですね!

モジュールファイルはこんな感じ。</p>

module.exports = TestMod;

function TestMod() {}

TestMod.exec = function() { return ‘piyo’; };

<p>テストファイルはこんな感じ。</p>

var buster = require(“buster”); var assert = buster.assertions.assert; var mod = require(‘../src/mod’);

buster.testCase(‘Test’, {

'test case 1': function() {
	assert.same(mod.exec()undefined 'piyo');
}

});

<p>"buster"をrequireして、その中の"buster.assertions.assert"でアサーションができるみたいです。
では、buster.jsの置いているディレクトリで実行。(パラメータで指定することもできます)

<img src="/media/3fc85e49364b46a5c026e867c66131db.png">

おー、テストが走ってassertが1つ成功しました(∩´∀`)∩あとはここにモジュールとテストを追加していけばOKそうですね!</p>

<h3>せっかくなので自動化</h3>
<p>世間では自動化が流行っているみたいなので、オレオレで自動化してみます。gruntのtaskでやろうかなと思いましたが、Ubuntuなので、inotifyで自動化します。あ、なのでMacでは動きませんざんねーん。オレオレ環境なので…。

以下のようなshファイルを作ってbuster.jsと同じ階層に設置。</p>

!/bin/sh

INOTIFY=which inotifywait AWK=which awk LISTEN_DIR=pwd BUSTER=which buster

kill already process

PROC=pgrep -f inotifywait if [ -n ”${PROC}” ]; then echo $PROC | xargs kill fi

INOTIFYemodifymrq{INOTIFY} -e modify -mrq{LISTEN_DIR}/src | while read line; do path=echo $line | ${AWK} '{print $1$3}' if [ ”${path##*.}” = “js” ]; then echo ”pathismodified.executebustertest..."{path} is modified. execute buster test..."{BUSTER} test -e node fi done

<p>inotifywaitとawkを使うので、無い方は別途インストールが必要です。</p>

sudo apt-get install inotify-tools sudo apt-get install awk

<p>inotifyでsrcディレクトリ以下を監視して、変更があった場合にはそのファイルの絶対パスを取得し、拡張子が.jsなら<span syle="color:blue">buster test -e node</span>を実行してテストを走らせる感じです。
実際にやってみると、

<img src="/media/7778b1b267d60e2fea580c4b7b11cb17.png">

うんうん、ちゃんと保存する度にテストが走りますねー。</p>

<h2>まとめとか</h2>
<p>というわけで、テストのはじめの一歩という感じでした。grunt.jsで再帰的なファイル変更の監視ができないようなことが言われてたのでうーんってなってたんですが、オレオレ環境ならこれで十分かもしれないですね。

Macならkqueueとかでやれば行けそうな気もしますがやってません。
nodeのfs.watchも不安定らしいし、ruby使うと他の言語混じっちゃうし…。

Buster.jsはまだ色々と変更があるみたいなことを聞いてますので、継続的に追いかけていこうかなーと思った次第です。

現場からは以上です。
</p>