- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一些使用 HTML Drag interface 的 React 组件.
特别是我听dragover
一个组件上的事件并使用 DataTransfer 设置 x 和 y 位置目的。然后,我听dragleave
不同组件上的事件并从 DataTransfer 检索 x 和 y 位置。
我正在使用 Jest 和 Enzyme 来测试我的组件。
如果我运行测试,我会收到此错误:
Test suite failed to run
ReferenceError: DataTransfer is not defined
DataTransfer
在我的
jest.config.js
并使其成为全局性的,但我不确定这是否是最佳解决方案。
class DataTransfer {
constructor() {
this.data = { dragX: "", dragY: "" };
this.dropEffect = "none";
this.effectAllowed = "all";
this.files = [];
this.img = "";
this.items = [];
this.types = [];
this.xOffset = 0;
this.yOffset = 0;
}
clearData() {
this.data = {};
}
getData(format) {
return this.data[format];
}
setData(format, data) {
this.data[format] = data;
}
setDragImage(img, xOffset, yOffset) {
this.img = img;
this.xOffset = xOffset;
this.yOffset = yOffset;
}
}
const baseConfig = {
globals: {
DataTransfer: DataTransfer,
},
// other config...
};
module.exports = baseConfig;
最佳答案
我正在使用以下自定义模型:
// Arrange
// Map as storage place
const testStorage = new Map();
// Mock of the drop Event
const testEvent = {
dataTransfer: {
setData: (key, value) => testStorage.set(key, value),
getData: (key) => testStorage.get(key)
}
};
// remmeber to have 'and.callTrough()' to allow go trough the method
spyOn(testEvent.dataTransfer, 'getData').and.callThrough();
// Act
// Add your code here
// Assert
expect(testEvent.dataTransfer.getData('YOUR_CHECKED_KEY')).toEqual('EXCPECTED_VALUE');
关于javascript - 如何用 Jest 模拟 DataTransfer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54864280/
我正在玩 drag-and-drop API并且有两种从 DragEvent.dataTransfer 收集文件的方法,有 readonly files: FileList 和 readonly it
这个问题已经有答案了: How to upload and list directories at firefox and chrome/chromium using change and drop
有什么区别 event.originalEvent.dataTransfer.files 和 event.dataTransfer.files ??? 因为在拖放中,第二个代码不起作用,它是未定义的,
我正在使用 Vuejs 和 DataTransfer 异步上传文件,并且我希望允许一次拖放多个文件以进行上传。 我可以进行第一次上传,但在上传完成时,Javascript 已经收集垃圾或更改了 Dat
我的拖放项目出现问题,当我拖动时出现错误:“e.dataTransfer 未定义” 拖动功能 dragstart: function(e) { e.dataTransfer.effectAll
尝试在拖放序列期间将 jQuery 对象传递到 dataTransfer 属性。将属性添加到 jQuert.event.props 数组后,我可以分配它,但它在 drop 事件期间返回 undefin
我执行以下操作: const blockOrField = new Block(); ev.dataTransfer.setData("data", blockOrField); 当我在另一个地方获
我正在尝试编写一个测试来检查我的 dragstart 事件监听器是否在 e.dataTransfer 上设置了属性。 我可以手动创建和调度 MouseEvent: var event = new Mo
我正在尝试创建一个 dragEvent 并在 Chrome 上使用以下代码以编程方式触发它: var ev = document.createEvent("MouseEvents"); ev.init
我正在构建一个简单的拖放 uploader ,我想知道为什么我在 console.log(e) (DragEvent) 时看不到我拖放的文件并查看 DragEvent.dataTransfer.fil
我正在尝试找出一种通过 javascript 的 event.dataTransfer 传递 native 对象以进行拖放的方法。我正在编写 CMS 的前端编辑器部分,并希望用户能够拖放元素(许多不同
编辑 此问题的根源在于 Sami 所确定的 Edge 浏览器的行为。 Firefox 做同样的事情,但 Chrome 工作正常。 原始问题 我有一个放置容器供用户拖放图像以设置 与图像。 如果从不同的
我有一些使用 HTML Drag interface 的 React 组件. 特别是我听dragover一个组件上的事件并使用 DataTransfer 设置 x 和 y 位置目的。然后,我听drag
我正在使用一个名为 react-dropzone 和 React-Redux 的 Node 包模块来允许用户将文件拖到窗口上并显示文件信息。 react-dropzone 组件为我提供了标准 even
我的组件中有以下元素: 下面是函数onInput: onInput(event) { event = event.nativeEvent; console.log(event.dat
在拖拽开始时,我试图将文本附加到拖动的图像上。这样我就可以稍后在 drop 方法中识别它: var drag = function(event){ event.originalEvent.d
我正在实现一个功能,其中 dataTransfer 中的数据将在 dragstart 事件上设置,当用户尝试拖动其他元素时将手动调用该事件。所以我使用这个 jQuery 来触发 dragstart 事
可以使用dataTransfer设置多个吗? HTML JS function drag(ev, format, color) { ev.dataTransfer.setData("text
我尝试使用DataTransfer.mozSetDataAt() jsfiddle 中的方法 script它抛出 SecurityError: The operation is insecure. 这
event.dataTransfer.setData中的数据类型在firefox和IE中冲突。IE不支持'text/html'。所以我应该使用'text'。问题是firefox不支持'text'。它单
我是一名优秀的程序员,十分优秀!