如何使用 vue 和 jest 测试拖放答案

【问题标题】：How to test drag and drop with vue and jest如何使用 vue 和 jest 测试拖放
【发布时间】：2019-03-20 18:19:15
【问题描述】：

有没有用 jest 和 vue 和 vue.draggable 测试拖放的好方法？

我尝试查看vue.draggable plugin 中的测试，但找不到任何内容。真的未经测试吗？

【问题讨论】：

标签： vue.js drag-and-drop jestjs draggable

【解决方案1】：

检查：https://github.com/SortableJS/Vue.Draggable/tree/master/tests/unit

单元测试本身并不是假装拖放，而是模拟事件和由 Sortable.js 执行的 DOM 操作，并测试 vue.draggable 对这些输入的反应

【讨论】：

【解决方案2】：

似乎没有经过测试。

这个article 展示了如何使用 Jest 执行拖动测试：

const getTableCells = () =>
  Array.from(mountNode.querySelectorAll("tr td:nth-of-type(1)"));

const createBubbledEvent = (type, props = {}) => {
  const event = new Event(type, { bubbles: true });
  Object.assign(event, props);
  return event;
};

const tableCells = getTableCells();
const startingNode = tableCells[0];
const endingNode = tableCells[2];

startingNode.dispatchEvent(
  createBubbledEvent("dragstart", { clientX: 0, clientY: 0 })
);

endingNode.dispatchEvent(
  createBubbledEvent("drop", { clientX: 0, clientY: 1 })
);

expect(getTableCells().map(cell => cell.textContent)).toEqual([
  "Bob",
  "Clark",
  "Alice",
]);

一个非常著名的可拖动功能库来自 Shopify：

https://github.com/Shopify/draggable

我看到他们有一些测试，也许您可以通过查看存储库获得更多信息？

【讨论】：