Backbone.js Railsで使えるGem RubyOnRailsの開発環境

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

投稿日:

 

 

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

githubで本の校正をソーシャルにやるなんてすごい

 

自分のRails 3.2 + backbone-on-rails + jasminericeの環境で試してみた

インストールとgenerate

 

でサンプルファイルは消しておく

準備

ライブラリをjasmineに認識させるためにapplication.jsの内容をspec.js.coffeeにコピーしておく

さらに、backbone-on-railsの名前空間を使うためにアプリ名のjs.coffeeもrequireしておいた(bbtodoという名前.sprocketでは.js.coffeeなどの拡張子は省略できる)

backbone-on-railsの初期状態だとアラートが出てうっとおしいのでアラートを消しておく

で、spec/javascripts/models/todo_spec.js.coffeeをつくってみる

この1行だけ

これで以前と同じように’todo’が足りないと言われればOK でなければ何かが間違っている

次にapp/assets/javascripts/models/todo.js.coffeeをつくる

下の1行だけ

前回と違って今回はbackbone-on-railsの設定している名前空間(window以下)を使うのでjasmineからも認識できるはず

こんな感じで最初のdescribeとitを書けばテストの成功画面がみられるはず

2013-01-22_00h08_08

TDD

Jasmineというかspec系の基本的な説明は
addyosmani.github.com/backbone-fundamentals/#jasmine
に書いてある

itがテストの最小の基本単位とか、describeでitをグループ化して使う.

describeは通常、クラス単位にするとか.

最初のテスト

最初のテストをやってみると失敗する

クラスはあるけど中身は書いてないので、textというプロパティを取ろうと思っても定義されてない

するとundefinedが返されてしまうから

backboneのモデルではプロパティのデフォルト値を定められるようなので

これでテストはとおる

次のテストはtextプロパティを指定してインスタンスを作成した場合

これは成功する(上のデフォルトで書きすぎた)テストを成功させる最小限を書いていくのがTDDの本当のところ

3つ目のテストはイベント関係のテストにspyを使った便利なやり方

jasmineのspyっていうやつ

これはここではコールバック関数が呼び出されたかどうか(toHaveBeenCalled)をspyが教えてくれる

このテストもそのまま通る

4つ目のテストはspyをvalidationに使うやり方

spyは呼び出されたかどうかだけじゃなくて、最近呼び出された内容(mostRecentCall)とかも持っている

その内容を知りたければ、console.logでerrorCallbackを出してみるといい

backboneのvalidationのやり方は

これをモデルに書けば4つ目のテストも通る

0.9.10からバリデーションが失敗したときのイベントがerrorからinvalidになったっぽい

 

 

この本はTDDのほかにも2つのチュートリアルをもっていて目次を見てみてもいろいろ興味深そう

ぜひ早く日本語化してほしい

-Backbone.js, Railsで使えるGem, RubyOnRailsの開発環境
-,

執筆者:

関連記事

no image

Railsで動画を管理する2 動画のサムネイルを作成する~CarrierWave + Flowplayer

  *とりあえず動いているけど、もっとましな方法があるとおもいます 前提 Railsで動画ファイルを管理する~CarrierWave Flowplayer 参考 Rubyでffmpegのラッ …

no image

RailsでGoogle Mapを使ってみる~Google-Maps-for-Rails

github.com/apneadiving/Google-Maps-for-Rails   前提

こんな感じで perso …

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

no image

Rubyでffmpegのラッパーを使う~streamio-ffmpeg

  github.com/streamio/streamio-ffmpeg rubyでffmpegが扱える高機能ラッパー 導入 [crayon-5bf1d7dd40358682302908/ …