Rails RSpec和Capybara測試搜索框輸入

Question

我試圖弄清楚如何測試搜索框。 在rspec \\ capybara中，我正在創建2個作業，請訪問搜索框所在的頁面，輸入搜索詞，然后單擊搜索按鈕。 我希望只看到1個工作，但是兩個工作都將被退回。 我猜測測試忽略了搜索輸入。

功能規格

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

在視圖中搜索表單；

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

我的控制器的索引動作：

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：

<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

您的HTML無效，您無法使用子元素內部封閉父元素的結構，例如<div><form></div><div></form></div> 。 這意味着瀏覽器中的文檔結構是未定義的，並且不同的瀏覽器將以不同的方式對待文檔。 即使您正在測試的瀏覽器當前正在使用該表單，您也可能會發現該表單在其他瀏覽器中不起作用。 您可以通過在瀏覽器中檢查頁面並檢查是否在表單元素內部或外部考慮提交按鈕來進行檢查。 由於這個原因以及您使用的rack_test驅動程序，因此與rack_test一起使用時，由於HTML無效，HTML寬容，提交按鈕位於form元素自動關閉（以處理無效結構）的外部，因此實際上並未與表單關聯你以為是。 這導致單擊按鈕不提交表單。 您需要通過以下方法來修復HTML：將<form >標記移至文檔樹的較高位置，以便它們包裝包含在表單中的所有內容，或者通過使用Submit元素上的form屬性將其與正確的表單相關聯（IE中不支持） ）