d3 / d3-drag

Drag and drop SVG, HTML or Canvas using mouse or touch input.

Home Page:https://d3js.org/d3-drag

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support d3.drag in testing environments

penx opened this issue · comments

As per the report in #79 which was closed without a fix.

If using d3-drag in a non browser environment, such as jest + testing-library, an error will be thrown:

    Error: Uncaught [TypeError: Cannot read property 'document' of null]

This comes from

d3-drag/src/drag.js

Lines 50 to 63 in c6a7e46

function mousedowned(event, d) {
if (touchending || !filter.call(this, event, d)) return;
var gesture = beforestart(this, container.call(this, event, d), event, d, "mouse");
if (!gesture) return;
select(event.view)
.on("mousemove.drag", mousemoved, nonpassivecapture)
.on("mouseup.drag", mouseupped, nonpassivecapture);
nodrag(event.view);
nopropagation(event);
mousemoving = false;
mousedownx = event.clientX;
mousedowny = event.clientY;
gesture("start", event);
}

d3-drag/src/nodrag.js

Lines 4 to 5 in c6a7e46

export default function(view) {
var root = view.document.documentElement,

Because view is null.

Downstream issues:

I think nodrag should return early if view is null:

export default function(view) {
  if(!view) {
    return;
  }
  var root = view.document.documentElement,
      selection = select(view).on("dragstart.drag", noevent, nonpassivecapture);
  if ("onselectstart" in root) {
    selection.on("selectstart.drag", noevent, nonpassivecapture);
  } else {
    root.__noselect = root.style.MozUserSelect;
    root.style.MozUserSelect = "none";
  }
}

...at least, this works for my use case. I'll raise a PR.