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
-,

執筆者:

関連記事

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

ゾンビView問題~Backbone-supportでSwapping RouterとCompositeViewを使う

By: Charlie – CC BY 2.0 目次1 ゾンビView問題2 使う準備は簡単3 Composite View4 Swapping Router5 いろいろ6 Backbon …

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

Backbone.jsからRails3.2へのPUTに対して204(no content)が返ってくる問題

By: Bernardo Chang – CC BY 2.0   UPDATEするときRailsはデフォルトでJSONには何も返さないのがデフォルトぽい [crayon-58b5 …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …