Last Updated: February 25, 2016
· tb

Testing JQuery draggable and droppable with Capybara

Capybara drag_to might not always work for you, see http://www.balt.nu/lrbalt/archives/2012/03/18/drag-and-drop-fails-on-jquery-draggable-and-droppable/

However, you dont have to simulate drag and drop if you extract drop callback to a separate method and call it from tests directly:

it "move audit to folder", js: true do
  audit2.folder.audits.count.should eq(2)

Extracted function:

window.move_audit_to_folder = function(auditId, folderId) {
    type: 'PUT',
    url: ...,
    data: ...,
    dataType: "script"
  }).done(function() {

JQuery droppable code:

  accept: '.audit-row',
  hoverClass: "ui-state-active",
  tolerance: "pointer",
  drop: function( event, ui ) {
    var auditId = $(ui.draggable).data('audit-id'),
        folderId = $(event.target).data('folder-id');

    window.move_audit_to_folder(auditId, folderId);

This approach could also be applied to other difficult to simulate test steps.

Let me know what you think of it and/or how you solve similar issues! Thank you!