测试在Cypress中拖动小册子地图。

Question

我有一个非常简单的用例。我想测试当我改变一个小册子地图视口时，通过抓取它来获取数据。然而，我不知道如何编写测试。

      cy.visit("/map");
      // wait for data
      cy.get(".leaflet-interactive.multilinestring");
      // simulate map moving
      cy.get(".leaflet-container")
        .trigger("mousedown", "center")
        .trigger("mousemove", 30, 30);
        .trigger("mouseup");
      // map should be loading
      cy.get(".leaflet-container.leaflet-loading");

它似乎没有移动地图.

我试着在触发调用之间添加等待，因为我认为可能有关于事件发射速度的警卫，但没有运气。

有什么办法可以让我测试这个问题吗？

Answer 1

似乎没有使用 cy.trigger()我们需要使用本地事件来让Leaflet认为地图在拖动。

我们已经写了一个自定义的赛普拉斯命令 dragMapFromCenter，使用它的样子是这样的。

cy.get('#map-canvas').dragMapFromCenter({
  // Go 1/6 of map container width to the right (negative direction)
  xMoveFactor: -1 / 6,
  // Go 1/3 of map container height to the top (positive direction)
  yMoveFactor: 1 / 3
});

// We need to wait for something to happen after map starts moving
cy.get(".leaflet-container.leaflet-loading");

下面是对它的实现 dragMapFromCenter. 把这个放进去 cypress/support/commands.js 以便能够在测试中使用它。

// # cy.get('#map-canvas').dragMapFromCenter({ xMoveFactor: 0.25, yMoveFactor: -0.5 })
//
// Allows dragging a Leaflet map by the given amounts. A factor of 1 means the map
// will be dragged the whole width of the map canvas in X direction and the whole
// height of the map canvas in Y direction.
Cypress.Commands.add(
  'dragMapFromCenter',
  { prevSubject: 'element' },
  (element, { xMoveFactor, yMoveFactor }) => {
    // Get the raw HTML element from jQuery wrapper
    const canvas = element.get(0);
    const rect = canvas.getBoundingClientRect();
    const center = {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2
    };

    // Start dragging from the center of the map
    cy.log('mousedown', {
      clientX: center.x,
      clientY: center.y
    });
    canvas.dispatchEvent(
      new MouseEvent('mousedown', {
        clientX: center.x,
        clientY: center.y
      })
    );

    // Let Leaflet know the mouse has started to move. The diff between
    // mousedown and mousemove event needs to be large enough so that Leaflet
    // will really think the mouse is moving and not that it was a click where
    // the mouse moved just a tiny amount.
    cy.log('mousemove', {
      clientX: center.x,
      clientY: center.y + 5
    });
    canvas.dispatchEvent(
      new MouseEvent('mousemove', {
        clientX: center.x,
        clientY: center.y + 5,
        bubbles: true
      })
    );

    // After Leaflet knows mouse is moving, we move the mouse as depicted by the options.
    cy.log('mousemove', {
      clientX: center.x + rect.width * xMoveFactor,
      clientY: center.y + rect.height * yMoveFactor
    });
    canvas.dispatchEvent(
      new MouseEvent('mousemove', {
        clientX: center.x + rect.width * xMoveFactor,
        clientY: center.y + rect.height * yMoveFactor,
        bubbles: true
      })
    );

    // Now when we "release" the mouse, Leaflet will fire a "dragend" event and
    // the search should register that the drag has stopped and run callbacks.
    cy.log('mouseup', {
      clientX: center.x + rect.width * xMoveFactor,
      clientY: center.y + rect.height * yMoveFactor
    });
    requestAnimationFrame(() => {
      canvas.dispatchEvent(
        new MouseEvent('mouseup', {
          clientX: center.x + rect.width * xMoveFactor,
          clientY: center.y + rect.height * yMoveFactor,
          bubbles: true
        })
      );
    });
  }
);