rails rspec and capybara testing search box input

Question

I'm trying to figure out how to test a search box. in rspec\capybara I'm creating 2 jobs, visiting the page where the search box is, entering a search term, then clicking the search button. I expect to only see 1 job, however both jobs are being returned. I'm guessing the test is ignoring the search input.

feature spec

it "narrows results for a job using the search box" do
  job1 = Job.create!(job_attributes(title: "Windows admin"))
  job2 = Job.create!(job_attributes(title: "Linux administrator"))

  visit jobs_path

  fill_in :search, with: "Windows"
  click_button 'Search'

  expect(page).to have_text(job1.title)
  expect(page).not_to have_text(job2.title)
end

search form in the view;

  <%= form_tag(filtered_jobs_path, :method => "get", id: "search", layout: :inline) do %>
  <%= text_field_tag :search, params[:search], placeholder: "Search jobs", class: "form-control" %>

          <div class="col-sm-12 col-xs-8">

           <%= submit_tag "Search", :name => nil, :class => "btn btn-primary btn-outline btn-block" %>
            <% end %>  

          </div>

my controller's index action:

def index     

  @jobs = Job.all

  # Search query for job title and description     
  if params[:search].present?
    @jobs = @jobs.by_job_title_and_description(params[:search])
  end
end

HTML Generated:

<div class="jobs_index">

  <!-- search header -->  
  <div class="row bg-color">
    <div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">

   <fieldset class="row">
      <div class="col-xs-12">
          <div class="form-group">
          </div>
      </div>
      <div class="col-md-6 col-md-offset-2 col-sm-5">
          <div class="form-group">
              <div class="input-group">
                  <div class="input-group-addon"><label for="search-field-keyword" class="">
                    <i class="fa fa-search fa-lg" aria-hidden="true"></i></label>
                  </div>

                  <form id="search" layout="inline" action="/jobs" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
                  <input type="text" name="search" id="search" value="ruby" placeholder="Search jobs" class="form-control" />

                  <!-- if a filter is already set submit it again with search query to keep it persisted -->                  





              </div>
          </div>
      </div>

      <div class="col-md-2 col-sm-3">
          <div class="row">
              <div class="col-sm-12 col-xs-8">

               <input type="submit" value="Search" class="btn btn-primary btn-outline btn-block" data-disable-with="Search" />
</form>                
              </div>
          </div>
      </div>

  </fieldset>


    </div><!-- /.col-md-10 -->
  </div><!-- /.row -->

Check you test.log and see if the search parameter is actually being submitted — Thomas Walpole
thanks Thomas, just checked the test.log and it appears the search parameter is not being passed, i only see the call to the jobs_path, and then jobs/index.html.erb being rendered. No search though, not sure how to actually go about submitting that search input — random_user_0891
Not sure - you don't show enough of the form (don't show the button, etc) to determine that - Also it's usually better to show the actual HTML produced rather than erb templates. Also you may want to try fill_in "search", with: "Windows" - the locator is supposed to be a string not a symbol — Thomas Walpole
Just added some more info, html that gets generated and the forms button. i tried using "search" instead of :search but the test.log shows the same results, basically ignoring it and just rendering the view with both jobs. — random_user_0891
Your HTML is completely invalid -- you can't split the form like that. It needs to wrap all the elements inside it, or you need to look at the form attribute if your browser requirements allow it - caniuse.com/#feat=form-attribute — Thomas Walpole

Thomas Walpole Thomas Walpole · Accepted Answer · 2017-10-08T21:51:09

Your HTML is invalid, you can't have a structure where parent elements get closed inside child elements, like <div><form></div><div></form></div>. This means the document structure in your browser is undefined and different browsers will treat the document differently. Even though the form is currently working in the browser you are testing it with, you will probably find it doesn't work in other browsers. You can check this by inspecting your page in a browser and see whether the submit button is being considered inside or outside of the form element. Because of this and the rack_test driver, you are using with Capybara, being very non-lenient with invalid HTML the submit button is outside where the form element gets auto-closed (to handle the invalid structure) and therefore not actually associated with the form you think it is. That leads to clicking the button not submitting the form. You need to fix your HTML by either moving the <form> tags higher up the document tree so they wrap everything included in the form, or by using the form attribute on the submit element to associate it with the correct form (not supported in IE)

rails rspec and capybara testing search box input

1 Answers