読者です 読者をやめる 読者になる 読者になる

おもしろwebサービス開発日記

Ruby や Rails を中心に、web技術について書いています

capybara-webkit と font-awesome を仲良くさせる方法

皆さん、font-awesome は使っていますか?font-awesomeは、twitter bootstrap が提供しているアイコンを、フォントとして使えるようにしてくれるライブラリです。フォントなので、拡大しても画質が荒くならないですし、色を変えることも簡単にできます。べんり!

ただ、一つだけ難点があります。font-awesome を使っていると capybara-webkit でのテストがこけるのです。理由は、capybara-webkit(というかcapybara-webkitが依存しているqt) が font-awesome などの外部フォントに対応していないためです。というわけで下記のようにして対処しました。

前提

gem 'font-awesome-sass-rails'を使っています。素の font-awesome を使っている人は別のやり方でないとダメだと思います。

対処法

config/initializers/capybara-webkit.rb を作って下記のように書きました。

if Rails.env.test?
  Rails.application.config.assets.paths.reject! { |path| path.to_s =~ /font-awesome/ }
end

これで、テスト時限定で asset-pipeline のパスから font-awesome 関連のものが削除されました。大抵のひとはこれだけでも大丈夫かもしれません。

ただ、僕の場合は下記のような font-awesome のフォントのみのボタンを使っており、font-awesome がないとボタンを押せずにテストがこけてしまいました。

スクリーンショット 2012-12-24 23.12.14

これを解決するために、ダミーの font-awesome を作ります。

spec/support/assets/stylesheets/font-awesome.css.sass を作り、下記のように書きます。

i:before 
  content: "i"

また、config/environments/test.rb に下記の設定を追加します。

config.assets.paths << Rails.root.join('spec', 'support', 'assets', 'stylesheets').to_s

これで、テスト環境の時だけ font-awesome のアイコンが “i” と表示されるようになりました。テストもちゃんと通ります。やったね!