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

執筆者:

関連記事

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

ディレクトリごとにrubyとjrubyを使い分ける〜ruby-version

By: DANIEL JULIE – CC BY 2.0 前は.rvmrcを使っていたけど、今は.ruby-versionを使うらしい [crayon-599c92098be3b22773 …

Rails3.2+Apache2+Passenger環境でSSLを使ってみる

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql *ローカルでproduction環境を構築してみるという話です.いわゆるオレオレ証明書を …

Rails4で自動テスト環境を整える~cucumber&rspec&guard&spring&factory_girl

By: Tatsuo Yamashita – CC BY 2.0 参考 Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard Ruby2.0.0とRail …

RVMでRubyのバージョンアップ

By: Geri Coady – CC BY 2.0 目次1 RVMのバージョンアップ2 Rubyのバージョンアップ3 2.0.0から2.1.0にバージョンアップ4 gemのバージョンアッ …