reactjs Cypress按偏移拖放

我试图使DnD工作在柏树和React应用程序。
起初，我尝试了所有的例子，围绕那些模拟鼠标事件，但它是不工作的一般在我的环境
我能够使用这段代码编写一个测试，其中我知道拖放元素。

const dataTransfer = new DataTransfer();

   cy.get(dragSelector).trigger("dragstart", {
       dataTransfer,
       force: true,
   });

   cy.get(dropSelector).trigger("drop", {
       dataTransfer,
       force: true,
   });

它的工作很好。类似的示例代码，我发现在Cypress食谱。
但现在我需要做DnD的地方我不知道拖放区/元素。它的大小调整器，我需要dnd的偏移，例如20 px的Y轴。（调整元素高度20 px）
有没有可能像这样做呢？

const dataTransfer = new DataTransfer();

   // drag selector is element with draggable attribute and I need move it by 20px from top to down  
   cy.get(dragSelector).trigger("dragstart", {
       dataTransfer,
       force: true,
   }).trigger("drop",{...how to set drop offset if is possible...})

触发丢弃事件作为一些参数，如offsetX和offsetY或x或y和pageX或pageY...但我没有成功。
就像我说的，我不能通过在我的应用程序中模拟鼠标事件来使用它，不知道为什么它不工作。

这就是我如何使用鼠标事件测试除法器（大小调整器）。
我确实为mousedown和mouseup添加了cypress-real-events，但是使用.trigger('mousedown')可能是可以的。
我的应用程序是React Hooks，我发现它在检查之前需要一个小的等待。我认为这可以用.should()优化，但对于我现在的测试来说，这是有效的。

Cypress.Commands.add('checkPosition', 
  {prevSubject: true}, 
  (subject, start, delta = {dx:0}) => {

    cy.wait(75, {log:false}).then(function () {
      
      const deltaValue = delta.dx || delta.dy
      const measurePoint = measurePoint || (delta.dx ? 'pageX' : 'pageY')
      const current = getClientRect(subject[0])[measurePoint]
      const expected = start[measurePoint] + deltaValue 
      expect(current).to.be.closeTo(expected, variance)
    })
  }
)

let start;
cy.get(divider)
  .then(subject => start = getClientRect(subject[0]))
  .realMouseDown({position:'center'})
  .then($el => {
    cy.wrap($el, {log:false})
      .trigger('mousemove', { pageX: start.pageX +20 })
      .checkPosition(start, {dx:20})
      .trigger('mousemove', { pageX: start.pageX +40 })
      .checkPosition(start, {dx:40})
      // more steps as required
      .realMouseUp()
      .checkPosition(start, {dx:100})
  })

你可以在测试中做x或y移动，我的分隔器要么是水平的，要么是垂直的（还能是别的吗？）
位置的计算并不精确，因此我在/cypress/support/e2e.js中添加了close.toAssert。

const closeTo = (_chai, utils) => {
  function assertIscloseTo(expected, delta, msg) {
    msg = msg || utils.flag(this, 'message')
    msg = msg ? `${msg}: ` : ''
    _chai.assert(
      Math.abs(this._obj - expected) <= delta
        , msg + 'expected ' + this._obj + ' to be close to ' + expected + ' +/- ' + delta
        , msg + 'expected ' + this._obj + ' not to be close to ' + expected + ' +/- ' + delta
    )
  }
  _chai.Assertion.addMethod('closeTo', assertIscloseTo)
}
chai.use(closeTo)

获取客户端矩形（）

这只是为了对原生getBoundingClientRect()函数进行一些舍入。
我还添加了centerX和centerY calc，因为如果React应用程序从鼠标按下事件记录其开始位置，则有时改变鼠标按下位置是有用的。

function getClientRect(el) {
  const bb = el.getBoundingClientRect()
  return {
    top: Math.round(bb.top),
    bottom: Math.round(bb.bottom),
    left: Math.round(bb.left),
    right: Math.round(bb.right),
    height: Math.round(bb.height),
    width: Math.round(bb.width),
    x: Math.round(bb.x),
    y: Math.round(bb.y),
    centerX: Math.round(bb.left + (bb.width/2)),
    centerY: Math.round(bb.top + (bb.height/2)),
  }
}

reactjs Cypress按偏移拖放

1条答案

相关问题

热门标签

最新问答