Backbone.js

Rails3.2でJasmineをつかってBackbone.jsのViewをテストしてみる

投稿日:

 

前回

Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる

Rails3.2でJasmineをつかってBackbone.jsのCollectionをテストしてみる

 

 

Developing Backbone.js Applications

addyosmani.github.com/backbone-fundamentals/#tdd-with-backbone

この本は「Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported」ライセンスのもとに発行されているとのこと

ライセンスの日本語はつぎのとおり

creativecommons.org/licenses/by-nc-sa/3.0/deed.ja

pdfとかepubはここから

github.com/addyosmani/backbone-fundamentals

 

参照

addyosmani.github.com/backbone-fundamentals/#views-2

注意! この記事はネタ元を翻訳したものではなく、ななめ読みでコードを試してみた(無責任で未検証な)感想を書いたものです

 

はじめに

jasmine-jquery

ViewではjQueryを使うので、jQueryの便利なマッチャ―を追加するプラグインを使うのが便利

jasminericeは独自にパッチしたjasmine-jqueryを含んでいるので特に追加する必要はない(はず)

jasmine-jqueryのマッチャ―はここ

fixture

なので、jasmine-jqueryにデフォルトで設定されているloadFixturesも使える

JSONのfixtureもロードできる

Spy

最後に、jasmine-jqueryはjQuery eventへのspyingをサポートしてる

 

準備

beforeEachとafterEach

viewのテストではこんな形でやることが多い

テスト対象クラスの場所を擬似的に作って、そこでテストして、終わったら削除しておくということだろうと思う

テストのためのファイル作成

前と同じようにファイルを作っておいてテストが通ることを確認する

spec/javascripts/views/todos/todoview_spec.js.coffee

 

app/assets/javascripts/views/todos/todoview.js.coffee

 

renderingのテスト

viewのテストは次の2つではじめる

  1. render()メソッドがインスタンス自身を返すかどうか、これはメソッドチェインをするために必要
  2. HTMLがviewに関連付けられたモデルインスタンスのプロパティにもとづいて予期通りに作られているか

ここではModelやCollectionのテストと違ってbeforeEachが活躍する

 

テストは2番目だけ失敗する

renderは定義してなくてもthisを返しているのかも

とにかく2番目のエラーを訂正する

ここはbackbone-on-railsのscaffoldのviewを思い出して

こうしてみるとテストがとおる

せっかく準備したモデルの変数を使ってないよというツッコミはとりあえず次のテンプレートの項目で解決するとして置いておいて

マッチするテストでHTML文をそのままっていうのは現実的じゃないし、実際にはもっと複雑なHTML文が使われるので煩雑になるかも

そこで、テストのセレクトと調査の両方にjQueryを使うのがベターな方法かも

fixtureを使う例

これでテストでも、selection.append(view.render().el) と $(@el).html(コンテンツ)のイディオムを使うことができる

backbone-on-railsのfixtureはhamlも使えるみたい

templateシステムを使ったrenderingのテスト

ecoテンプレートを使ってテストを通るようにする

(ここは本文と全然違うことやってます)

backbone-on-railsのecoテンプレートを使ってテストを通るようにする

app/assets/templates/todos/todo.jst.ecoをつくる

次のテスト

モデルをdone:trueに変えたらdoneクラスをつけたい

これは見本をそのままCoffeeScriptにした

このテストは失敗する

こんなかんじで書けばテストが通った

ecoテンプレートの方で対応したパターン

ecoテンプレートはifに:が必要なんで注意が必要

あれ?上の方がスマートだと思うけど・・・

-Backbone.js
-,

執筆者: