The Problem

For jottinx I wrote a small piece of code that allowed to sort items using drag and drop. Of course, after writing it and making sure it works (manually), I want to make sure it keeps working. So I add a test, using cucumber.

My scenario actually looks pretty straightforward:

 @javascript
 Scenario: Dragging a book
   Given I authenticate as a "default user"
   And I add a new book with title "a-new-book"
   And I add a new book with title "another-book"
   And I add a new book with title "one-last-book"
   And I drag book "one-last-book" to the top
   Then book "one-last-book" is at the top of the list

The difficult bit was: how do I implement the dragging?.

Actually it seemed straightforward, because capybara has a method called drag_to. So I implemented the step like this:

 When /^I drag book "([^"]\*)" to the top$/ do |book_title|
    drop_place = page.find(:css, 'ul.sortable-books li:first')
    page.find(:xpath, "//a[@href='##{book_title.parameterize}']").drag_to(drop_place)
 end

But, unfortunately, this did not work. I googled around a bit and found the following two similar questions:

• drag_to with jquery sortable list
• drag_to don't work on sortable elements

The short conclusion: it does not work, and it is a combination of how jquery implemented the sortable element, and the fact that the selenium driver does not support it yet. So, refraining to using the selenium driver directly does not help either. After some more googling, I found a similar question on stackoverflow, and there I found the solution.

The solution

Enter jquery.simulate.drag-sortable.js. It is a script that will allow you to simulate dragging in a sortable object by issuing a simple javascript command:

 // drag item down one position in the list
 $('#itemToDrag').simulateDragSortable({ move: 1 });

If move parameter is negative, it will move up. And down if positive. If you include the js inside your project, you can easily test that out inside your Chrome console. It just works. Awesome piece of work. To use that in a step-definition, just write:

 When /^I drag book "([^"]\*)" to the top$/ do |book_title|
    page.execute_script %Q{ 
      $('.sortable-books li:last').simulateDragSortable({move: -4}); 
    }
 end

Hope this helps :)