-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Programatic dragging #162
Comments
I'm trying to write an integration test with Cypress that uses events ( I've been completely unable to even get the draggable element to move in the test (and also in more "manual" tests of just firing events from the console in Chrome). Is what I'm trying to do impossible without this idea implemented? |
I am unable to programmatically trigger DnD experiences too (in my tests). Are any examples available? |
Hi @CarrierDirectRoss, interesting link! We have not considered the role of testing in a programatic api. For now you can test it by faking user inputs. We are doing so in some of our tests with puppeteer: https://github.com/atlassian/react-beautiful-dnd/tree/master/test/browser |
Thanks for the response @alexreardon. The example definitely helped get me started. My current problem though is that I am able to programmatically initiate a drag on a DragHandle (via spacebar), but cannot move the item using the proper arrow keys for keyboard navigation. Below is a code snippet if you can spot anything wrong (using react-testing-library)
|
Would this cover creating our own custom controls that could trigger a DnD experience? ie. up and down arrows which move items up an down a list when clicked. |
Yes
…On Tue, 8 May 2018 at 5:01 pm, Geoffrey Chong ***@***.***> wrote:
Would this cover creating our own custom controls that could trigger a DnD
experience? ie. up and down arrows which move items up an down a list when
clicked.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#162 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACFN7S750_emqIBWk07h0oYoaM5hY2YIks5twULTgaJpZM4QR6MO>
.
|
This seems like a really cool idea. I'm imagining an API like a chess move i.e. "move a4 to c6" https://en.m.wikipedia.org/wiki/Algebraic_notation_(chess) There are really two ideal actions in my mind. You could have the foreshadowing of a drag where the droppable space opens up in the destination list, then commit to the actual drag and the draggable flies into place. |
Because we have a state driven drag model there are a lot of possibilities |
OK, we hit this same issue this week - we have some complicated business logic that runs when a drop happens, and we wanted to be able to test this programatically with cypress.io Thumbs up to the idea of providing specific events that enable the scripting of this (in fact, from review yesterday, it looks like this would be reasonably easy - create a new sensor - in drag-handle/sensor that is a "SyntheticEventSensor" that responds to to synthetic events for "dragstart"/"dragmove"/"dragend" which would allow any JS test framework (or application code) that can trigger JS events to simulate dragging, in an explicit way without having to worry about the implementation of the mouse/touch/keyboard interfaces. Anyway -> for anyone, like me hitting this problem, here's a recipe to make it work - this is now running in our product (test!) environment: Using cypress.io to simulate a drag event do the following: (our application is a calendar so we freeze the time of the tests in cypress - hence the use of cy.clock)
|
Thank you @millarm. We have been using keyboard events to trigger drags in cypress tests. Now we can finally test all the use cases! |
Our browser tests are now executing keyboard, mouse and touch dragging in chrome and firefox with test cafe. Feel free to take a look: https://github.com/atlassian/react-beautiful-dnd/blob/master/test/browser/simple-list.js |
Related: #623 |
Question about dragging while testing... I am using CRA, and React-Testing-Library fyi In this example, I can successfully drag and drop an element from the top of a list, to the bottom of the list.
However, I cannot get the item to from from a list into a different list right next to it. (the below code doesn't move the item)
|
Thanks this worked beautifully for me! |
Just for the record, I created a custom command based on @millarm response:
export default (subject, offset = { x: 0, y: 0 }) => {
cy.clock(+new Date());
cy
.wrap(subject)
.first()
.then(element => {
const coords = element[0].getBoundingClientRect();
cy
.wrap(element)
.trigger("mousedown", {
button: 0,
clientX: coords.x,
clientY: coords.y
})
.trigger("mousemove", {
button: 0,
clientX: coords.x + 5,
clientY: coords.y
})
.tick(200);
cy
.get("body")
.trigger("mousemove", {
button: 0,
clientX: coords.x + offset.x,
clientY: coords.y + offset.y
})
.tick(200);
cy.get("body").trigger("mouseup");
});
};
Cypress.Commands.add("dragAndDrop", { prevSubject: "optional" }, dragAndDrop); Usage: cy.get("[data-cy=card]").dragAndDrop({
x: 320,
y: 0
}); This command drags an offset, but can be modified to drag to an absolute position |
Tweaked @goncy solution a bit, so it works on elements instead of using offsets (tested on version 10.0.3):
Usage:
|
One potential use case I have that could be covered by this feature: I have a draggable list, and some button outside of that list that sorts it in a particular way. When I click the sort button, I'd like the list to sort, and animate as it sorts. If there was programatic dragging, my sort code could just fire off a series of drags. There are other libraries that do this, but if I'm already using |
It looks like this might be going out as a part of #1225 |
Ideas for programmatic API examples
|
This shipped in 12.0! #1487 |
Is this implemented in Cypress? I came here looking for how to implement this in a normal context, but this discussion seems to have shifted entirely into Cypress testing, while I just wanted functionality similar to your gif. Is there code you can show for found it? Update: Key highlights: TypeScript definitions for sensor prop is out of date, I PRed it: DefinitelyTyped/DefinitelyTyped#42167 |
Add the ability to control an entire drag programatically. This opens up a large number of experiences such as:
The text was updated successfully, but these errors were encountered: