如何在经过身份验证的页面上测试javascript隐藏/显示行为？

上下文：当用户登录并查看自己的个人资料时，他可以单击自己的头像，此单击会显示一个下拉菜单，其中有一个选项“上传头像”。当用户点击此选项时，它会打开一个模式，其中包含一个表单，用于上传化身的新图像。 我正在使用twitter引导来处理下拉列表（和模式）

当然，我想测试一下。但我不知道怎么做

让我们专注于下拉功能，因为模态测试可能几乎相同：

起初我考虑使用水豚，但无法通过CSS属性检查元素是否可见

display:none

或

display:block

。 我读到一些人建议通过水豚来检查像

hidden

这样的类。但在本例中，当我使用Twitter引导时，例如只有一个

下拉列表

我不想仅仅为了测试而修改引导行为，这将是一种气味

以下是我的rspec套件示例：

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

HTML看起来像：

<div class="dropdown" id="avatar-menu">
  <a class="dropdown-toggle" id="avatar-dropdown" data-toggle="dropdown" href="#avatar-menu">
    <%= @user.avatar %>
  </a>
  <ul class="dropdown-menu">
    <li><a class="upload-avatar" href="#">Upload an image</a></li>
  </ul>
</div> <!-- #upload-menu -->






当然，它不能使用
visible:true
，因为
display:none
是由twitter引导的CSS设置的

然后，我考虑用Jasmine测试这个行为（一个很好的切入点），但是如果我这样做了，我应该如何注册用户呢？
我不知道它是否共享测试数据库，但我不认为我可以使用factory girl在Jasmine中生成新用户，可以吗？
我甚至不知道访问Jasmine中的注册页面（如果可能的话？）并提交表单是否会奏效。身份验证也是如此

我如何测试这些行为？我应该用水豚草（有诀窍吗？）还是茉莉花（那怎么办？）

谢谢
 嗯，我已经设法让水豚的事情顺利进行了。我不确定它是否适用于所有其他情况，但在我的情况下，它适用于：

我们需要通过将
js:true
传递到
description
或
it
来激活水豚

describe 'should display a dropdown menu', js: true 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

通过这种方式，水豚似乎可以真正检查属性是否可见。
每次我运行测试时，它都会启动Firefox，这可能会非常痛苦

起初我想用水豚，但是没有办法
检查元素是否通过其CSS属性display:none可见
或显示：块

你不能这样做吗

page.has_xpath?("/xpath/here[contains(@style, 'display: block')]")

其中，当“显示：无”不可见时，“显示：块”将替换为“显示：无”