I'm trying to implement Jest tests for a module(to reorder data table rows). However, I'm unable to mimic the dragstart
event. Can anyone help me to achieve the same behavior -
Here is the function which is getting called on the dragstart
-
onDragStart(evt) {
evt.dataTransfer.setData("dragId", evt.currentTarget.dataset.dragId);
evt.dataTransfer.setData("sy", evt.pageY );
evt.dataTransfer.effectAllowed = "move";
evt.currentTarget.classList.add("grabbed");
}
Here I'm getting error -
TypeError: Cannot read property 'setData' of undefined
at first line.
Here is the jest method -
it("should check a mouse drag event", () => {
const element = createElement("c-data-table-draggable", {
is: DataTableDragable
});
document.body.appendChild(element);
getRecordWireAdapter.emit(mockGetRecord);
//element.users = mockGetRecord;
return Promise.resolve().then(() => {
expect(element).toBeAccessible();
const trEls = element.shadowRoot.querySelectorAll('tr');
expect(trEls.length).toBeGreaterThan(mockGetRecord.length);
trEls[1].dispatchEvent(new CustomEvent("dragstart", { clientX: 0, clientY: 0, pageY : 20 }));
});
});
Component HTML for reference -
<template>
<table
class="table-dragable slds-table slds-table_cell-buffer slds-table_bordered"
aria-describedby="User Details"
>
<thead>
<tr>
<th scope="col">Index</th>
<th scope="col">Salesforce ID</th>
<th scope="col">User Name</th>
<th scope="col">Email ID</th>
</tr>
</thead>
<tbody>
<template if:true={users.data}>
<template for:each={users.data} for:item="user" for:index="index">
<tr
class="grabable"
key={user.Id}
id={user.Id}
draggable="true"
data-drag-id={index}
ondragstart={onDragStart}
ondragover={onDragOver}
ondrop={onDrop}
>
<th scope="col" class="myIndex">{index}</th>
<th scope="col" class="myId">{user.Id}</th>
<th scope="col">{user.Username}</th>
<th scope="col">{user.Email}</th>
</tr>
</template>
</template>
<template if:true={users.error}> No rows found. </template>
</tbody>
</table>
<div>
<lightning-button
variant="brand"
label="Submit"
title="Submit"
onclick={handleSubmit}
class="slds-m-around_x-large"
></lightning-button>
</div>
</template>