Testing utility for decorations at a range

saranrapjs · November 10, 2017, 10:39pm

I’ve come to enjoy/appreciate how https://github.com/ProseMirror/prosemirror-test-builder assists test-writing for position-dependent code, and have recently been wishing something similar existed for decorations as well.

When writing tests against a custom plugin, where the test is trying to evaluate what decorations have been rendered based on some state update/input, it’s currently somewhat complex to dig into the decoration data structure. I’ve read the code a few times, but still feel like I don’t have a good grasp of what I’m reading! Most of the time, what I want to do is to verify that a decoration of type X has been rendered a position Y, with Decoration spec Z (or with rendered DOM element Z).

As far as I can tell, the main place that this mapping between decorations and document positions happens is in the main view rendering code here:

github.com

ProseMirror/prosemirror-view/blob/be6f047447d548f3419f1b7990a1bc902538b51e/src/viewdesc.js#L1028


  result[--end] = desc
}
return result
}


// : (ViewDesc, DecorationSet, (Decoration), (Node, [Decoration], DecorationSet, number))
// This function abstracts iterating over the nodes and decorations in
// a fragment. Calls `onNode` for each node, with its local and child
// decorations. Splits text nodes when there is a decoration starting
// or ending inside of them. Calls `onWidget` for each widget.
function iterDeco(parent, deco, onWidget, onNode) {
let locals = deco.locals(parent), offset = 0
// Simple, cheap variant for when there are no local decorations
if (locals.length == 0) {
  for (let i = 0; i < parent.childCount; i++) {
    let child = parent.child(i)
    onNode(child, locals, deco.forChild(offset, child), i)
    offset += child.nodeSize
  }
  return
}

My dream vision, though, would be to have some kind of test utility where the signature looked like the following:

// : (DecorationSet, Node, number, number) → [Decoration]
function decoAtPos(decos, node, from, to) {
  ....
  return foundDecorations;
}

Which would allow easy introspection of decorations rendered at a given range. There might be good reasons why this isn’t possible, or desirable, but I’d be curious to hear what others think? Happy, also, to file this as an RFC if that’s a channel in which to articulate the problem.

marijn · November 11, 2017, 8:58pm

Are you trying to test whether the DOM has the drawn decorations in the right place, or whether the decorations themselves were generated correctly? There’s already a bunch of tests for the former in the prosemirror-view module. For the latter, the node shouldn’t matter, and you can just directly use find on the decoration set which should give you the data you are looking for.

saranrapjs · November 11, 2017, 11:55pm

I guess now that I’m thinking about it, I’m mostly concerned with their being generated correctly — e.g. I care about positioning, but not where they’re drawn. I’d totally forgotten about DecorationSet.find, and I’ll just use that, thanks!