如何使用 vue 和开玩笑测试拖放

Question

有没有一种好方法可以用jest and vue和vue.draggable测试拖放？

我试图查看 vue.draggable 插件中的测试，但我找不到任何测试。它真的未经测试吗？

Answer 1

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

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

Answer 2

它似乎没有经过测试。

本文展示了如何使用 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

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