I am dragging one text element from a tree to a drop zone. .After element get drooped will have a table displayed.No errors shown but the element is not getting dropped. Also when we do dragging manually ->we can see a bubble with green color until it get drooped.That also not got displayed. Note:both element identification is successful. I have gone through the issues mentioned on cypress.io channels but my issue is not same.
HTML for element to be dragged
class="tree-item-content ng-binding ng-scope" ng- if="!item.ui.search.html" ng- bind="item.ItemName" ng-class="vm.itemStyle(item)" ng-dblclick="vm.treeDoubleClick ($event, item, itemParent)">Gender</
HTML for Drop Zone
id="itl-drop-zone-down" class="dropArea" ng-class="{'itl-drop-zone-active': currentDropType === 'down' && dropZoneOptions.down && dropZoneOptions.down.options.length > 0, 'itl-highchart-down-drop-zone-height' : isHighchart || isWidthChart, 'itl-table-down-drop-zone-height':isVizGrid}" kendo-droptarget="" k-dragenter="onDragEnter" k-dragleave="onDragLeave" k-dragcancel="onDragLeave" k-drop="onDrop" droptype="down" data-role="droptarget">
<span class="itl-drop-zone-header">Down</span>
<!-- ngIf: !isInitialLayout() && displayOptions('down') -->
I tired below solution but not working
describe('Drag and drop of Gender test', function() {
const dataTransfer = new DataTransfer;
function dndIt() {
cy.get('.tree-item-content').contains("Gender")
.trigger('dragstart', { dataTransfer });
cy.get('#itl-drop-zone-down')
.trigger('drop', { dataTransfer });
cy.get('.tree-item-content').contains("Gender")
.trigger('dragend');
}
beforeEach(function() {
cy.viewport(1000, 600);
cy.visit('Paste your url ');
});
it('Check whether the drag and drop of Gender is possible', function() {
dndIt();
cy.get('#itl-drop-zone-down')
.should(($el) => {
expect($el.children()).to.have.lengthOf(1)
});
});
});