testing - 如何使用 Cucumber 测试可排序的 JQuery UI

Question

我正在尝试编写一个黄瓜/水豚测试来重新排序一些项目，然后将它们保存回来。关于如何最好地做到这一点的任何想法？

Answer 1

我开发了一个 JQuery 插件来解决这个问题，查看jquery.simulate.drag-sortable.js，其中包括一个插件以及一套测试和示例。

希望你觉得这个有用！欢迎反馈。

马特

Answer 2

drag_to 方法对我不起作用。但是我能够通过使用 jquery.simulate.js 在我的水豚硒测试中包含以下内容，将列表中的第一个元素拖到最后一个位置：

page.execute_script %Q{
  $.getScript("/javascripts/jquery.simulate.js", function(){ 
    distance_between_elements = $('.task:nth-child(2)').offset().top - $('.task:nth-child(1)').offset().top;
    height_of_elements = $('.task:nth-child(1)').height();
    dy = (distance_between_elements * ( $('.task').size() - 1 )) + height_of_elements/2;

    first = $('.task:first');
    first.simulate('drag', {dx:0, dy:dy});
  });
}                 

Answer 3

我正在使用这样的网络步骤，它工作正常：

When /^I drag "([^"]*)" on top$/ do |name|
  item = Item.find_by_name(name)
  sleep 0.2
  src  = find("#item_id_#{item.id}")
  dest = find("div.title")
  src.drag_to(dest)
end

Answer 4

对我来说，#drag_to确实有效，但是，它的权力似乎是有限的。

为了将 UI 可排序的表格行向下移动，我必须创建一个包含三行的表格，然后运行这个 Cucumber 步骤：

# Super-primitive step
When /^I drag the first table row down$/ do
  element = find('tbody tr:nth-child(1)')
  # drag_to needs to drag the element beyond the actual target to really perform
  # the reordering
  target = find('tbody tr:nth-child(3)')

  element.drag_to target
end

这会将第一行与第二行交换。我的解释是水豚拖得不够远，所以我给了它一个超出我实际目标的目标。

注意：我已经用tolerance: 'pointer'.

Answer 5

我遵循@codener 的解决方案，它有效！我在代码中唯一更改的是使用tolerance: 'pointer'.

@codener 的回答中描述的限制也没有消失。（我使用的是 capybara 2.18.0。）它不需要第三行将第一行与第二行交换。

When /^I drag the first table row down$/ do
  element = find('tbody tr:nth-child(1)')
  target = find('tbody tr:nth-child(2)')
  element.drag_to target
end