こんにちは!うきょーです。 前回BusterJSのtestbedの話を書いたのですが、
@yaakaito HTMLを用意するまでもない場合は buster-html-doc とかも良いと思いますがどうでしょう!
という意見をもらったので、こっちのことも書いておこうと思いました。
そもそもbuster-html-docって何
BusterJSはJSTestDriver形式で書かれたテストケースの実行をサポートしているのですが、JSTestDriverにHTML Docという昨日があります。 この部分だけをBusterJS用に切り出したのがbuster-html-docで、前回のようにHTMLを用意するまでもない場合に
1 2 |
|
という風にテスト毎にエレメントを生成することができます。
使い方
buster-html-doc
をnpmからインストールします。
1
|
|
buster.js
でbuster-html-docを読み込むようにします。
1 2 3 4 5 6 7 8 9 |
|
こういう感じにテストを書きます。
1 2 3 4 5 6 |
|
これでテストを実行すると、テスト時に/*:DOC hoge = <p>aaaa</p>*/
の部分が、
1 2 3 4 5 6 7 |
|
という感じに変換されます。 あとはこのエレメントを使ってアサーションするなりできます。
上の例ではthis.hoge
に対してエレメントを生成していますが、
そうではなくbody
とかに突っ込んでほしい場合は、+=
を使って書く事もできます。
1 2 |
|
という感じなのがbuster-html-docプラグインです。
buster-coffee
続いてbuster-coffeeなのですが、名前の通りテスト実行時にCoffeeScriptをコンパイルしてくれるので、コードをCoffeeScriptで書けるよ、というものです。 これ自体は特にめんどくさくなくて、npmでインストールして、
1
|
|
1 2 3 4 5 6 7 8 9 |
|
という風に使えばよいのですが、buster-html-docと少し相性の問題があるみたいで、
1
|
|
こういう感じにして、
1 2 3 4 |
|
こう書いても、
TypeError: Cannot read property ‘innerHTML’ of undefined
となります。
コンパイルされるとHTML Docの部分は
1 2 |
|
こうなるはずなので、一見大丈夫そうに思えるんですが、うまくいきません。 というか自分でコンパイルするとちゃんと動くので、プラグインの実行順か、それぞれの実行タイミングが悪いのかみたいな話だと思います。
ハマりやすいので気をつけましょう。
回避策としてはプラグインのところ見直してプルリクエストが一番早そうなんですが、 僕は他の理由もあって先にcoffeeを別にコンパイルするようにしてしまいました。
おまけ
HTML Doc形式の書式が結構便利で、最近関わっているプロダクトだと
1 2 3 4 5 6 |
|
みたいにして通信部分をモックできるようしてみた、便利。