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

執筆者:

関連記事

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

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

Backbone.Marionette+NedbでElectron♪

By: Jairo – CC BY 2.0 目次1 はじめに2 環境3 yarnのインストール4 electronのインストール5 開発環境の概要6 webpackでライブラリの同梱7 g …

no image

Backbone.jsでGooleアカウントにOAuth2でログインしてGmailのタスクリストと同期するToDoリストをつくるというチュートリアル

dailyjs.com/2012/11/29/backbone-tutorial-1/ たぶんまだ4割くらいしか理解できてない JavaScriptで、nodeのhttpサーバとgrunt.jsで圧縮 …

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …

Backbone.jsでView自身にdata要素をもたせる

By: See-ming Lee – CC BY 2.0 目次1 外から追加2 最初からView内で設定 外から追加 $.dataはうまくいかないので、attrでやった [crayon-5 …