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

執筆者:

関連記事

Ubuntu12.04.1のbashカスタマイズメモ

  目次1 プロンプトのカスタマイズ2 cdのカスタマイズ3  過去のコマンドの一部を引用する プロンプトのカスタマイズ ubuntuのデフォルトの.bashrcの42行目あたりからをコメン …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

no image

Git用サーバのgitoliteにユーザー追加

環境 Git用サーバのgitoliteをインストール クライアントでssh用の鍵を作成

 ssh用のpub鍵を管理者に送信 sftpで …

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …

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

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