Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Event trigger("dragstart") without dataTransfer

See original GitHub issue

Operating System: Linux
Cypress Version: 0.20.0

Is this a Feature or Bug?

Bug

Current behavior:

It seems that after trigger the dragstart event. The generated event for handling function is type of Event not DragEvent. The event parameter is without dataTransfer method.

Desired behavior:

Provide the event handler with DragEvent not just only Event type of object.

How to reproduce:

Test code:

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    // THERE SHOULD BE DragEvent not only Event
    console.log('EV: ', ev);
    ev.dataTransfer.setData("text", ev.target.id); // This die
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" width="200px" height="200px" style="border: 1px solid red">DROP</div>

<div id="drag1" draggable="true"
ondragstart="drag(event)" width="100px" height="80px">DRAG</div>

</body>
</html>

Test:

describe('Drag test html5', function() {
  it('main', function() {
    cy.visit('http://localhost:8080/');
    cy.get('#drag1').trigger("dragstart");
  })
})

Additional Info (images, stack traces, etc)

Event from Cypress.io: EV: Event {isTrusted: false, clientX: 500, clientY: 16, pageX: 500, pageY: 16…} Event from browser: EV: DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 668, screenY: 133, clientX: 34…}

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:11 (6 by maintainers)

Top GitHub Comments

12reactions

americoscommented, Mar 29, 2018

This would be a great feature to add to Cypress 👍

3reactions

josephancommented, Feb 7, 2019

Here is a temporary workaround for the dataTransfer property. It’s value is DataTransfer which I am mocking in my tests. I don’t believe my current implementation covers all use cases of it:

// within my test...
        const dataTransfer = new DataTransfer();
        cy.get('.shapes-parent-category')
            .click()
            .get('[data-tip="Rectangle"]')
            .trigger('mousedown')
            .trigger('dragstart', {
                dataTransfer: dataTransfer,
            })
            .get('#div-wrapper')
            .trigger('dragenter', { dataTransfer: dataTransfer })
            .trigger('dragover', { dataTransfer: dataTransfer })
            .trigger('drop', { dataTransfer: dataTransfer });
    });
});

class DataTransfer {
    constructor() {
        this.data = {};
        this.types = [];
        this.files = [];
    }

    setData(format, data) {
        this.data[format] = data;
    }

    getData(format) {
        return this.data[format];
    }
}

To get more info about dataTransfer, play around with it in your browser’s console: