drag and drop not work in cypress but working by user

user_4884269 0
Viewed 952

@craftjs/core was used in my project. when user drag and drop tools for add to canvas everything works fine ( component created in canvas) but in cypress after drop not happening ( component not created in canvas).

in ToolBox componnet: ...

const { connectors } = useEditor();
     const dragStart = (e) => {
        e.dataTransfer.setData('text/html', e.parentNode);
        setExpanded(false);
    };

...

    <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>
            <AccordionSummary
              expandIcon={<i className="fal fa-chevron-down" />}
              aria-controls="toolbox-content"
              id="ToolBoxPanel"
            >
              <small>ToolBox</small>
            </AccordionSummary>
            <AccordionDetails className="justify-content-center p-0">
<MaterialButton
              aria-label="text"
              onDragStart={dragStart}
              variant="text"
              color="secondary"
              className="my-1 p-1 toolsButton mx-1"
            >
              <i
                className="fal fa-font "
                ref={(ref) => {
                  connectors.create(ref, <Text text="Type anything" />);
                }}
              />
            </MaterialButton>

. . .

in cypress/integration/spec.js

describe("Drag and Drop", () => {
  beforeEach(() => {
    cy.visit('/');
    cy.waitForReact();

  })
  
  it('should add text componnent to canvas', () => {
   
    cy.contains('ToolBox').click().wait(500)

    cy.get('#body').then($editor=>{
      cy.get('.toolsButton[aria-label="text"] i').realHover().trigger('mousedown').reactDnd($editor,{offsetX:300,offsetX:300});
  
      cy.wait(5000);
    })
  
  })
});

in cypress/support/commands.js

Cypress.Commands.add('reactDnd', {
    prevSubject: 'element',
  }, (sourceSelector, targetSelector, options) => {
    const dataTransfer = new DataTransfer;
    const opts = {
      offsetX: 100,
      offsetY: 100,
      ...(options || {})
    };
    cy.wrap(sourceSelector.get(0))
      .trigger('dragstart', {
        dataTransfer,
      }).wait(1000);
    cy.get(targetSelector).then($el => {
      const {
        x,
        y,
      } = $el.get(0).getBoundingClientRect();
      cy.wrap($el.get(0)).realHover()
        .trigger('dragover', {
          dataTransfer,
        }).wait(1000).trigger('mouseover').wait(1000)
        .trigger('drop', {
          dataTransfer,
          clientX: x + opts.offsetX,
          clientY: y + opts.offsetY,
        }).trigger('dragend', {
          dataTransfer,
        }).trigger('mouseup');
       
    })
  });
node-modules cypress reactjs drag-and-drop javascript
1 Answers
    class DndSimulatorDataTransfer {
  constructor(){
      this.data = {};

      this.dropEffect = 'move';
    
      this.effectAllowed = 'all';
      this.files = [];
      this.items = [];
      this.types = [];
  }
 

  clearData(format) {
    if (format) {
      delete this.data[format]

      const index = this.types.indexOf(format)
      delete this.types[index]
      delete this.data[index]
    } else {
      this.data = {}
    }
  }

  setData(format, data) {
    this.data[format] = data
    this.items.push(data)
    this.types.push(format)
  }

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

    return ''
  }

  setDragImage(img, xOffset, yOffset) {}
}
  Cypress.Commands.add('reactDnd', {
    prevSubject: 'element',
  }, (sourceSelector, targetSelector, options) => {
    const dataTransfer = new DndSimulatorDataTransfer();
    const opts = {
      offsetX: 100,
      offsetY: 100,
      ...(options || {})
    };
    cy.wrap(sourceSelector.get(0))
      .trigger('dragstart', {
        dataTransfer,
      })
      .trigger('pointercancel', {
        dataTransfer,
        force:true,
      })
      .trigger('drag', {
        force:true,
        dataTransfer,
      })
      .trigger('dragenter', {
        force:true,
        dataTransfer,
      })
      .wait(100);
    cy.get(targetSelector).then($el => {
      const {
        x,
        y,
      } = $el.get(0).getBoundingClientRect();
      cy.wrap($el.get(0))
      .trigger('dragenter', {
        dataTransfer,
      })
      .trigger('drag', {
        dataTransfer,
      })
      .trigger('dragover', {
        dataTransfer,
      })
        .trigger('drop', {
          dataTransfer,
          clientX: x + opts.offsetX,
          clientY: y + opts.offsetY,
          force: true
        })
        .wait(1000);
        cy.wrap(sourceSelector.get(0)).trigger('dragend', {
          dataTransfer,
          force: true

        });
    })
  });
user_48842690
Related