No longer possible to run tests for components which import plotly without a browser

[wayofthepie]

Recently a change was made to svg_text_utils.js which instantiates a DOMParser at the top level of that module:

plotly.js/src/lib/svg_text_utils.js

Line 22 in ce970f1

var parser = new DOMParser();

.

This has broken a number of tests I have which do not use a browser (or jsdom etc..) because the DOMParser will be instantiated on import, giving the following:

var parser = new DOMParser();
                 ^

ReferenceError: DOMParser is not defined
    at Object.<anonymous> (/home/user/repo/node_modules/plotly.js/src/lib/svg_text_utils.js:22:18)
...

For now I've applied a very quick fix:

var parser;
function cachingParser() {
  parser = parser === undefined ? new DOMParser(): parser;
  return parser
};
...
var dom = cachingParser().parseFromString(skeleton, 'application/xml'),
        childNode = dom.documentElement.firstChild;
...

Can this be updated to something like the above? If not, then does the DOMParser really need to be at the top level?

[etpinard]

Thanks for tracking down this bug.

I'm curious, what kind of tests are you running in node? I'm surprised that anything plotly.js works in node w/o at least using jsdom. That said, we should at the very least repalce that new DOMParser() statement with new window.DOMParser() so that it can be more easily mocked in non-browser runtimes.

If not, then does the DOMParser really need to be at the top level?

It doesn't need to. But, apparently instantiating DOMParser is a non-negligible operation so @hy9be moved it to the module scope in #1585 instead of instantiating it every time a text node is drawn.

[wayofthepie]

I actually am using jsdom 😉 was half asleep yesterday when I came across this!

I can set up a DOMParser as is with jsDom, so all is good really for me, but ya maybe what you suggested would be better, to use new window.DOMParser() as window is generally simulated anyway.

[bnbarak]

Temporary fix to run tests that import Plotly in a non-browser environment.

const importPlotly = () => {
  if(window.isTesting)
    return {Plot: null, Plotly: null} // or Plot: <div />

  const Plotly = require('plotly.js/dist/plotly.min.js');
  const Plot = require('react-plotly.js');
  return { Plot, Plotly };
};

const { Plot, Plotly } = importPlotly();