@actano/drag-mock 中文文档教程

Question

drag-mock

触发 HTML5 拖动 & 用于测试的丢弃事件

Requirements

不需要第 3 方库。 您只需要一个普通网站和一个兼容 ES5 的浏览器（例如 IE9+、Chrome、Firefox 等）。

Setup

Browser

只需将库脚本添加到您的页面

<script src="http://andywer.github.io/drag-mock/drag-mock.min.js"></script>

然后您可以将它用作全局窗口或 AMD 模块

// plain javascript
var dragSource = document.querySelector('.draggable');
var dropTarget = document.querySelector('.drop-zone');

dragMock.dragStart(dragSource).drop(dropTarget);


// AMD
require(['dragMock'], function(dragMock) {
  var dragSource = document.querySelector('.draggable');
  var dropTarget = document.querySelector('.drop-zone');

  dragMock.dragStart(dragSource).drop(dropTarget);
});

Node / Webpack

使用安装

npm install drag-mock --save-dev

并在代码中需要它

var dragMock = require('drag-mock');

Usage

var dragSource  = document.querySelector('.draggable');
var dropTarget  = document.querySelector('.drop-target');
var hoverRegion = document.querySelector('.hover-region');

dragMock
  .dragStart(dragSource)
  .dragEnter(hoverRegion)
  .dragOver(hoverRegion)
  .dragLeave(hoverRegion)
  .delay(500)
  .drop(dropTarget);

如果您想在事件对象上设置一些属性，您可以传递一个可选的属性对象作为第二 参数：

var dragSource = document.querySelector('.draggable');
var dropTarget = document.querySelector('.drop-target');

dragMock
  .dragStart(dragSource, { clientX: 300, clientY: 400 })
  .drop(dropTarget, { clientX: 200, clientY: 500 });

您还可以通过传递可选的回调函数来自定义事件。 创建后调用回调 事件，但在发送之前。 如果你的回调函数少于两个参数，那么它将被调用一次 dragstart/drop 事件。 如果回调采用两个参数，则会为创建的所有事件调用它：

dragMock
  .dragStart(dragSource, function(event, eventName) {
    // will be called for all created events (mousedown, dragstart), because the callback takes two arguments
    dragStartEvent.dataTransfer.setData('application/json', { hello: 'world' });
  })
  .drop(dropTarget, function(dropEvent) {
    // a callback with less than two parameters will only be called once for the primary ('drop') event

    var data = dropEvent.dataTransfer.getData('application/json');
    console.log('Hello ' + data.hello);
  });

Testing

将其与您选择的测试框架一起使用。

describe('My fancy mail app', function() {

  it('moves mails properly', function(done) {
    var mail = document.querySelector('.mail[data-id=1234]');
    var folder = document.querySelector('.folder[data-id=5678]');

    dragMock.dragStart(mail).drop(folder);

    var mailsInFolder = MailFolderService.getFolder(5678).getMailCount();
    expect(mailsInFolder).to.equal(1);
  });

});

Additional features

以下事件提供了一个伪造的（但功能齐全的）dataTransfer 对象： 拖动、dragstart、dragover、dragend、dragleave、drop< /code>

webdriver.io integration

注意：不适用于较新的 webdriver 版本。 如果您有修复，请随时打开 PR。

> 删除 Selenium 的 dragAndDrop() 之外的功能 您可以轻松地将 drag-mock 集成到 webdriver 中。 CSS 选择器和 XPath 字符串都被接受为参数。

var dragMock = require('drag-mock');
var webdriverio = require('webdriverio');

var webdriver = webdriverio.remote({ desiredCapabilities: { browserName: 'chrome' } }).init();

// set up webdriver.dragStart(), webdriver.dragOver(), webdriver.dragLeave() and webdriver.drop()
dragMock.extendWebdriver(webdriver);

// load the drag-mock library into the browser context
dragMock.loadLibrary(webdriver);

// drag and drop
webdriver
  .dragStart('#my-drag-source', { clientX: 200, clientY: 300 })
  .delay(250)
  .drop('//*[text()="Drop Zone"]', function(error) {
    if (error) {
      console.error(error);
    }
  });

Development

首先运行 npm install 来安装所有依赖项。 gulp dist 重建 dist/ 内容。 gulp test（或 npm test）运行测试套件。 默认的 gulp 任务首先运行 dist，然后是 test。

License

该软件根据 MIT 许可条款获得许可。 有关详细信息，请参阅许可证。