title: How to test javascript hide/show behaviors on authenticated pages?
body: <p><strong>Context:</strong> When a user is logged and consulting his own profile, he can click on his avatar, this click displays a Dropdown menu with an option 'Upload avatar'. When the user clicks on this option, it opens a modal with a form for uploading a new image for the avatar.
  I am using twitter bootstrap to handle the dropdown (and the modal).</p>
  
  <p>Of course, I want to test this. But I don't know how.</p>
  
  <p>Let's concentrate on the dropdown feature, as the modal tests will probably almost identical :</p>
  
  <p>At first I was thinking of using capybara, but there is no way to check if an element is visible through its CSS property <code>display: none</code> or <code>display: block</code>. 
  I read that some people advices to check for a class like <code>hidden</code> through capybara. But in this case, as I am using Twitter Bootstrap, there is only a <code>dropdown</code> for instance. </p>
  
  <p>And I don't want to modify bootstrap behavior just to be able to test it, it would be a smell.</p>
  
  <p>Here is a sample of my rspec suite :</p>
  
  <pre><code>describe 'should display a dropdown menu' do
     let(:user) { FactoryGirl.create :user }
     before do
       sign_in_as user
       # I have routes just like that: /1/firstname-lastname
       visit(profile_path(id: user.id, first: user.first_name.downcase, last: user.last_name.downcase))
  
       click_link 'avatar-dropdown'
     end
     it { should have_css('.dropdown-menu', visible: true) }
     describe 'with an upload link' do [...] end
  end
  </code></pre>
  
  <p>The HTML looks like :</p>
  
  <pre><code>&lt;div class="dropdown" id="avatar-menu"&gt;
    &lt;a class="dropdown-toggle" id="avatar-dropdown" data-toggle="dropdown" href="#avatar-menu"&gt;
      &lt;%= @user.avatar %&gt;
    &lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a class="upload-avatar" href="#"&gt;Upload an image&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- #upload-menu --&gt;
  </code></pre>
  
  <p>Of course, it is not working with <code>visible: true</code>, as the <code>display: none</code> is set by twitter bootstrap's CSS.</p>
  
  <p>Then, I thought about testing this behavior with Jasmine (A good occasion to dive in), but if I do so, how should I register a user ?
  I don't know if it shares the test database, but I don't think I can use factory girl to generate new users in Jasmine, can I ?
  I don't even know if visiting the register page in Jasmine (if it is even possible ?) and submitting the form would do the trick. Same with the authentication.</p>
  
  <p>How can I test those behaviors ? Should I use capybara (Is there a trick ?) or Jasmine (What is the way to go, then ?)</p>
  
  <p>Thanks !</p>