Comment puis-je tester JQuery UI Sortable avec du concombre

Question

J'essaie d'écrire un test de concombre/capybara pour réorganiser certains articles, puis les sauvegarder. Des idées sur la meilleure façon de faire cela?

Answer 1

J'utilise une étape web comme celui-ci et il fonctionne très bien:

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

la méthode drag_to ne fonctionne pas pour moi. Mais j'ai pu faire le premier élément de ma liste à être traîné à la dernière position en incluant ce qui suit dans mon test de sélénium capybara utilisant 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

J'ai développé un plugin JQuery pour résoudre ce problème, consultez jquery.simulate.drag-sortable.js qui comprend un plug-in avec une suite de tests et d'exemples.

J'espère que vous trouverez ceci utile! Les commentaires sont les bienvenus.

Matt

Answer 4

Pour moi, #drag_to travail a cependant ses pouvoirs semblent être limités.

Pour déplacer une ligne de table UI triables vers le bas, je devais créer une table avec trois lignes, puis exécutez cette étape de concombre:

# 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 

Ce échangerais la première avec la deuxième rangée. Mon interprétation est que Capybara ne traîne pas assez loin, donc je lui ai donné une cible au-delà de ma cible réelle.

Remarque: J'ai configuré UI-classable avec tolerance: 'pointer '.