Question

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

当然，我想测试一下。但我不知道如何。

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

起初我正在考虑使用水豚，但无法通过其CSS属性display: none或display: block检查元素是否可见。我读到有些人建议通过资本来检查像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测试这种行为（这是一个潜入的好时机），但如果我这样做，我应该如何注册用户？我不知道它是否共享测试数据库，但我不认为我可以使用工厂女孩在Jasmine中生成新用户，可以吗？我甚至不知道是否访问Jasmine中的注册页面（如果它甚至可能？）并提交表单就可以了。与身份验证相同。

我该如何测试这些行为？我应该使用水豚（有诀窍吗？）或茉莉花（那是什么方式，那么？）

谢谢！

Answer 1

好吧，我已经成功地与水豚一起工作了。我不确定它是否适用于每一个案例，但在我的情况下它起作用了：

我们需要将js: true传递给describe或it

，为Capybara激活Selenium

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，这可能会非常痛苦。

Answer 2

起初我正在考虑使用水豚，但没有办法通过CSS属性display：none检查元素是否可见或显示：阻止

你能不能这样做：

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

其中'display：none'会在不可见时替换'display：block'。

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

2 个答案: