RailsでTwitterBootstrap RubyOnRailsの開発環境

Rails3.2でTwitter Bootstrap2対応のkaminariテーマを自作する〜というよりcucumber

投稿日:

環境 Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminariの続き

すでにテーマがあるので適当に作っていたら、ページネーションをクリックしても昇順・降順の並び替えが発生してしまう、というバグが出てしまったのでテーマからやり直す

やること

  • デフォルトテーマの構造はnav>span。これをブートストラップの構造div.pagination>li>aに直す
  • _page.htmlはlink_to_unlessを使っているが、このままだと現在ページにaタグがつかずにブートストラップのcssが適用されないので、現在ページにもダミーのaタグをつけて、liに.activeクラスをつける
  • デザイン的には「First」「Prev」は表示しないではなく.disableクラスをつけたほうがいいと思う

*実際には.activeクラスや.disabledクラスをつけてもtwitter bootstrapではcssが変更されてクリックできなそうなcssが適用されるだけで実際にはクリック可能なのでjqueryでクリック不可能にした

バグ対応

といっても、バグ対応はとりあえずsession[:page]を記憶することにして対応した

また、activeクラス、disabledクラス、gap(…の部分)はクリックしても反応しないようにunclickableクラスもくわえることにしてcoffee scriptを書いた

 

テストを書く

cucumberで順番にテストを書いていく

ブートストラップの構造div.pagination>li>aに直す

これを正確に書くと、データが25件以上でページネーションが表示される設定なので、

現在ページにもダミーのaタグをつけて、liに.activeクラスをつける

.disableクラス

バグ確認

フィーチャ

で、できたフィーチャがだいたいこんな感じ

ステップ

試行錯誤のあとがあるけど不足はないはず

まとめ

ポイントは次の通り

  • データが多いからcsvから読み出すようにした データはスクリプトで連番+固定文字列(abcdefとか)+乱数を100個くらい作った
  • selector,find,scopeと対象を絞り込む便利な機能があって、find(A).find(B).clickとか繋げることもできるんだけど、find(A)のA要素が2つ以上あると、そこでエラーになっちゃう。find(A,text: B)とか一発で絞りこまないといけない。
  • 2ページ目はデータを拾ってくるのが面倒なんでidを26番目から50番目まで並べた 厳密にはこのテストでは完璧じゃない 数がおおければまぎれも少ないだろうって程度のもの
  • 当然効率悪い正規表現なので遅い テーブルの各行のn番目をとれば列一致のステップが作れるかな
  • 最後のシナリオはjQueryでやってるからcapybaraだとうまくいかなかった。seleniumとかじゃないと Railscastsにselenium ideの使い方もあったけどすでに古いんだよな・・・
  • @wipはタグで、実行オプションに–tags ~@wipとかつけとくと@wipを飛ばしてくれる
  • 表示される全要素にテストを作ったほうがいいんだろうな 振る舞い駆動だし 今回は勉強なのでパスと
  • 日本語を書くのが面倒になってくる、単語を選んでステップにあった文章を吐き出してくれるジェネレータが欲しいところ
  • ついでにRedmineとも連携できればなおよい 例えば、Redmine上で特定語を選んでフィーチャをジェネレートすると、定期的にテストレポートがみられるみたいな jenkinsか jenkinsなのか
  • フィーチャの「かつ」って論理積じゃないような、「そして」くらいの意味じゃないかな・・・

-RailsでTwitterBootstrap, RubyOnRailsの開発環境
-, ,

執筆者:

関連記事

Redmineプラグイン開発にCoffeeScriptとSASSを使う〜guard-sprockets&guard-sass

By: waferboard – CC BY 2.0 目次1 考え方2 guardの設定3 Guardfileをつくる4 できた、ただし 考え方 Redmineではsprocketを使って …

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

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

Redmineのモデル図を作成〜RailRoady&graphviz

By: katsrcool (Kool Cats Photography) 1,000,000 + View – CC BY 2.0 目次1 graphvizのインストール2 railro …

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

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

FirefoxでJSONをみやすく整形〜JSONView

addons.mozilla.org/ja/firefox/addon/jsonview/ Firefoxのデフォルトではこんな表示だけど・・・ JSONViewアドオンをいれればこんなに見やすくなる …