javascript - 使用 Cypress.js 测试 D3.js 拖动事件

Question

我有一个使用 d3-zoom 的 SVG 对象用于缩放和平移功能。它工作完美，但当我开始使用 Cypress.js 进行集成测试时，问题就出现了。 .

我尝试在 svg 元素上使用标准鼠标事件来模拟拖动行为:

cy.get('svg')
  .trigger('mousedown', { which: 1, force: true })
  .trigger('mousemove', { position: 'left' })
  .trigger('mouseup', { position: 'left', force: true });

上面的例子取自Cypress drag and drop recipe ，它会在 nodrag.js 文件中产生以下错误:

cannot read property document of undefined

下面你可以看到错误发生的地方(view is undefined):

__webpack_exports__["default"] = (function(view) {
  var root = view.document.documentElement,
  ...

我花了很多时间尝试以另一种方式触发事件，但没有成功 - 比如用 svg 容器尝试上面的代码片段。

请记住，我无法从 Cypress 测试中访问任何 d3.js 包，因为它是作为 NPM 包导入到 React 应用程序中的。

预先感谢您的帮助!

Answer 1

在我不得不继续之前，我只能得出部分答案，但也许这可以帮助您或其他人找到最终解决方案。

要纠正错误，必须为 mousedown 提供 view 属性。像这样提供 window，允许 D3 方法正确触发:

cy.get('svg')
  .trigger('mousedown', { which: 1, force: true, view: window }) // <-- here
  .trigger('mousemove', { position: 'left', view: window })      // <-- here
  .trigger('mouseup', { position: 'left', force: true });

但是在试运行过程中并没有出现拖拽、移动等问题，由此引发了其他问题。开始于... 这是与事件一起发送的正确上下文吗？似乎是这样，因为 window 似乎是唯一具有 D3 预期的属性链的上下文:

view.document.documentElement

或者这是一种反模式……一种代码味道？

对这些后续问题进行总结，得出了一些似乎具有重要意义的观察结果。

第一个问题是 D3 如何处理鼠标和拖动事件。 D3 有许多事件监听器和回调覆盖标准事件及其各自的处理程序。

第二个是 iframe 与 Cypress 测试运行器一起使用。

会不会是 Cypress 以编程方式触发的事件在 Cypress iframe 中正确触发，但由于 D3 的积极事件处理，这些事件到应用程序 iframe 的转换正在丢失？特别是考虑到在测试视口(viewport)中手动拖动圆圈效果很好。

这又回到了:

• 是否未在正确的上下文中调用以编程方式触发的事件？
• 这些事件是否以某种方式被 D3 的事件处理程序吞没或与之冲突？

我选择了 Zoomable Force Directed Graph作为我的 D3 主题，在一个简单的 Ember 应用程序中，用于研究这个问题。它完美地重现了提到的错误，所以它看起来肯定是 D3 + Cypress 的挑战，与前端框架无关。

我希望这些努力对您有所帮助。

---

继续...

经过进一步阅读 – Cypress's Trade-offs ，特别是他们公开的拉取请求 Support for Native Browser Events – 似乎 D3 中的事件处理覆盖在 Cypress 中尚未完全协调。更简单的实现，如 drag and drop example 中详述的那些, 不要提出由像 D3 这样的第 3 方库引入的事件处理挑战。但是，这种支持似乎确实在 Cypress 团队中正在开发中。