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

執筆者:

関連記事

RubyでTwitter〜twitter & t

By: Pete Simon – CC BY 2.0 目次1 はじめに2 twitter.gemのインストール3 Twitterアプリへの登録4 サンプルから試してみる5 cliでTwit …

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …

Gemfileのgroup :assets ってどういうことなのか

By: Horia Varlan – CC BY 2.0   group :development, :testってことだったんですね〜 How is the :assets g …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Rails4とBootstrapをつかった動的なナビゲーションとパンくずリスト〜acts_as_nested_set

By: anko.gaku_ula – CC BY 2.0 目次1 Railscast2 acts_as_nested_set3 ヘッダーnav4 サイドメニュー5 パンくずリスト6 でき …