使用 Cypress 在 SVG 上测试 onclick 事件

Question

我正在用 Cypress 测试 d3 应用程序。在测试中，我想确保在单击 SVG 元素中的圆圈时调用特定函数。当我手动单击但我编写的测试失败时会调用该函数，因此我认为我在测试中的某个地方犯了错误。这是我现在拥有的测试代码：

import * as app from "../../app";

describe("Scatter plot", () => {
  before(() => {
    cy.visit("http://localhost:1234");
  });
  it("Triggers the displayMovieInfo on click", () => {
    const displayMovieInfo = cy.spy(app, "displayMovieInfo");
    cy.get("#scatterPlot")
      .get("circle")
      .eq(0)
      .click({ force: true });

    expect(displayMovieInfo).to.be.called;
  });
});

我从赛普拉斯得到的输出：

预计 displayMovieInfo 至少被调用过一次，但从未被调用过

任何帮助将不胜感激！

更新：我相信点击之前可能不起作用，因为当柏树尝试点击它时，圆圈不存在。通过添加“等待 cy.wait(1000);” 在单击操作之前，调用该函数（我可以看到结果和从其中记录的消息）。遗憾的是，测试仍然失败。

更新2：我将测试改为使用window对象（见下文），但断言仍然失败（测试本身成功，这也不是一件好事）。

 cy.window()
      .then(window => {
        displayMovieInfoSpy = cy.spy(window, "displayMovieInfo");
        cy.get("#scatterPlot")
          .get("circle")
          .eq(2)
          .click({ force: true })
          .as("clicking");
        expect(displayMovieInfoSpy).to.be.called;
      });

更新3：似乎d3和parcel.js的组合导致测试失败。当单独使用 d3 或单独使用 parcel.js 时，测试工作正常。此外，expect 语句应该在点击动作之后的 then 块中。

Answer 1

似乎您直接在测试中导入 app 变量。此对象与浏览器上的对象不同。您应该创建一个全局变量（或方法）以直接从浏览器获取应用程序变量

cy.window().its('app').then((app) => { 
   // your test with app var
})

此外，您可能希望使用 then() 条件来确保它在之后检查它。但这可能不是必需的。

.click({ force: true }).then(() => {
   expect(displayMovieInfo).to.be.called;
});

Answer 2

我认为您对 cypress 的工作原理主要有几个概念问题。

第一次单击只能在一个元素上，第二次单击是关于如何使用别名。

我放置的这段代码非常有用，希望它对您对别名、应该、单击和间谍的概念有所帮助。

d3test.spec.js

describe("Scatter plot", () => {
before(() => {
  cy.visit("http://localhost/d3test");
});
it("Triggers the displayMovieInfo on click", () => {
    cy.window()
    .then(window => {
      let displayMovieInfoSpy = cy.spy(window, "displayMovieInfo");

      cy.get("#scatterPlot").get("circle").as('circles')

      cy.get('@circles').should('have.length', 1)

      cy.get('@circles').click({ force: true })
        .then(() => {
            expect(displayMovieInfoSpy).to.be.called;
        })
    });
});
});

索引.html

<svg id="scatterPlot">
    <circle cx="50%" cy="50%" r="100" fill="blue" onclick="displayMovieInfo()"></circle>
</svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
    window.displayMovieInfo = function(){
        console.log(1);
    }
</script>

如果您遇到更多麻烦，我建议您使用 cy.log() 和调试器控制台一一尝试。