yaakaito.org

Mocha + Testem + HTMLCov 出来るようにする

JavaScript, Mocha, Testem, Testing

こんにちは！うきょーです！だるくなくJavaScript開発できる環境を探しています。

というわけでタイトル通りなんですが、Mocha + Testem + HTML-Cov環境を試してみようと思うので、それの作り方です。 想定している使い方としては、普段はTestemを使ってChrome、Firefox、Safariあたりでテストを回しつつ、たまにカバレッジを確認して〜くらいの割と普通な感じです。 CIは今回はやりません。本当は同じランナーでやりたかったんですが、めんどいので分けました。 もっといいやり方知ってる人いたら教えてください！

作られたリポジトリはgithubにあります。

必要な物の準備

せっかくなので？ node 0.10.1 を使います。

1

$ nvm install 0.10.1

必要なモジュールをいれます。

  • testem
  • mocha
  • jscoverage
  • json2htmlcov
  • mocha-phantomjs
    • phantomjs
1

$ brew install phantomjs
1

$ npm install -g testem mocha mocha-phantomjs jscoverage json2htmlcov

メンドーだったので僕はMakefile使ってますが、gruntとかがいいですって人はそれもいれるといいと思います。

chaiとsinonをとってくる

chaiとsinonを使いたいので、とってきます。sinon-chaiは別にいらないかなーと思ってる子なので入れてません。 /test/vendor みたいなところに配置しておきます。

1
2

$ curl -O http://chaijs.com/chai.js
$ curl -O http://sinonjs.org/releases/sinon-1.6.0.js

適当にテスト用のjs書く

サンプル用に適当に

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// /src/sample.js
var A = (function(){
  function A() {

  }
  A.prototype.method = function(v) {
    if (v) {
      return "YES";
    }
    else {
      return "NO";
    }
  }
  return A;
})();

テストはこんな感じ、NOの方は通らないようにしてあります。

1
2
3
4
5
6
7
8
9
10
11

// /test/tests/sample-tests.js
describe('Sample', function(){
  var a;
  beforeEach(function(){
    a = new A();
  });

  it('YES', function(){
    chai.expect(a.method(true)).to.equals('YES');
  })
});

testem.jsonを書く

chaiやsinonを一緒に混ぜるようにして、testem.jsonを作ります。

1
2
3
4
5
6
7
8
9

{
  "framework" : "mocha",
  "src_files" : [
    "src/**/*.js",
    "test/vendor/chai.js",
    "test/vendor/sinon.js",
    "test/tests/**/*-tests.js"
  ]
}

これでtestem側は終わりです。走らせてみましょう。

1

$ testem

テストしたいブラウザで http://localhost:7357 を開きます。あとは開きっぱでよいです。

テストしてくれます、便利ですね。

HTMLCovでカバレッジを出す

こういう感じにカバレッジを出す事ができます。

適当にいろいろなブラウザでテストした結果をマージできると理想だけど、面倒そうなのでphantomjsで・・・ 、というかサポートされていないのかな。 こういうのもあったけど今回はスルーで。

手順としては

  • jscoverage で対象のjsを変換
  • mocha-phantomjs で実行して jsoncov の形で吐き出す
  • json2htmlcov を通して HTMLCov へ変換

と、ちょっと面倒くさい。

ランナーを用意する

mocha のランナーを用意します。

1

$ mocha init [dir]

吐き出されたのを適当に coverage-runner.html みたいなのにリネームして、必要なファイルを読み込むようにする。

1
2
3
4
5
6

<script src="../cover/sample.js"></script>
<script src="./vendor/mocha.js"></script>
<script src="./vendor/chai.js"></script>
<script src="./vendor/sinon.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./tests/sample-tests.js"></script>

僕はカバレッジに使うjsをcoverというディレクトリに吐き出すようにしたので、こんな感じで。

mocha-phantomjs を使えるようにブートを置き換えます。

1
2
3
4
5
6
7
8

<script>
  if (window.mochaPhantomJS) {
    mochaPhantomJS.run()
  }
  else {
    mocha.run();
  }
</script>

カバレッジを出すコマンド

さっきの手順に従ったコマンドで実行します。

1
2

$ jscoverage src/sample.js ./cover/
$ mocha-phantomjs -R json-cov test/cover-runner.html | json2htmlcov > cover.html

こんな感じで cover.html が作られるので、あとはそれをopenすればよいです。

ちょっと面倒ですが、簡単な部類でしたね。

ちなみに

僕は Buster.JS 派です。