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

Question

上下文:当用户登录并查看自己的个人资料时，他可以点击自己的头像，此点击会显示一个带有“上传头像”选项的下拉菜单。当用户单击此选项时，它会打开一个带有用于为头像上传新图像的表单的模式。 我正在使用 Twitter Bootstrap 来处理下拉菜单(和模式)。

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

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

起初我想使用 capybara ，但没有办法通过其 CSS 属性 display: none 或 display: block 检查元素是否可见。 我读到有人建议通过 capybara 检查像 hidden 这样的类。但在这种情况下，因为我使用的是 Twitter Bootstrap，所以只有一个 dropdown 实例。

而且我不想修改 Bootstrap 行为只是为了能够测试它，那会是一种气味。

这是我的 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 bootstrap 的 CSS 设置的。

然后，我想用 Jasmine 测试这种行为(一个深入的好机会)，但如果我这样做，我应该如何注册用户？ 我不知道它是否共享测试数据库，但我不认为我可以使用 factory girl 在 Jasmine 中生成新用户，可以吗？ 我什至不知道访问 Jasmine 中的注册页面(如果可能的话？)并提交表格是否可以解决问题。与身份验证相同。

我如何测试这些行为？我应该使用 capybara (有什么技巧吗？)还是 Jasmine (那要走什么路呢？)

谢谢!

Answer 1

好吧，我已经设法让 capybara 正常工作了。我不确定它是否适用于所有其他情况，但在我的情况下它有效:

我们需要激活Selenium对于 capybara ，将 js: true 传递给 describe 或 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

这样， capybara 似乎真正检查了属性是否可见。 每次我运行测试时，它还会启动 Firefox，这可能非常痛苦。