How can I test JQuery UI Sortable with Cucumber

Question

I'm tryting to write a cucumber/capybara test to reorder some items and then save them back. Any thoughts on how to best do this?

Answer 1

I'm using a web step like this and it works fine:

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 2

I have developed a JQuery plugin to solve this problem, check out jquery.simulate.drag-sortable.js which includes a plugin along with a suite of tests and examples.

Hope you find this useful! Feedback is welcome.

Matt

Answer 3

the drag_to method did not work for me. But I was able to cause the first element in my list to be dragged to the last position by including the following in my capybara selenium test using 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 4

For me, #drag_to did work, however, its powers seem to be limited.

In order to move a UI-sortable table row down, I had to create a table with three rows, then run this Cucumber step:

# 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

This would swap the first with the second row. My interpretation is that Capybara does not drag far enough, so I gave it a target beyond my actual target.

Note: I have configured UI-sortable with tolerance: 'pointer'.

Answer 5

I followed @codener's solution and it works! The only thing I changed in my code is configuring the UI-sortable with tolerance: 'pointer'.

The limitation described in @codener's answer is not gone, too. (I'm using capybara 2.18.0.) It doesn't need the third row to swap the first with the second row.

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