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の開発環境
-,

執筆者:

関連記事

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

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

RailsにTwitter Bootstrapのフォームを設定する~simple_form

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails github.com/plataformatec/simple_form 目次1 Gem …

Rails3.2でユーザー管理機能を追加~Devise

  前回 Rails3.2のアプリにユーザー機能を追加する~Devise サインアップ機能を削除したので、Railsからのユーザー管理機能を追加した 目次1 generate2 routes …

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

no image

Rails3で動画配信を試用~flowplayer

  最近はYoutubeなど動画配信サイトも充実してきていて知人向けのプライベートな配信も可能なようだ しかし、やっぱりYoutubeにアップするのは抵抗があったり、LAN内だけで配信したい …