Rails3+RSpecでのテストを勉強してみる (3) - capybara-webkitを使ってみる -

capybara-webkitを使ってJavaScriptの機能をテスト出来る模様なので色々調べつつやってみた

app/views/sample/index.html.erb

<%= link_to_function "click", "$(this).html("test")" %>

<div id="container">
  <%= link_to_function "click", "$(this).html("test")" %>
</div>

なぜ同じのを2つつけてるのかっていうのは後ほど

capybara-webkitのセットアップ

事前にQtを入れておく。Ubuntuの場合はlibqt4-devとlibqtwebkit-dev、以外の環境は https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit を参照

んでspec/spec_helper.rbに

require "capybara/rails"
require "capybara/rspec"

Capybara.javascript_driver = :webkit

な感じで設定しておく、又、Gemfileにcapybara-webkitとか指定しておく
。後はRSpecなテストを書くだけなのだけど、Capybaraによるとspec/requests、又はspec/integrationに置く模様

spec/integration/sample_javascript_spec.rb

require "spec_helper"

describe "JavaScript test", :js => true do
  it "requests GET /sample enable javascript" do
    visit "/sample"

    within("#container") do
      click_link "click"

      find("a").text.should == "test"
    end
  end
end

で上記で同じ内容のリンクを2つつけた場合にある特定の要素内に含まれる特定のリンクなどに特定したい場合にはwithin等で特定出来る模様。この場合に出力するとpage.body

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <link href="/assets/application.css" media="all" rel="stylesheet" type="text/css">
    <script src="/assets/application.js" type="text/javascript"></script>
  </head>
  <body>
    <a href="#" onclick="$(this).html("test"); return false;">click</a>

    <div id="container">
      <a href="#" onclick="$(this).html("test"); return false;">test</a>
    </div>
  </body>
</html>

というようになっている模様。んまぁてな感じでJavaScriptを含む機能のテスト等もさくっと行えるみたいっすね。ちなみにチートシートっぽいのもある模様 https://gist.github.com/428105