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 -->

Answer 1

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)