Programmatically trigger drag and drop

[thorthor]

Dear Bryntum team,

I am trying to test a feature that is based on drag and drop functionality of events.

The tool for integration testing is cypress extended with a library for drag and drop -> https://github.com/4teamwork/cypress-drag-drop

I have recorded a video example of the issue. https://www.youtube.com/watch?v=Uiz7rfephZQ&ab_channel=RenatoRuk

Cypress does the following execution:

• - mousedown on "click me" dom element
  - dragstart on the same element
  - dragover with coordinates of "Dad's birthday" DOM event
  - drop with coordinates of "Dad's birthday" DOM event
  - mouseup

Expected behavior is that "click me" gets moved to a correct location, but I just can not trigger an event that event starts to drag the event.

I also tried something like this, but also without success:

describe("Drag and drop", () => {
    it("should drag and drop to another event", () => {
        cy.visit("https://www.bryntum.com/examples/scheduler/basic/");
        cy.get('[data-event-id="_generated_0x5e802f1"]')
            .trigger("mousedown", { which: 1 })
            .trigger("mousemove", { clientX: 100, clientY: 100 })
            .trigger("mouseup");
        cy.on("uncaught:exception", (err, runnable) => {
            return false;
        });
    });
});

Events get dispatched, but nothing happens.

I see you support drag and drop functionality in Siesta. That's awesome! I would really really appreciate if you can give me a hint on how to implement that functionality with cypress or at least what browser events should I dispatch for moving the timeline event programmatically.

Best,
Renato

[saki]

Hello Renato,

we internally use Siesta, our own product, for testing the Bryntum components so, speaking of myself, I have no experiences with Cypress. Just from looking at the above code: Is the data-event-id really correct?

Any chance that you switch to Siesta?

PS: Delete please the duplicate post with same content. Thanks.

[thorthor]

Hello Saki,

thank you for the fast response.

Yes, the id was correct as cypress treated those events as correct. I added the video example. https://www.youtube.com/watch?v=SqiqumBB-j0&feature=youtu.be&ab_channel=RenatoRuk

Unfortunately, I can not currently change the integration/e2e framework. Maybe it can consider it in the future, but now a lot of tests depend on it.

Can you maybe explain how do you implement mouse drag with Siesta at the very basic level? Sure, I understand it's a tool of its own, but a hint of which events to use as in mousedown or dragstart would be really helpful.

[mats]

Not quite sure why you would want to combine Cypress and Siesta? Please explain a bit what you're trying to do. It's a bit outside the scope of our forums to describe Siesta's internals. We do offer Professional Services if you'd like a resource to assist you: https://www.bryntum.com/services/

[thorthor]

Hello Mats,

I did not mean to combine Cypress and Siesta. I understand that Siesta's internals are out of scope of this forum, I'm just trying to figure out how to test this.

Basically, all I'm trying to do is programmatically trigger drag and drop on the scheduler event. What event should I dispatch on the DOMElement representing the timeline event to programmatically move it? Is it some custom event or a standard browser event?

[thorthor]

For example, beforeDragStart's param returns object with event instance. Event can be MouseEvent or TouchEvent. But do I maybe have to dispatch DragEvent to trigger it programmatically?

[mats]

But what's the use case here? This is for your application code, or for your test suite?

[thorthor]

It's for testing, yes. The programmatic drag and drop is not needed for application logic.

[mats]

Ok and since you use Cypress, why not use their drag drop functionality?

[thorthor]

I did, but it's not working for scheduler events and I'm trying to figure out why is that happening. Cypress dispatches mousedown, mousemove and mouseup events, simualting user behaviour, but nothing happens.

When trying the same behaviour with cypress outside scheduler, in another example, drag and drop works. So I'm trying to figure out are there any special events I need to trigger to make this work in the Scheduler.

This is the video I recorded that shows how drag and drop works in cypress. This is the link to the example https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__drag-drop/puzzle.html

As I can see, the draggable html attribute is not set on the elements so I'm guessing the behaviour of this cypress example created with dragula and bryntum drag and drop are very similar. I just can't figure out their differences as I'm not that familiar with scheduler's internals.