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

執筆者:

関連記事

Chef soloでberkshelfで依存関係をインストールしてnodebrewをインストールする

By: Rachel Kramer Bussel – CC BY 2.0 berkshelf.com/ Berkshelfはbundlerっぽいcookbooksを管理するgem 目次1 …

WindowsでCUIからGit,Virtualbox,Java,Rubyなど1700種類のソフトを一発でインストールできるパッケージマネージャ~Chocolatey NuGet

By: Anne-Lise Heinrichs – CC BY 2.0 chocolatey.org/ 目次1 インストール2 パッケージの確認・検索3 パッケージのインストール4 パッケ …

no image

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-5c …

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …

no image

Ruby2.0.0とRails4をためしてみた

本当なら、われわれ素人は枯れ尽くしてから手を出したほうがいいんですが、WEB+DB PRESS Vol.73の記事を読んでたら試したくなったのでOSX Lionで試してみた 気になったのは、「体感速度 …