oafshar
Posts: 1
Joined: Mon Nov 29, 2021 7:50 pm

Programatically testing drag-and-drop application logic with Gantt chart

I am attempting to test application logic involving dragging and dropping points on a Gantt chart using an automated browser testing framework. Because of this, I cannot access Highcharts properties to simulate drag and drop interactions. I am instead relying on DOM element selectors and Mouse events to simulate the desired behavior.

So far, I have been able to successfully simulate "hover" and "click" interactions on the Gantt points. The method I have used to do so is roughly like so:

Hover:

Code: Select all

document.querySelector(<selector for Gantt point>).dispatchEvent(new MouseEvent('mouseover', {
  bubbles: true,
  cancelable: true,
}));
Click:

Code: Select all

document.querySelector(<selector for Gantt point>).dispatchEvent(new MouseEvent('mouseover', {
  bubbles: true,
  cancelable: true,
}));
document.querySelector(<selector for Gantt point>).dispatchEvent(new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
}));
 
I have tried a similar flow for drag and drop by issuing a series of `mouseover`, `mousedown`, `mousemove` and `mouseup` events to the desired point, but with no success in getting the point to actually be moved on the chart. I am wondering if any one has experience attempting to accomplish this and/or can provide tips. Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Programatically testing drag-and-drop application logic with Gantt chart

Hello oafshar,

Welcome to our forum and thanks for contacting us with your question!

Your logic testing drag seems to be correct, it is actually very similar to what we use in our Karma tests. The only thing I can suggest is to try to follow our logic and see if there any differences. You can find it here:
https://github.com/highcharts/highchart ... er.ts#L732

If it doesn't help please provide me with some more (which framework do you use, its version etc.)

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”