JavaScript Railsで使えるGem RubyOnRailsの開発環境

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

投稿日:

 

 

#261 Testing JavaScript with Jasmine (revised)

 

addyosmani.github.com/backbone-fundamentals/#unit-testing

github.com/bradphelan/jasminerice

JasmineはJavascript用のテストフレームワーク PlayFramework 1.2とかでも採用されてた

JasminericeはJasmineをRubyから使えるgemでjasmine-jqueryというjquery用のライブラリを含んでいるらしい

インストール

bundle

generate ファイル

できるファイルはこちら

使い方

spec.js.coffeeにapp/assets/javascriptsのファイルを追加する

 

rails sでサーバを起動しサーバアドレス/jasmineにアクセスする

2013-01-21_20h16_02

fooがみつからないとか言われる

これはJasmineがサンプルのfoo_spec.js.coffeeに書いてあるfoo.js.coffeeを探しにいってるけど見つからないから

そこで、app/assets/javascripts/foo.js.coffeeをつくってみる(いまは空のファイルでOK)

2013-01-21_20h22_30

こんどはbarがないといわれるので、app/assets/javascripts/bar.js.coffeeもつくる

こんどはテストが実行されるけど失敗

テスト駆動開発では、まずテストを通して失敗→テストを成功させる→リファクタリングの手順ですすむ

エラーからテストが実行されたということは一歩進んだって意味

2013-01-21_20h25_19

サンプルでテストをパスしてみる

順番にテストを成功させていく

まず上のエラーから読んでいく

jQueryが定義されていないということなので、spec.js.coffeeの方でライブラリを読み込むことにした

一応、jqueryとjquery_ujsを読み込んでおく

ブラウザをリロードするとエラーメッセージが変わってる

クラスFooが定義されていないということなので定義する

まだメッセージは変わらない。CoffeeScriptのコンパイラがファイルごとにスクリプトを(funcion(){}).callでくくってしまうため、他のファイルから他のファイルの名前を認識できないから。これを破るにはグローバルな空間に名前をつければいい

今度はエラーメッセージが変わる

そこで、メソッドbarを定義する

つぎのメッセージは

falseを返してほしかったのにundefinedだったということなので、barがfalseを返すようにする

やっと1個テストをパスした

2013-01-21_21h09_29

次のエラーメッセージもだいたい同じなので

同じように テストをパスすると

大変気持ちがいい

2013-01-21_21h12_37

あとはgitにコミットしてから、テストグリーンを維持しつつコードを改良していく(リファクタリング)

JasmineのDSLとか詳しい使い方は公式へ

pivotal.github.com/jasmine/

-JavaScript, Railsで使えるGem, RubyOnRailsの開発環境
-

執筆者:

関連記事

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

  jQuery UIのプラグインdynatreeをRailsで使ってみた github.com/glebtv/dynatree-rails wwwendt.de/tech/dynatree …

Rails3でECサイト構築8 都道府県の登録~spree

  都道府県の登録を忘れていた seedを追っていくとわかるのだけど、rake db:load_file[tablename.yml, dir]で登録できる サンプルは、spree_core …

Rubyで1158から10をつくった〜permutation

  By: Alex Popovkin, Bahia, Brazil – CC BY 2.0 CMで話題のやつをやってみた 目次1 スケルトンをつくる2  4つの数字の並び替えの …

rails gに-pオプションがあったので色々試してみた

  By: Shardayyy – CC BY 2.0 -p[–pretend]なんてオプションあったんですね このオプションをつけると色々表示されるけど、実際には何 …

no image

Google SpreadsheetにGoogleカレンダーからイベントの一覧を読み込む〜Google Apps Script

リファレンス developers.google.com/apps-script/ カレンダーのリファレンス developers.google.com/apps-script/reference/c