[Rails5]RspecでJavaScriptが動作しない

結論

フレームワークの初期化をページ移動時に実行する。

visit users_path
page.evaluate_script('$(".modal").modal()')
click_on 'Modal'
expect(page).to have_css '.modal-content'

今回は、MaterializeのModalの初期化。

やりたかったこと

リンクをクリックするとModalが表示され、Modalの中のボタンをクリックするテストを書きたかった。

show.html.erb

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

_modal.html.erb

visit users_path
click_on 'Modal'
expect(page).to have_css '.modal-content'

どうなっていたか

下記のようなエラーが出力される

Failure/Error: expect(page).to have_css '.modal-content'
       expected to find visible css ".modal-content" but there were no matches. Also found "", which matched the selector but not all filters.

なぜ初期化かをあえて書かないといけないのか

しっかり原因調査はしていないのでわからない。

turbolinksが影響しているのではないかと思う。

コメント