Menu

mochaでテスト書くどー٩(　`ω´　)۶

#mocha

今までのプロジェクトで書く機会があまりなかったのですが、異動してチャンスが！

やってみたかったこと BEST3 に入るテストコード（やれよ
・・・環境変えるって大事だよね！！

mochaでテスト書いてみようっていう流れ（課題）があったので、乗ってみました。

世間はreactだのbabelだのwebworkerだの言っておりますが。私はnodeを勉強しまする。笑
node好きだから嬉しいけどね。
でもいつか流行に乗れるようになりたいなぁ。新規にアサインされるように実力付けよう。。

でもまぁ一歩ずつ！諦めたらそこで試合終了！

mocha導入

Mocha

  $ npm install -g mocha

いつものごとく、このままじゃ入らなかったので sudo を付ける。
普通はsudoなしでインストール出来るのかな・・・私の環境がおかしいのかなぁ。

書いてみる

まずはMochaのページにあるチュートリアルを実行してみる。

  // test.js
  var assert = require("assert")
  describe('Array', function(){
    describe('#indexOf()', function(){
      it('should return -1 when the value is not present', function(){
        assert.equal(-1, [1,2,3].indexOf(5));
        assert.equal(-1, [1,2,3].indexOf(0));
      })
    })
  })

  $ mocha
  Array
      #indexOf()
        ✓ should return -1 when the value is not present

    1 passing (6ms)

無事通った(～’ω’　)～（当たり前

mochaはブラウザで実行するものと、ターミナルで実行するものがあり、
上記のコードはターミナル上で実行するもの。
ブラウザじゃないので、ここでwindowとかdocumentを参照しようとするとエラーになる。

ReferenceError: document is not defined

実現するにはPhantomJS（mocha-phantom?）を入れれば出来るっぽいけど、一旦ブラウザ実行でいいや〜。あとで調べる←

課題

$.escapeHtml() のテストコードを書いてみる。(chikuwa.js)

  describe('escapeHtml', function() {
    it('should return true when the value is escape html', function() {
      var beforeArr = ['<', '>', '&'],
        afterArr = ['&lt;', '&gt;', '&amp;'],
        flg = true;

      for (var i = 0, len = beforeArr.length; i < len; i++) {
        if ($.escapeHtml(beforeArr[i]) !== afterArr[i]) {
          flg = false;
          break;
        }
      }
      assert.ok(flg);
    });
  });

うーん、、やはりテストの書き方が自由すぎて不安。。
抜け漏れのないように書く方法が知りたい。

そしておしゃれにコード書けるようになりたい。笑
いつまでもゴリゴリコード言われてたくないよぅ

参考にするよ

jQueryやunderscoreの実際のテストコードを見てみると良いかも、とアドバイスを貰ったので見てみる。

jquery/jquery test

jashkenas/underscore test

テストって、、、こんなにベタに書くものなん( ꒪⌓꒪)
やっぱり抜け漏れめっちゃ出そうな予感しかしないのだが

アドバイスを頂いたので修正

師匠から。

なるほど。ついクセでfor文の中でごにょごにょするのは悪だと思っていた。

  describe('escapeHtml', function() {
    it('should return true when the value is escape html', function() {
      var beforeArr = ['<', '>', '&'],
        afterArr = ['&lt;', '&gt;', '&amp;'];

      for (var i = 0, len = beforeArr.length; i < len; i++) {
        assert.equal($.escapeHtml(beforeArr[i]), afterArr[i]);
      }
    });
  });

こんな感じかしら。
もしエラーが出ても止めないで情報を吐き出す感じで。

アドバイスあざます！！

左下にコメントするところ（Spot.IM）あるんだけど気付かれてないのかな…
Spot.IMじゃなくてdisqusにした方がよかったかなぁ(;;;꒪⌓꒪)

Please comment!