2017-10-07 39 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中不支持)