こんにちは。
\n最近、Backbone.jsというライブラリを使って、制作をしています。
Backboneいいですね〜。
\n各UIパーツの結合度が下がるので、
\n全体の見通しが良くなり、メンテもしやすくなります。
今作っているものはそこまで規模が大きいものではないのですが、
\n大規模js開発入門ということで。
それに加えて、先日JavaScript道場に行ってきてから、
\njsの開発でもテストコードを書くようにしています。
師範に習ったとおり、
\nmocha + expectjs + _sinonjs_を用いてユニットテストを書いているのですが、
\nそのテストを書いている時に、sinonjsのspyで詰まったのでメモ。
そもそも、sinonjsとは何か。
\nそしてその中のspyという機能は何なのかをざっと。
sinonjsとは、テストダブルのライブラリのことです。
\n\n\nテストダブル (Test Double) とは、ソフトウェアテストにおいて、テスト対象が依存しているコンポーネントを置き換える代用品のこと。ダブルは代役、影武者を意味する。 – テストタブル – wikipedia
\n
\nフロントエンドJavaScriptにおける設計とテスト
すごくざっくり言うと、テスト用の便利なライブラリです。
\nそして、そんなsinonjsのspyという機能は、 その名の通りスパイをしてくれます。
\n何のスパイをするかというと、任意の関数に忍び込ませて、
\nなどなどを調べることが出来るのが、spyです。
\nざっくりした使い方を書くと、
\nit('sinon.spyのテスト', function() {\n var hoge, spy;\n hoge = {\n foo: function() {\n return true;\n }\n };\n spy = sinon.spy(hoge, 'foo');\n hoge.foo();\n return expect(spy.calledOnce).to.be.ok();\n});という感じに書けます。
\nspy = sinon.spy( object, 'proterty' );というふうに書くと、object.propertyを監視出来ます。 この感じで、Backboneのon系のコールバックも見えるんじゃないかと思ったら、詰まりました。
\n動かなかったコードを簡略化したものがこちらです。
\n少し長いのでCoffeeScriptで書きます。
\ndescribe 'Backbone * sinon.spy', -> \n\tModel = Backbone.Model.extend\n\t\tdefaults:\n\t\t\tname: 'hoge'\n\tView = Backbone.View.extend\n\t\tinitialize: -> \n\t\t\t_.bindAll @, 'render'\n\t\t\t@model.on 'change:name', @render\n\t\trender: -> \n\t\t\t@$el.html @model.get('name')\n\tbefore -> \n\t\t@view = new View(model: new Model())\n\t\t@spy = sinon.spy(@view, 'render')\n\tafter -> \n\t\t@spy.restore()\n\tit 'Modelモデルが変更された時View.renderが呼ばれる', -> \n\t\t@view.model.set('name', 'leko') expect(@spy.calledOnce).to.be.ok()実行してみると、通りません。。
\nBackboneを理解されてる方なら
\n「初心者乙」
\nで終わってしまうのかもしれませんが、Backbone初心者だから仕方ない。
先ほどの例のように、
\nspy = sinon.spy(view, 'render')と指定したので、
\nview.renderが呼ばれたらspy.calledOnceはtrueになるはず。
\nconsole.logなどを挟んで関数が呼ばれているか試したところ、呼ばれていました。 しかし、spy上では呼ばれたことになっていません。ここで詰まりました。
なるべく英語は読みたくない（読めない）ので、 日本語の記事が無いか探してみたんですが、無さそうでした。
\n英語記事を漁っていると、StackOverFlowに
\n似た悩みを抱えた質問と解答が寄せられていました。
\n\njavascript – Backbone.js view tests using Sinon Spies in a browser – Stack Overflow
\n
結論を先に書くと、先ほどのコード、惜しい感じでした。
\n間違っていたのは、spyの設定の仕方でした。
\n# 間違い\nbefore ->\n\t@view = new View( model: new Model() )\n\t@spy = sinon.spy( @view, 'render' )\n# 合ってる\nbefore ->\n\t@spy = sinon.spy( View.prototype, 'render' )\n\t@view = new View( model: new Model() )実行してみると、通ります。
\nこのように、インスタンス化したオブジェクトにspyを忍び込ませるのではなく、
\nコンストラクタ関数のprototypeにspyを設定して、
\nその後にインスタンスを生成するとうまく動くようです。