title: XHR request stubbing for Capybara JavaScript Testing
body: <p>I'm trying to write a <code>request_spec</code> that tests the functionality of a page with a form that does a ajax autocomplete lookup and returns valid results to then activate the submit button.</p>
  
  <p>I'm wondering if anybody has has the same issue and found someway or references to get this test passing. </p>
  
  <h2>Gemfile</h2>
  
  <pre><code>gem 'rake', '0.8.7'
  gem 'rails', '2.3.5'
  group :test do
    gem "capybara", :git =&gt; "git://github.com/jnicklas/capybara.git"
    gem 'rspec', '1.3.1'
    gem 'rspec-core'
    gem 'rspec-rails', '1.3.2'
    gem 'webmock', '1.4.0'
  end
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>    ...
      &lt;fieldset&gt;
        &lt;label&gt;Enter a Destination&lt;/label&gt;
        &lt;%= text_field_tag :reviewable_name, nil, :id =&gt; "destination_autocomplete", :class =&gt; 'textfield'  %&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;h3 class="disabled"&gt;
              &lt;%= submit_tag "Read reviews", :id =&gt; "read_a_destination_review", :name =&gt; "agree", :class =&gt; "read_review", :disabled =&gt; false %&gt;
            &lt;/h3&gt;
          &lt;/li&gt;
          &lt;li class="or"&gt;or&lt;/li&gt;
          &lt;li&gt;
            &lt;h3&gt;
              &lt;%= submit_tag "Write review", :id =&gt; "write_a_destination_review", :name =&gt; "agree", :class =&gt; "write_review", :disabled =&gt; false %&gt;
            &lt;/h3&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/fieldset&gt;
      ...
  </code></pre>
  
  <h2>JavaScript (jQuery 1.4.4)</h2>
  
  <pre><code>  ...
    $("#hotel_autocomplete, #destination_autocomplete").autocomplete({
      source: function(request, response){
        $.getJSON('/ajax/search_reviewable?type=destination&amp;q=' + request.term,
          function(results, status){
            if(status == 'success'){
              //make it regex safe
              var term = request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1");
              term = term.split(' ').join('|');
              for(var i = 0; i &lt; results.length; i++){
                results[i].value = results[i].label;
                results[i].label = results[i].value.replace(new RegExp("("+term+")", "gi"),'&lt;strong&gt;$1&lt;/strong&gt;');
              }
              response(results);
            }
          }
        );
      },
      minLength: 3,
      delay: 500,
      select: function( event, ui ) {...}
    });
    ...
  </code></pre>
  
  <h2>JSON Response</h2>
  
  <p>/ajax/search_reviewable?type=destination&amp;q=florida</p>
  
  <pre><code>[{"label":"Florida","id":124}]
  </code></pre>
  
  <h2>RSpec Test</h2>
  
  <pre><code>    it "should activate submit button", :js =&gt; true do
        stub_request(:get, "/ajax/search_reviewable/type=destination&amp;q=florida").to_return(:body =&gt; %Q{[{"label":"Florida","id":124}]}, :headers =&gt; {"Content-Type" =&gt; "applicaation/json; charset=utf-8", "Accept" =&gt; "*/*"})
        fill_in("destination_autocomplete", :with =&gt; "florida")
        page.execute_script(%Q{$("#destination_autocomplete").trigger("keyup");})
        find(".ui-menu-item a").click
        # should post to '/review/new', :id =&gt; 124
        page.should have_content("Write a Destination Review")
      end
  </code></pre>
  
  <p>The test fails because this spec is unable to stub the XHR request within the JavaScript.</p>
  
  <p>I thank you for your comments responses and help.</p>