Skip to content

Support d3.drag in testing environments #89

Description

@penx

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions