32177


現在、RSpec+Capybaraでテストコードを書こうとしています。  
やりたいことはナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニューの中にログアウトというコンテンツがあることを確かめることです。  
Viewのコードは下記の通りです。  
テンプレートエンジンはslimを、CSSフレームワークはBootstrap 4を使っています。

[code]

    nav.navbar
      ul.navbar-left
    = link_to 'brand', authenticated_root_path, class: 'navbar-brand'
    ul.navbar-right
      li.nav-item.dropdown
        = link_to '&#9776;'.html_safe, 'http://example.com', class: 'nav-link dropdown-toggle', id: 'navbarDropdownMenuLink', 'data-toggle': 'dropdown', 'aria-haspopup': 'true', 'aria-expanded': 'false'
        .dropdown-menu aria-labelledby='navbarDropdownMenuLink'
          = link_to 'ログアウト', destroy_user_session_path, method: 'delete', class: 'dropdown-item'
    
[/code]

次に現状のテストコードは下記の通りです。

[code]

    feature 'Navigation links for users', :devise do
    
      scenario 'view navigation links' do
        user = FactoryGirl.create(:user)
        signin(user.email, user.password)
        expect(page).to have_content 'brand'
        expect(page).to have_content '☰'
      end
    
    end
    
[/code]

上記のテストコードにドロップダウンのリンクをクリックしていない状態でhave_contentやhave_linkを追加して試してみましたが、htmlとしては存在するためか、テストがパスしてしまいました。  
ドロップダウンのリンクをクリックした状態でのみ、ログアウトのリンクが表示されることを確認するにはどうすればいいでしょうか？

**2017/1/27 追記**

PhantomJS、Poltergeistを使用して上記の問題は解決できたのですが、これまで通っていた下記ヘルパメソッドでCapybara::Poltergeist::MouseEventFailedが発生するようになってしまいました。

[code]

    def signin(email, password)
      visit new_user_session_path
      fill_in 'Email', with: email
      fill_in 'Password', with: password
      click_button 'Sign in' # ここで例外発生
    end
    
[/code]

エラーメッセージは下記の通りです。

[code]

    Capybara::Poltergeist::MouseEventFailed: Firing a click at co-ordinates [411.5, 321] failed. Poltergeist detected another element with CSS selector 'html body main div.authform form#new_user.new_user' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').
    
[/code]

バージョンはPhantomJSが2.1.1、Poltergeistが1.13.0です。  
Viewのコードを見ても重複は見つからず、firstやallを使って絞り込んでも同様の結果でした。  
エラーメッセージに従ってclick_buttonをnode.trigger('click')に変更することで回避はできたのですが、Poltergeistを使う場合、click_buttonは使えなくなるのでしょうか？

**2017/2/1 追記**

上記の原因はサブミットボタンに設定していたfloatでした。  
これを指定していたせいでサブミットボタンがform要素の裏側に回り込んでしまっていたため、サブミットボタンが押せない状況でした。

[![画像の説明をここに入力](https://i.stack.imgur.com/qUL6A.png)](https://i.stack.imgur.com/qUL6A.png)

解決策としては以下の3つです。

  * サブミットボタンに適用しているfloatを外す。
  * execute_scriptでサブミットボタンに適用されているfloatをテスト時のみ外す。
  * サブミットボタンにz-indexを適用する。


CC BY-SA 3.0
2017-01-26T14:35:30.367
32176
2017-02-01T04:23:37.370
2017-02-01T04:23:37.370
19090
19090
question
ruby-on-rails bootstrap rspec capybara
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法


「ナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニュー」はJavaScriptを使って実現されているはずです。  
なので、RSpecの中でもJavaScriptを使う必要があります。

selenium-webdriverやPoltergeistといったgemを導入するとRSpec内でもJSが有効になります。  
（僕はPoltergeistをよく使います）

導入方法や使い方は公式サイトやネットの情報を参考にしてみてください。


CC BY-SA 3.0
2017-01-26T23:53:56.607
32177
2017-01-26T23:53:56.607
85
32176
answer