使用赛普拉斯在SVG上测试onclick事件

Question

我正在测试赛普拉斯的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至少被调用一次，但从未调用过

任何帮助将不胜感激！

更新：我认为点击可能之前没有用，因为当cypress试图点击它时，圆圈不存在。添加“await cy.wait（1000）;”在单击操作之前，调用该函数（我可以看到结果并从其中记录消息）。可悲的是，测试仍然失败。

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

 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语句应该在click操作之后的then块中。

Answer 1

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

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

此外，您可能希望使用then（）条件以确保它在之后进行检查。但这可能没有必要。

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

Answer 2

我认为你对柏树的工作方式大多有几个概念问题。

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

这段代码我的作品就像一个魅力，希望它能帮助你一点点别名的概念，点击和间谍。

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;
        })
    });
});
});

的index.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（）和调试器控制台逐个尝试。