3

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

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

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

起初我在考虑使用 capybara，但无法通过其 CSS 属性display: none或display: block. 我读到有些人建议检查像hidden水豚这样的课程。但在这种情况下，因为我使用的是 Twitter Bootstrap，所以只有一个dropdown例子。

而且我不想修改引导行为只是为了能够测试它，这将是一种气味。

这是我的 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 中的注册页面（如果可能的话？）并提交表格是否可以解决问题。与认证相同。

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

谢谢 ！

4

2 回答 2

2

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

我们需要通过传递给Capybara 来激活Selenium或js: truedescribeit

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

于 2012-07-12T06:45:59.407 回答
1

起初我在考虑使用 capybara，但无法通过其 CSS 属性 display: none 或 display: block 检查元素是否可见

你能不能做这样的事情：

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

其中 'display: none' 将在不可见时替换 'display: block'。

于 2012-07-31T17:52:13.803 回答