在 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 认为地图正在拖动。我们编写了一个自定义 Cypress 命令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 movingcy.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        })      );    });  });