rails rspec和capybara测试搜索框输入

时间:2017-10-07 00:41:13

标签: ruby-on-rails rspec capybara

我试图弄清楚如何测试搜索框。在rspec \ capybara中我创建了2个作业,访问搜索框所在的页面,输入搜索词,然后单击搜索按钮。我希望只看到一份工作,但这两份工作都要归还。我猜测测试忽略了搜索输入。

功能规范

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

1 个答案:

答案 0 :(得分:0)

您的HTML无效,您不能拥有父元素在子元素内部关闭的结构,例如Sally。  这意味着浏览器中的文档结构未定义,不同的浏览器会以不同的方式处理文档。即使表单当前正在您使用的浏览器中工作,您可能会发现它在其他浏览器中不起作用。您可以通过在浏览器中检查页面来检查这一点,并查看是否在表单元素的内部或外部考虑了提交按钮。由于这个和Sally TestObject; 驱动程序,你正在使用Capybara,对于无效的HTML非常宽容,提交按钮位于<div><form></div><div></form></div>元素自动关闭的位置(处理无效结构)因此,实际上并没有与您认为的形式相关联。这会导致单击不提交表单的按钮。您需要通过移动rack_test&gt;来修复HTML。标记在文档树上方的标记,以便它们包装表单中包含的所有内容,或者使用submit元素上的form属性将其与正确的表单相关联(IE中不支持)