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でUbuntu Server12.04にPostgreSQL9.3をインストール

By: Bruno Cordioli – CC BY 2.0   github.com/phlipper/chef-postgresql 目次1 aptをインストール2  che …

RSpecとCapybaraのテストの例

環境 KEN_ALL.CSVを使ってRailsで郵便番号を検索するサイトを作る1 KEN_ALL.CSVを使ってRailsで郵便番号を検索するサイトを作る2 Rails3.2.8とRSpecとCapy …

Rails4でJavaScriptのヘッドレステスト環境〜cucumber&poltergeist

By: Jupiter Firelyte – CC BY 2.0 環境 OSX Lion 参照 Ubuntu Server12.04でPhantomjsを使ってヘッドレステスト環境をつくる …

Chef のtemplateでRails newのときデータベースをPostgreSQLに指定してgit initする〜railsrc

By: boring_vanner – CC BY 2.0 rails newをカスタマイズしてテスト環境とgit initを自動で準備する Chefのtemplateをつかって.rail …

no image

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

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