Where developers come to connect, share, build and be inspired.

13

Testing JQuery draggable and droppable with Capybara

888 views

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
  evaluate_script("window.move_audit_to_folder('#{audit1.id}','#{audit2.folder_id}')")
  audit2.folder.audits.count.should eq(2)
end

Extracted function:

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

JQuery droppable code:

$('.folder-link').droppable({
  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!

Comments

Add a comment