在 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 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

        })

      );

    });

  }

);