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

上下文：登录并查询自己的个人资料后,用户可以单击其头像,此单击将显示一个下拉菜单,其中包含“上传头像”选项.当用户单击此选项时,它将打开一个模式,该模式带有一个表单,用于上传头像的新图像.
我正在使用twitter bootstrap处理下拉列表(和模式).

当然,我要测试一下.但是我不知道如何.

让我们集中讨论下拉功能,因为模态测试可能几乎相同：

起初,我考虑使用水豚,但是无法检查元素是否通过CSS属性display：none或display：block可见.
我读到有人建议检查像通过水豚隐藏的课程.但是在这种情况下,例如,当我使用Twitter 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一起使用,如显示：twitter bootstrap的CSS都没有设置.

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

如何测试这些行为？我应该使用水豚(有花招吗？)还是茉莉花(然后走什么路？)

谢谢 ！

解决方法:

好吧,我设法使水豚能正常工作.我不确定它是否适用于每种情况,但就我而言,它是可行的：

我们需要通过传递js：true来为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,这可能非常痛苦.

标签：twitter-bootstrap,jasmine,capybara,javascript,ruby-on-rails
来源： https://codeday.me/bug/20191201/2078079.html