rails rspecとcapybaraは検索ボックスの入力をテストします

Question

私は検索ボックスをテストする方法を理解しようとしています。 in 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> 

私のコントローラのindexアクション：生成

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ドライバのために、あなたはCapybaraと共に使用しています。無効なHTMLに非常に寛大ではないため、form要素が自動クローズ（無効な構造を処理するため）され、実際にフォームに関連付けられていない場所あなたはそれがそうだと思います。これは、フォームを送信しないボタンをクリックすることにつながります。 <form>タグをドキュメントツリーの上に移動して、フォームに含まれるすべてをラップするか、またはsubmit要素のform属性を使用して正しいフォーム（IEではサポートされていません）に関連付けます。