2017-10-07 42 views
0

我想弄清楚如何测试搜索框。在rspec \ capybara中,我创建了2个工作,访问搜索框所在的页面,输入搜索词,然后单击搜索按钮。我希望只看到1份工作,但是这两份工作都正在退回。我猜测测试忽略了搜索输入。rails rspec和水豚测试搜索框输入

特征规范

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

检查你的test.log,看看搜索参数是否实际上正在提交 –

+0

谢谢Thomas,只是检查了test.log,它显示搜索参数没有被传递,我只看到了对jobs_path的调用,然后正在呈现jobs/index.html.erb。没有搜索,但不知道如何实际去提交该搜索输入 – Scott

+0

不知道 - 你没有足够的表单显示(不显示按钮等)来确定 - 也显示实际通常更好HTML制作而不是erb模板。你也可以尝试'fill_in“搜索,使用:”Windows“ - 定位器应该是一个字符串,而不是一个符号 –

回答

0

你的HTML是无效的,你不能在那里父元素得到子元素内封闭的结构,像<div><form></div><div></form></div>。 这意味着浏览器中的文档结构是未定义的,不同的浏览器会以不同的方式处理文档。即使表单目前在浏览器中正在使用,但您可能会发现它在其他浏览器中不起作用。您可以通过在浏览器中检查您的页面来检查此内容,并查看提交按钮是在表单元素内部还是外部考虑。由于这个和rack_test驱动程序,您正在使用水豚,非常宽松与无效的HTML提交按钮是在form元素被自动关闭(处理无效结构),因此实际上不与表单关联你认为是。这导致点击不提交表单的按钮。您需要修改HTML,方法是将文档树中较高的<form>标签移到文档树上,以便它们包含表单中包含的所有内容,或者使用submit元素上的form属性将其与正确的表单关联(IE中不支持)