如何在Cypress中测试react full calendar历史元素不可拖拽

针对react full calendar的历史日程不可拖拽校验，有两种常用的实现方式，你可以根据自己的项目配置选合适的：

方案1：属性直接校验（执行效率最高） #

react full calendar对不可编辑的日程项默认会添加fc-event-non-draggable专属类，同时会把元素原生draggable属性设置为false，直接断言这两个特征即可完成校验，补充后的代码如下：

it("should not be draggable(editable)", () => {
    // visit /schedule
    cy.visit("/schedule").waitForGraphQL();

    // Click prev button
    cy.get(controls.week.prevButton()).click().waitForGraphQL();

    // 定位历史日期对应的.item日程元素，校验不可拖拽特征
    cy.get(".item")
      .should("have.class", "fc-event-non-draggable")
      .and("have.attr", "draggable", "false");
});

如果你的项目自定义了full calendar的类名配置，找不到默认的fc-event-non-draggable类，也可以单独校验draggable属性：

cy.get(".item").should($el => {
  expect($el.attr("draggable")).to.not.equal("true")
})

方案2：模拟拖拽操作校验（最贴合真实用户场景，结果最准确） #

如果属性校验不能覆盖你的自定义场景，可以直接模拟用户拖拽操作，验证元素拖拽后位置没有发生变化，不需要额外装插件也可以实现：

it("should not be draggable(editable)", () => {
    // visit /schedule
    cy.visit("/schedule").waitForGraphQL();

    // Click prev button
    cy.get(controls.week.prevButton()).click().waitForGraphQL();

    // 记录日程元素初始位置
    cy.get(".item").then($el => {
      const initPosition = $el[0].getBoundingClientRect()

      // 模拟完整拖拽流程，坐标可根据你的页面布局调整到目标日期单元格位置
      cy.get(".item")
        .trigger('mousedown', { which: 1 })
        .trigger('mousemove', { clientX: 500, clientY: 200 })
        .trigger('mouseup', { force: true })

      // 断言拖拽完成后元素位置无变化
      cy.get(".item").then($updatedEl => {
        const currentPosition = $updatedEl[0].getBoundingClientRect()
        expect(currentPosition.left).to.eq(initPosition.left)
        expect(currentPosition.top).to.eq(initPosition.top)
      })
    })
});

两种方案也可以组合使用，进一步提升测试结果的可靠性。

内容的提问来源于stack exchange，提问作者Akash